Two colums.
Moderator: General Moderators
Two colums.
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?
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?
- superdezign
- DevNet Master
- Posts: 4135
- Joined: Sat Jan 20, 2007 11:06 pm
Code: Select all
<div id="right">
<div id="left"></div>
</div>Code: Select all
#right {
padding-left: 300px;
}
#left {
float: left;
width: 300px;
}Probably not.
This is better:
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.
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;
}
[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.
- superdezign
- DevNet Master
- Posts: 4135
- Joined: Sat Jan 20, 2007 11:06 pm
Yes, you are absolutely correct.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.
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;
}- superdezign
- DevNet Master
- Posts: 4135
- Joined: Sat Jan 20, 2007 11:06 pm
Yeah, if it's possible for the absolutely positioned column to be longer than the other, then you'll have to use floating:
And you deal with the double-margin (if it occurs.. always check IE) with this:
It's still a block element even though you tell it inline. It just fixes the IE glitch.
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;
}Code: Select all
#right {
display: inline;
margin-left: 300px;
}