To display 2 div's next to one another...

[invision]

Hi,

I have a wrapper and some code like this:

<div id="mainlist">
<div style="float:left;">
this column will be on the left hand side
this contains a big list of words
</div>
<div style="float:right;">
and this one on the right
this also contains a big list of words
</div>
</div>


but unfortunately it doesn't work.

Here's the only CSS I'm using for this portion:

#mainlist p {
font-size:1.1em;
color:#000;
}

#mainlist {
background:#E7EFB7;
padding:23px;
}



Any clues?

It basically seems to reduce my mainlist element to like 3px high

[Centauri]

You have to set a width for the divs, otherwise the content will expand them until they reach the width of the container.

Unless you "clear" the floats, the container will collapse as floats are taken out of the doicument flow.

[invision]

I've tried the following but with no success:


<div id="mainlist"> <div style="float:left;width:300px;clear:both"> this column will be on the left hand side this contains a big list of words </div> <div style="float:right;width:300px;clear:both"> and this one on the right this also contains a big list of words </div> </div>


Any ideas?

[Centauri]

The clear property is for clearing floated elements prior to the one in which the clear is used. Try :<div id="mainlist" style="overflow: hidden"> <div style="float:left;width:300px"> this column will be on the left hand side this contains a big list of words </div> <div style="float:right;width:300px"> and this one on the right this also contains a big list of words </div> </div>

[invision]

Works a treat.

Have had this problem in the past, and good to know there's an easy solution.

Many thanks for your help.