Two colums.

JavaScript and client side scripting.

Moderator: General Moderators

Post Reply
User avatar
JellyFish
DevNet Resident
Posts: 1361
Joined: Tue Feb 14, 2006 7:18 pm
Location: San Diego, CA

Two colums.

Post by JellyFish »

I've search for a two column layout and found many good examples. But I'm not really trying to get a two column "layout", instead just two div columns.

How can I get one div with a fixed width to float to the left and at the same time have a div, who's width is filling in the right, on the right?
User avatar
superdezign
DevNet Master
Posts: 4135
Joined: Sat Jan 20, 2007 11:06 pm

Post by superdezign »

Code: Select all

<div id="right">
    <div id="left"></div>
</div>

Code: Select all

#right {
padding-left: 300px;
}

#left {
float: left;
width: 300px;
}
That should work.
matthijs
DevNet Master
Posts: 3360
Joined: Thu Oct 06, 2005 3:57 pm

Post by matthijs »

Probably not.

This is better:

Code: Select all

<div id="left">left div Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nullam sit amet dolor. Duis eleifend. Donec egestas, augue ac sagittis dictum, magna tellus sodales orci, et commodo pede arcu ut risus. Morbi ac leo. In pede nunc, vestibulum sed, faucibus id, tincidunt sed, nibh. Etiam accumsan sodales lacus
</div>
<div id="right">right div Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nullam sit amet dolor. Duis eleifend. Donec egestas, augue ac sagittis dictum, magna tellus sodales orci, et commodo pede arcu ut risus. Morbi ac leo. In pede nunc, vestibulum sed, faucibus id, tincidunt sed, nibh. Etiam accumsan sodales lacus
</div>

Code: Select all

		#right {
		margin-left: 300px;background:green;
		}

		#left {
		float: left;
		width: 300px;background:#eee;
		}
But I would set the margin a bit higher to have a bit of, uuh, margin

[edit:]
why the first method doesn't work: the padding-left will push the second col away. So you won't end up with two columns next to eachother. Hope that's clear.
Last edited by matthijs on Sat Jun 23, 2007 5:23 am, edited 1 time in total.
User avatar
Benjamin
Site Administrator
Posts: 6935
Joined: Sun May 19, 2002 10:24 pm

Post by Benjamin »

Might want to say why it's better.
User avatar
superdezign
DevNet Master
Posts: 4135
Joined: Sat Jan 20, 2007 11:06 pm

Post by superdezign »

matthijs wrote:[edit:]
why the first method doesn't work: the padding-left will push the second col away. So you won't end up with two columns next to eachother. Hope that's clear.
Yes, you are absolutely correct.
I was thinking absolute positioning rather than floating.


... I was tired. :P


But absolute positioning is a good way to avoid the famous "double-margin" glitch of Internet Explorer, and avoid having to use an extra container for the two columns. Also, having the columns embedded into each other like this allows you to easily make a colored column. For example:

Code: Select all

<div id="right">
    <div id="left"></div>
</div>

Code: Select all

#right {
position: relative;
border-left: 300px solid #DDD;
}

#left {
position: absolute;
width: 300px;
left: 0;
background-color: #DDD;
}
matthijs
DevNet Master
Posts: 3360
Joined: Thu Oct 06, 2005 3:57 pm

Post by matthijs »

Indeed. Superdezigns solution is also a good one. It works great for when you don't have to worry about the absolute positioned column overlapping other stuff below (a footer for example).
User avatar
superdezign
DevNet Master
Posts: 4135
Joined: Sat Jan 20, 2007 11:06 pm

Post by superdezign »

Yeah, if it's possible for the absolutely positioned column to be longer than the other, then you'll have to use floating:

Code: Select all

<div id="container">
    <div id="left"></div>
    <div id="right"></div>
</div>
<div id="footer"></div>

Code: Select all

#left {
float: left;
width: 300px;
}

#right {
margin-left: 300px;
}

#footer {
clear: left;
}
And you deal with the double-margin (if it occurs.. always check IE) with this:

Code: Select all

#right {
display: inline;
margin-left: 300px;
}
It's still a block element even though you tell it inline. It just fixes the IE glitch.
Post Reply