Is my grasp of CSS positioning right?

Not for 'how-to' coding questions but PHP theory instead, this forum is here for those of us who wish to learn about design aspects of programming with PHP.

Moderator: General Moderators

Post Reply
User avatar
Sindarin
Forum Regular
Posts: 521
Joined: Tue Sep 25, 2007 8:36 am
Location: Greece

Is my grasp of CSS positioning right?

Post 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?

Image
User avatar
jayshields
DevNet Resident
Posts: 1912
Joined: Mon Aug 22, 2005 12:11 pm
Location: Leeds/Manchester, England

Re: Is my grasp of CSS positioning right?

Post by jayshields »

You'd be better off providing us with source and/or a live example.
User avatar
andyhoneycutt
Forum Contributor
Posts: 468
Joined: Wed Aug 27, 2008 10:02 am
Location: Idaho Falls

Re: Is my grasp of CSS positioning right?

Post 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
User avatar
Sindarin
Forum Regular
Posts: 521
Joined: Tue Sep 25, 2007 8:36 am
Location: Greece

Re: Is my grasp of CSS positioning right?

Post 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?
matthijs
DevNet Master
Posts: 3360
Joined: Thu Oct 06, 2005 3:57 pm

Re: Is my grasp of CSS positioning right?

Post 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.
User avatar
Sindarin
Forum Regular
Posts: 521
Joined: Tue Sep 25, 2007 8:36 am
Location: Greece

Re: Is my grasp of CSS positioning right?

Post 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?
matthijs
DevNet Master
Posts: 3360
Joined: Thu Oct 06, 2005 3:57 pm

Re: Is my grasp of CSS positioning right?

Post 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.
User avatar
andyhoneycutt
Forum Contributor
Posts: 468
Joined: Wed Aug 27, 2008 10:02 am
Location: Idaho Falls

Re: Is my grasp of CSS positioning right?

Post 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.
User avatar
inghamn
Forum Contributor
Posts: 174
Joined: Mon Apr 16, 2007 10:33 am
Location: Bloomington, IN, USA

Re: Is my grasp of CSS positioning right?

Post 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.
User avatar
Sindarin
Forum Regular
Posts: 521
Joined: Tue Sep 25, 2007 8:36 am
Location: Greece

Re: Is my grasp of CSS positioning right?

Post by Sindarin »

will overflow:auto push everything below that div if needed like a table does?
matthijs
DevNet Master
Posts: 3360
Joined: Thu Oct 06, 2005 3:57 pm

Re: Is my grasp of CSS positioning right?

Post by matthijs »

Do the two boxes need the same height and have a flexible height?
User avatar
Sindarin
Forum Regular
Posts: 521
Joined: Tue Sep 25, 2007 8:36 am
Location: Greece

Re: Is my grasp of CSS positioning right?

Post 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?
matthijs
DevNet Master
Posts: 3360
Joined: Thu Oct 06, 2005 3:57 pm

Re: Is my grasp of CSS positioning right?

Post 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>
 
User avatar
inghamn
Forum Contributor
Posts: 174
Joined: Mon Apr 16, 2007 10:33 am
Location: Bloomington, IN, USA

Re: Is my grasp of CSS positioning right?

Post 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.
Post Reply