Page 1 of 1
Is my grasp of CSS positioning right?
Posted: Tue Sep 02, 2008 6:19 am
by Sindarin
Since I had some problems with my last project I decided to do some more practice on css positioning. So I made this 'layout'.
I ask you, is this correct? Do floats help the content be more organized like a table? Do wrappers work like this? Will it work in all browsers the same?

Re: Is my grasp of CSS positioning right?
Posted: Tue Sep 02, 2008 9:24 am
by jayshields
You'd be better off providing us with source and/or a live example.
Re: Is my grasp of CSS positioning right?
Posted: Tue Sep 02, 2008 12:30 pm
by andyhoneycutt
Your concept looks like it is sound. As far as wrappers go with floats in them, I think you should be able to slap what you have there into a solid CSS document, for sure. The only problem I can see you running into with that layout is playing around with the height(s) of the vertically middle divs.
-Andy
Re: Is my grasp of CSS positioning right?
Posted: Wed Sep 03, 2008 4:06 am
by Sindarin
The only problem I can see you running into with that layout is playing around with the height(s) of the vertically middle divs.
You mean I won't be able to use another one column between the two floats?
Re: Is my grasp of CSS positioning right?
Posted: Wed Sep 03, 2008 7:35 am
by matthijs
The layout you have shown is pretty basic and can be accomplished with CSS perfectly. Whether it is 2 columns, or 3 or more.
Re: Is my grasp of CSS positioning right?
Posted: Wed Sep 03, 2008 8:05 am
by Sindarin
The layout you have shown is pretty basic and can be accomplished with CSS perfectly. Whether it is 2 columns, or 3 or more.
What is best to use inside for the columns? floats or relative positioned divs?
Re: Is my grasp of CSS positioning right?
Posted: Wed Sep 03, 2008 8:19 am
by matthijs
That question is a bit difficult to answer. As often, it depends.
Floats work pretty good. Basically
Code: Select all
#wrapper { width:800px; // or ems, or % }
#somecol { float:left; width:390px; // or ems % }
#someothercol { float:right; width:390px; }
Is all you need, works in all modern browsers.
I'm not sure about what you would want to do with relative positioning.
Re: Is my grasp of CSS positioning right?
Posted: Wed Sep 03, 2008 9:21 am
by andyhoneycutt
Sindarin wrote:The only problem I can see you running into with that layout is playing around with the height(s) of the vertically middle divs.
You mean I won't be able to use another one column between the two floats?
No, I mean it can be a trick using floats to get them to have the same height if the content in them isn't the same length.
Re: Is my grasp of CSS positioning right?
Posted: Wed Sep 03, 2008 3:24 pm
by inghamn
If you haven't already...you might checkout Glish:
http://www.glish.com/css/
You wouldn't worry about the columns being the same height - as long as the wrapper div expands to encapsulate them.
Code: Select all
#wrapper { overflow:auto; }
#leftColumn { float:left; width:150px; }
#middleColumn { margin-left:155px; margin-right:155px; }
#rightColumn { float:right; width:15px; }
That requires that, in your markup, you have the divs in a certain order. They must be marked up as left-right-middle.
Another way is to float all the columns to the left and let them stack up.
Re: Is my grasp of CSS positioning right?
Posted: Thu Sep 04, 2008 3:37 am
by Sindarin
will overflow:auto push everything below that div if needed like a table does?
Re: Is my grasp of CSS positioning right?
Posted: Thu Sep 04, 2008 4:55 am
by matthijs
Do the two boxes need the same height and have a flexible height?
Re: Is my grasp of CSS positioning right?
Posted: Thu Sep 04, 2008 5:41 am
by Sindarin
Do the two boxes need the same height and have a flexible height?
yes they need the same height and what defines a flexible height?
Re: Is my grasp of CSS positioning right?
Posted: Thu Sep 04, 2008 6:08 am
by matthijs
What I mean with flexible height is a height that adjusts to the content inside.
To achieve the equal height including having flexible column heights is a bit tricky in CSS compared to using a table.
http://www.ejeliot.com/blog/61
Well actually, it is not so difficult. Only IE6 doesn't cooperate
http://www.456bereastreet.com/archive/2 ... _with_css/
So, if you use the advanced CSS it's not so difficult. If you have to deal with IE6 it's more tricky. There are workarounds. Also using javascript
http://www.sitepoint.com/newsletter/vie ... 3&issue=70
Code: Select all
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>untitled</title>
<style type="text/css" media="screen">
* { margin:0;padding:0; }
body { background:#eee; }
#wrapper { margin:100px auto;width:800px;display:table;border-collapse:separate;border-spacing:10px; }
#section { display:table-row; }
#leftcol { width: 390px;background:#fff;display:table-cell; }
#rightcol { width: 390px;background:#fff;display:table-cell; }
</style>
</head>
<body>
<div id="wrapper">
<div id="section">
<div id="leftcol"><p>leftcol</p><p>leftcol</p><p>leftcol</p></div>
<div id="rightcol"><p>rightcol</p><p>rightcol</p><p>rightcol</p><p>rightcol</p><p>rightcol</p></div>
</div>
</div>
</body>
</html>
Re: Is my grasp of CSS positioning right?
Posted: Thu Sep 04, 2008 7:27 am
by inghamn
overflow:auto will make the wrapper div expand large enough to contain the full size of the floated divs. Without it, the floated divs are removed from the flow, and the wrapper div's height would shrink down to nothing. Overflow:auto reminds that div to grow to contain even the floats.
This works with IE6 as well.