CSS - div position

[kruser]

Hello,

Looking to display two div's side by side.

This works in IE but not Netscape. In Netscape the div's are on top of each other.

<div style="float:left;">
this is column 1
</div>

<div>
this is column2
</div>

Any thoughts appreciated,
Randy

[rah]

Try doing a float left on both div tags. That should make them both sit next to each other.

The only problem that comes out of this is that you'll need a third div below those two with a clear: both on it to make sure that if one of the top two divs is longer than the other it doesn't push out of any container you may have.

Hope this helps,
Rafael

[wige]

You may also need to specify display:inline;

[kruser]

You may also need to specify display:inline;

wige - would the display:inline go in both div's ?

[wige]

Yes. By default divs are block elements, which are displayed on their own line, inline should override this.

[kruser]

Then this should cover replies so far.

<div style="float:left;display:inline;">
this is column 1
</div>

<div style="float:left;display:inline;">
this is column 2
</div>

<div style="clear:both;">
&nbsp;
</div>

[hpham]

try to set their width. usually, if it's 2 column page, I set the first float is left, and the second is right. It works fine for me on both IE and Firefox, tested on Safari too

[kruser]

That would mean...

<div style="float:left;display:inline;width:45%;">
this is column 1
</div>

<div style="float:right;display:inline;width:45%">
this is column 2
</div>

<div style="clear:both;">
&nbsp;
</div>

...would be good CSS style for two columns side by side