How would you style this html so that everything falls into a table?


Tags: html,css,positioning,css-tables

Problem :

How would you make the following html fall into a table-like structure where each div.comment_column falls horizontally next to one another? I prefer to use CSS and not tables:

<div class="comments_div">

    <div class="comment_column">
        <div id="comment_title_23" class="comment_title">
            What do you think of the lyrics?
            <a href="/comment_titles/23" class="comment_title_delete" data-method="delete" data-remote="true" rel="nofollow">x</a>
        </div>
        <div class="comment" id="comment_4">
             Great lyrics!
        </div>
    </div>

    <div class="comment_column">
        <div id="comment_title_25" class="comment_title">
            What should my next song be?
            <a href="/comment_titles/25" class="comment_title_delete" data-method="delete" data-remote="true" rel="nofollow">x</a>
        </div>
        <div class="comment" id="comment_4">
             Nice job! Do a another song next.
        </div>
    </div>

    <div class="comment_column">
        <div id="comment_title_26" class="comment_title">
            Feedback
            <a href="/comment_titles/26" class="comment_title_delete" data-method="delete" data-remote="true" rel="nofollow">x</a>
        </div>
        <div class="comment" id="comment_4">
             Awesome stuff... next time rap a little more than sing but still great job.
        </div>   
    </div>

</div>


Solution :

Add these to your css :

.clearfix:after {
    content: ".";
    display: block;
    clear: both;
    visibility: hidden;
    line-height: 0;
    height: 0;
}

.clearfix {
    display: inline-block;
}

html[xmlns] .clearfix {
    display: block;
}

* html .clearfix {
    height: 1%;
}

.comment_colum {
    float: left;
    /* width: 200px; <-- can set a width here */
}

And change :

<div class="comments_div">

to :

<div class="comments_div clearfix">

    CSS Howto..

    how is at the rate import filename.css in style tag different from link tag to relate to css file

    How do I prevent this list from moving across the page?

    How to keep my hover unchanged after it's release

    Dojo: how to find css definition for digit.form.filteringselect, especially the drop down list?

    How can I use CSS to select and style all LI elements that have UL sub-elements? [duplicate]

    How to have two items be placed next to each other in HTML?

    How to move this button?

    How do you disable the set width of parent element for child element?

    How to generate CSS color in proportion to value?

    how to move fixed slider to top when scrolling using CSS only

    css code how to put the navigation in the middle

    css 3d perspective not showing up correctly in certain browsers

    How to move a table(or other content) next to vertical navigation bar

    What is SVG and how does it work?

    How is the scroll effect achieved in this webpage?

    How do I style hyperlinks separately, using CSS?

    CSS/HTML How to align these elements for a mobile view?

    How to check if a TR contains a TD with a specific CSS class with jquery?

    How to reorder DOM elements with CSS only?

    How can I select the first IFRAME within the second FB tag in a div?

    express: how to send html together with css using sendFile?

    CSS - How to view computed font size?

    How to make fadeIn() and hide() work only for tablet and desktop versions?

    How come one of my columns in bootstrap is not functioning properly?

    How to apply background color to buttons using css in asp.net?

    How to use CSS to make an input fields behaves like a button click?

    How to put the menu over the content?

    How do I get pictures side by side (responsive)

    How to give style to iframed page content using parent pages css?

    How to make section element in css to full width