Floating Two Columns Side by Side

Forum Moderators: not2easy

Message Too Old, No Replies

Floating Two Columns Side by Side

posaune02

2:20 am on Mar 21, 2004 (gmt 0)

I am trying to float two columns side by side. I found some other tips on how to use the :after pseudo-class to create a div that would clear both of them (allowing for a footer). However, my problem is that my two divs won't float side by side. To get them both side by side, both divs need an explicit width. However, my left float MUST be rendered using px and I want the right float to fill the rest. If I don't supply a width for the right float, it renders below the left one, rather than beside it. Anyone have any suggestions?

Rambo Tribble

5:01 am on Mar 21, 2004 (gmt 0)

Instead of floating the right div, how about something like this?

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN""http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Untitled</title>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
</head>
<body>
<div>
<div style="float:left;width:100px;height:200px;background:silver;"></div>
<div style="position:absolute;left:100px;width:100%;height:200px;background:blue;"></div>
</div>
</body>
</html>

posaune02

6:20 am on Mar 21, 2004 (gmt 0)

The problem there would be that both elements would be taken out of the document flow leaving an empty container that would collapse. Using a "clear" empty div would at least give me the height of the left float, but the left float will not always be the longest of the two columns, thus leaving a right column overflow.

SuzyUK

12:14 pm on Mar 21, 2004 (gmt 0)

Hi posaune02.. welcome to WebmasterWorld

the code in this thread [webmasterworld.com] may help your situation..

In the code in the linked thread the "wrapper" and the "nav" are the 2 divs which are floating and it's the negative margin trick which enables them to appear side by side, the "content" div requires the clearing (positive) margin to stop content wrapping around the nav should it be longer...

The :after clearing trick is not needed for this layout either as the header/footers just require width 100% (for IE) and clear: both;

Suzy

posaune02

9:24 pm on Mar 21, 2004 (gmt 0)

Thanks for all your help! My positioning is fixed and is as follows:

I have a container holding
1) a header,
2) a floated center which holds
a) fixed width left float
b) fluid navigation
3) and a cleared (both) footer.

All of the above divs are relative.

However, I now have another problem.
For some reason, my doctypes are screwy.
After fixing the positioning with your suggestion (thanks again) I end up with two main problems. If I use XHTML Strict then Netscape throws some extra padding above my h, ul, and li tags (not IE). However, If I switch to Transitional, Netscape is fixed, but then IE doesn't properly display my h, ul, and li tags (messes up the background rendering of the tags). I'm at a complete loss as to what may be the problem.

SuzyUK

12:37 pm on Mar 22, 2004 (gmt 0)

I'm gonna guess at the collapsing margins issue..

back to that linked thread and the link to image by a member (which is now broken :() that image was a picture of what you are describing. This Moz phenomenon is not unique to this particular layout by any means, it will appear in most "container" div situations, it is a quirk (haven't quite got my head around if it's right or not yet) of the way it handles collapsing margins.

So what I do as a matter of course (in any layout I do) is to remove all default margins from all internal HTML elements, <hx>, <p> and <ul> especially, and then control any required spacing using padding. (or that border trick I mention in that previous post, if it's obvious/easy to put a border onto the container)

Suzy

posaune02

11:19 pm on Mar 28, 2004 (gmt 0)

I'm not really sure what I did, but I got it fixed. Thank you for all your help.