cobolstinks cobolstinks -4 years ago 98
CSS Question

how to float divs in a <li> but still stack the <li> entries vertically?

I have a

<ul>
where each
<li>
will have 2 divs. I would like the divs to float next to one another, but still have the
<li>
s stack vertically. My problem is that all my divs are floating instead of each
<li>
going beneath the previous. What style changes to i need to make here?

Thanks!
enter image description here

// Add the message to the page.
$('#conversation').append('<li><div class="chat-container"><div class="' + cssStyle + '"></div><div class="chat-text"><strong>' + encodedName + '</strong>:&nbsp;&nbsp;' + encodedMsg + '</div><div></li>');


My Styles:

#conversation >li > div > div {
float: left;
}
.legend {
font-size: 20px;
}
.chat-text {
padding-left: 20px;
}


with the answer i now get this as i wanted.

enter image description here

Answer Source

Your having a clearfix problem.

Add this to your style, but you will most likely need to make this a CSS class so it doesn't apply to all li tags:

li{
    overflow: auto;
}

Working Example http://jsfiddle.net/6J8SU/

To add the class change your script:

$('#conversation').append('<li class="row"><div class="chat-container"><div class="' + cssStyle + '"></div><div class="chat-text"><strong>'
            + encodedName + '</strong>:&nbsp;&nbsp;' + encodedMsg + '</div><div></li>');

Then add this styling:

.row{
    overflow: auto;
}

Example with Class http://jsfiddle.net/6J8SU/1/

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download