css: table-less layout for comments

Question

I am clueless on table-less layout in CSS and want to convert a simple comment system that lays out the comments with tables to a simple one in CSS. Here is what it looks like with tables.

<table>
    <tr>
        <td>
            <img src="headshot.gif" width=40 border-0>
        </td>
        <td><span style="font-color:gold;font-weight:bold;">Kumar</span>
            <br>I really liked the movie - 3 days ago</td>
    </tr>
</table>

Can anyone suggest right way to go about this with table-less layout.

Leeish · Answer 1 · 2013-12-27T04:51:43.953

0

http://jsfiddle.net/SfeMs/

div .img {
    display: inline-block;
    width: 100px;
    background: red;
    vertical-align: top;
}

div .text {
    display: inline-block;
    width: 400px;
    background: blue;
}

Colors and widths are unimportant. Just make a few inline-block spans.

edited Dec 27 '13 at 04:51

answered Dec 27 '13 at 04:45

Leeish

5,203
2
17
45

Question is how to get the image in one "cell" and the text in a separate one to the right so that the text does not wrap around image and it displays neatly as in typical comment layout. – user1904273 Dec 27 '13 at 04:47
Ahh.. I see. I guess I didn't understand the question. – Leeish Dec 27 '13 at 04:48
I imagine you create spans and then style them in css with tags like float and offset but I'm clueless on how to do this. – user1904273 Dec 27 '13 at 04:51
what would I use instead? – user1904273 Dec 27 '13 at 04:57
What I put up there. Just make two spans and set their display to `inline-block`. They will sit next to each other regardless of height. There are other ways to do this depending on other factors, heights of elements, flexibility required, etc. – Leeish Dec 27 '13 at 05:06

score 0 · Answer 2 · edited May 23 '17 at 10:32

0

Please check my answer from here: Make two parallel `<div>` colums the same height
You can use one "column" for image and the other one for text

edited May 23 '17 at 10:32

Community

1
1

answered Dec 27 '13 at 04:59

ntt

426
1
4
9

score 0 · Answer 3 · edited May 23 '17 at 12:28

I think I can help with an example of what I have found that works in the past. Let's start with the HTML:

<form action="" method="post">
    <ul id="regis_ul">
        <li id="regis_li">
            <label><span> Username: </span>
 <span><input type = 'text' name ='username' id ='username' value = ></span>
            </label>
        </li>
        <li id="regis_li">
            <label> <span> Password: </span>
    <span><input type = 'password' name ='password' id ='password' value ='' ></span>

            </label>
        </li>
        <li id="regis_li">
            <label> <span> Retype Password: </span>
    <span><input type = 'password' name ='repassword' id ='repassword' value ='' ></span>

            </label>
        </li>
        <li id="regis_li">
            <label> <span> Email Address: </span>
    <span><input type = 'text' name ='email' id ='email' value ='' ></span>
            </label>
        </li>
    </ul>
    <input type='submit' name='submit' value='Register'>
</form>
</div>

This just sets up a simple, box like, structured system that allows for a registration to a page, but can easily be restructured to become something used for comments. Now here is the key part, the CSS which initially designs everything:

#regis_ul {
    display:table;
}
#regis_li {
    display:table-row-group;
}
#sub_but {
    margin-left: 0 auto;
}
span {
    display: table-cell;
}
label {
    display: table-row;
}

One key thing to note in this aspect is the display choices used in many of the CSS elements here. More, exact information can be found here along with many other tricks that can be used in CSS. To provide a little more information, this display method "tricks" the browser into thinking it is a table and to display it like one. What is the difference between using a table and an unordered list? All of that information can be found here, where a list of pros and cons is gone over.

Now you're probably wondering what this actually looks like, well I have provided a JsFiddle with the exact representation.

So What do you do now? Well.. I encourage you to play with the code I have provided, it will help you to find the exact thing layout you want for your comment system. A few things to note that you will end up needing.. a div, which actually holds the entire set of elements inside of it (like a safety precaution to make sure all of the information stays in on box) and then an unordered list to create a structured flow...

Lastly, I do want to mention that you can easily implement MySQL and PHP with this comment system but if you don't know what that is, then don't even worry about it :). I encourage you to explore and play with my example and also to look over more information on cool things in CSS with the Almanac.

Good luck on your future coding projects, I hope it all works well for you :)

css: table-less layout for comments

3 Answers3