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
Sindarin
Forum Regular
Posts: 521 Joined: Tue Sep 25, 2007 8:36 am
Location: Greece
Post
by Sindarin » Tue Sep 02, 2008 6:19 am
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?
jayshields
DevNet Resident
Posts: 1912 Joined: Mon Aug 22, 2005 12:11 pm
Location: Leeds/Manchester, England
Post
by jayshields » Tue Sep 02, 2008 9:24 am
You'd be better off providing us with source and/or a live example.
andyhoneycutt
Forum Contributor
Posts: 468 Joined: Wed Aug 27, 2008 10:02 am
Location: Idaho Falls
Post
by andyhoneycutt » Tue Sep 02, 2008 12:30 pm
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
Sindarin
Forum Regular
Posts: 521 Joined: Tue Sep 25, 2007 8:36 am
Location: Greece
Post
by Sindarin » Wed Sep 03, 2008 4:06 am
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
Post
by matthijs » Wed Sep 03, 2008 7:35 am
The layout you have shown is pretty basic and can be accomplished with CSS perfectly. Whether it is 2 columns, or 3 or more.
Sindarin
Forum Regular
Posts: 521 Joined: Tue Sep 25, 2007 8:36 am
Location: Greece
Post
by Sindarin » Wed Sep 03, 2008 8:05 am
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
Post
by matthijs » Wed Sep 03, 2008 8:19 am
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.
andyhoneycutt
Forum Contributor
Posts: 468 Joined: Wed Aug 27, 2008 10:02 am
Location: Idaho Falls
Post
by andyhoneycutt » Wed Sep 03, 2008 9:21 am
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.
inghamn
Forum Contributor
Posts: 174 Joined: Mon Apr 16, 2007 10:33 am
Location: Bloomington, IN, USA
Post
by inghamn » Wed Sep 03, 2008 3:24 pm
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.
Sindarin
Forum Regular
Posts: 521 Joined: Tue Sep 25, 2007 8:36 am
Location: Greece
Post
by Sindarin » Thu Sep 04, 2008 3:37 am
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
Post
by matthijs » Thu Sep 04, 2008 4:55 am
Do the two boxes need the same height and have a flexible height?
Sindarin
Forum Regular
Posts: 521 Joined: Tue Sep 25, 2007 8:36 am
Location: Greece
Post
by Sindarin » Thu Sep 04, 2008 5:41 am
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
Post
by matthijs » Thu Sep 04, 2008 6:08 am
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>
inghamn
Forum Contributor
Posts: 174 Joined: Mon Apr 16, 2007 10:33 am
Location: Bloomington, IN, USA
Post
by inghamn » Thu Sep 04, 2008 7:27 am
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.