Page 1 of 1
Two colums.
Posted: Fri Jun 22, 2007 10:10 pm
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?
Posted: Fri Jun 22, 2007 10:40 pm
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.
Posted: Sat Jun 23, 2007 1:51 am
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.
Posted: Sat Jun 23, 2007 2:11 am
by Benjamin
Might want to say why it's better.
Posted: Sat Jun 23, 2007 6:37 am
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.
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;
}
Posted: Sat Jun 23, 2007 9:08 am
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).
Posted: Sat Jun 23, 2007 10:22 am
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.