...

View Full Version : 2 column layout problems



dbxz
04-27-2006, 11:41 PM
I cant get a 2 column layout too look right... I want the sidebar and the content to go down the same height.

I want it to look like this:


----------------------
| | |
| | side |
| | bar |
| | |
| | |
| content | |
| | |
| | |
| | |
| | |
| | |
| | |
| | |
| | |
| | |
| | |
| | |
----------------------
|____________________|


i DONT want:


----------------------
| | |
| | side |
| | bar |
| | |
| | |
| content | |
| | |
| | |
| |------|
| |
| |
| |
| |
| |
| |
| |
|_____________|
----------------------
|____________________|


or



----------------------
| | |
| | side |
| | bar |
| | |
| | |
| content | |
| | |
| | |
|-------------| |
| |
| |
| |
| |
| |
| |
| |
| |
----------------------
|____________________|



can someone help me out? Im totally out of ideas for how to line them up...

Arbitrator
04-27-2006, 11:55 PM
You have several options that I'm aware of:

a. use a table.
b. use a script to make the heights the same. if the user has the language (like JavaScript) disabled it won't display properly though.
c. nest the div that you expect to be longer inside the one that you expect to be shorter. to simulate the effect; note it doesn't work if the heights are not as expected.
d. fake the effect by using the body or container background as the background of the navigation div

dbxz
04-28-2006, 12:39 AM
i dont have any better choices? ugh i hate tables...

_Aerospace_Eng_
04-28-2006, 12:45 AM
d. is probably your best choice
CSS currently doesn't really have equal columns natively built into it.
More info on how to do d.
http://www.alistapart.com/articles/fauxcolumns/

PremiumBlend
04-28-2006, 12:50 AM
your html will look like this:

<div id="sidebar">Sidebar content</div>
<div id="content">Main content goes here</div>

you'll need a stylesheet like this:


DIV#sidebar {
height: 100%;
width: 120px; /*whatever width you want*/
float: left;
overflow: auto;
}
DIV#content {
height: 100%;
overflow: auto;
}


the value of overflow set to 'auto' will create scrollbars if the contents extends past the edges of the 'div'.

_Aerospace_Eng_
04-28-2006, 12:56 AM
The overflow:auto; won't work in Firefox when the height is set to 100%.

PremiumBlend
04-28-2006, 01:10 AM
It works for me in firefox. without "overflow: auto;" i get content that leaves the edges of the 'div'.

Arbitrator
04-28-2006, 01:44 AM
It works for me in firefox. without "overflow: auto;" i get content that leaves the edges of the 'div'.I can't say whether Aerospace is right, but did you test this on a page with a DTD (in standards mode)? I've found that you're allowed to break the normal rules, with the height property in particular, when the browser is in quirks mode.

dbxz
04-28-2006, 02:18 AM
thanks... it works


but only when i dont include:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">


im not really sure what "doctype" is for... i have been told to just always include it... can anyone explain what its for?


ugh and without the doctype my site looks all messed in IE...



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum