[Ytrav4]

I have tryed diffrent methods for getting the 3 column layout, my question are these all correct?

1. Make three divs set to float left.

2.Make three divs set to absolute positioning and manualy lay them out.

3.Make three divs one set to float right and another set to float left, while keeping the center adjusted in the middle.

I like absolute positioning, because I feel that I have more control, is that the correct way to do it though? Is it good practice takeing a element out of its normal flow, does it discord the markup at all?

[Ytrav4]

Originally Posted by Ytrav4

I have tryed diffrent methods for getting the 3 column layout, my question are these all correct?

1. Make three divs set to float left.

2.Make three divs set to absolute positioning and manualy lay them out.

3.Make three divs one set to float right and another set to float left, while keeping the center adjusted in the middle.

I like absolute positioning, because I feel that I have more control, is that the correct way to do it though? Is it good practice takeing a element out of its normal flow, does it discord the markup at all?

I think I may have found my own answer, after some reading, I see that it's not highly recomended to design a layout with absolute positioning, becuase of flexabilty.

[mx]

wrap them and float them all left.

[datahound]

What he means is

<div centered container>

<div col1>
</div col1>

<div col2>
</div col2>

<div col3>
</div col3>

</div centered container>

[datahound]

http://blog.html.it/layoutgala/

This may be useful also.

[mx]

Originally Posted by datahound

What he means is

<div centered container>

<div col1>
</div col1>

<div col2>
</div col2>

<div col3>
</div col3>

</div centered container>

exactly

[Ytrav4]

Thanks! Much easier than positioning. That site will keep me occupied too.

[Red Cap]

if your container has a background you may want to include a cleared element to ensure the container stretches to height of the inside floated divs.

<div centered container>

<div col1>
</div col1>

<div col2>
</div col2>

<div col3>
</div col3>

<div id="footer"></div>

</div centered container>

#footer {
clear:both;
}

[Ytrav4]

This is how I'm doing it.

div.wrapper { <-----This way I can grab the whole thing and move it.
position:absolute;
}

div.col1 {
float: left;

div.col2 {
float: left;

div.col3 {
float: left;

div.footer {
clear: both;
}

[funkyprem]

correct me if i'm wrong (i'm on some serious hardcore drugs right now), but doesn't the outer container (.wrapper) have to be position: relative to allow the internal div's to float?

[Ytrav4]

Originally Posted by funkyprem

correct me if i'm wrong (i'm on some serious hardcore drugs right now), but doesn't the outer container (.wrapper) have to be position: relative to allow the internal div's to float?

I tried it myself and re checked my code, this is what I have...the left, middle, and right are my columns.

div.wrapper {
position: absolute;
left: 38px;
top: 45px;
opacity: 0.7;
width: 631px;
height: 378px;

}

div p {
font-family: arial;
padding: 12px;
font-size: 12px;
}

div.left {
background-color: white;
float: left;
width: 206px;
height: auto;
left: 31px;
top: 54px;

}
div.middle {
background-color: white;
margin-left: 6px;
float: left;
width: 206px;
height: auto;
left: 31px;
top: 54px;

}

div.right{
background-color: white;
margin-left: 6px;
float: left;
width: 206px;
height: auto;
left: 31px;
top: 54px;

}

[funkyprem]

add border:0 to left middle and right

add margin:0 to left middle and right before your margin-left

add padding: 0 to wrapper

in wrapper, change pos:abs to relative like i said in my previous post.

[Ytrav4]

Originally Posted by funkyprem

add border:0 to left middle and right

add margin:0 to left middle and right before your margin-left

add padding: 0 to wrapper

in wrapper, change pos:abs to relative like i said in my previous post.

Is that just for IE support? Or just diffrent defults for diffrent browsers.

[Ytrav4]

I think absolute positioning will only cancell the effects of floating if it's applyed to the same element that is floated.

[mx]

Originally Posted by funkyprem

correct me if i'm wrong (i'm on some serious hardcore drugs right now), but doesn't the outer container (.wrapper) have to be position: relative to allow the internal div's to float?

no. you dont need to float or define the wrapper position.