I have this two column layout and they div's are on different lines, what could I do? I have tried float and it doesn't work, if you can show me how to use float correctly, then that would be very appreciated, thank's for any future help

http://www.buybuildhost.com/dev

No one has any way they can help me?

Floats will work, but working with EIGHT CSS files is going to be a pain.
I'll have to look at it later, I don't have the time this afternoon.

The reason I have that many CSS files is because I want to keep it as organized as possible. Would you give me a proof of concept? A simple html file with embedded CSS to use floating with my website?

http://www.webmaster-talk.com/css-fo...sites-2-a.html
Layouts section

#container #subcontainer #body #left
{        
    background-color: blue;
    
    height: 30px;
    max-width: 800px;
    
    margin-right: 200px;
}

#container #subcontainer #body #right
{
    background-color: red;
    
    height: 30px;
    width: 200px;
    
    float: right;
}

That is the code for the body.css file, which controls the left and right, why are they showing on two lines? It is the the right position, I just need it a line up. http://www.buybuildhost.com/dev

First of all, you don't need to do all of this just to specify something for #left:

#container #subcontainer #body #left

Just specifying #left would be sufficient.

If you're trying to apply those styles to ALL of those divs, then you're doing it incorrectly, it must use commas:

#container, #subcontainer, #body, #left

You don't need 8 CSS files, ONE would do quite well.

Proof of concept ?? How about reading...

http://css-discuss.incutio.com/?page=FloatLayouts

You also need to understand the box model.

This works :

body{
background-image: url(background.png);
overflow-y: scroll;
margin: 0;
padding: 0;
}

#container
{
background-color: #3D3D3D;
/*height: auto;*/
min-width: 580px;
max-width: 1000px;
margin: 25px auto;
/*padding: 10px;*/
}


#subcontainer
{
background-color: #FFFFFF;
/* height: auto;*/
min-width: 560px;
max-width: 1000px;
/*padding: 5px;*/
}

#header{
background: #3162AC url(header.png) no-repeat;
height: 65px;
width: 100%;
margin: 0 auto 5px auto;
}
#navigation
{

background: #3162AC url(navigation.png) repeat-x;
height: 30px;
/*width: 100%;*/
margin: 5px auto 5px auto;
}


#body
{
/*height: auto;*/
width: 100%;
margin: 5px auto 5px auto;
}


#left
{
float: left;
background-color: blue;
height: 30px;
width: 800px;
/*margin-right: 200px;*/

}

#right
{
background-color: red;
height: 30px;
width: 200px;
float: left;
}


#footer
{
background-color: #3162AC;
height: 40px;
width: 100%;
clear: both;
}

If you did not see it, I want the left side to have a min- and max-width, whenever I float it and set the max-width it doesn't go to that width, it just stays at zero unless specified by "width:". If i specify width, it is not dynamic, and it pushes the right side down below it when i make it smaller. Move the horizontal size to show it.

I got it by applying a margin: -30px; to the right div.

It is perfect in IE and FF!

http://www.buybuildhost.com/dev/

Your problem with min/max width is going to be that IE6 does NOT recognize it, your layout will break.

IE is horrible, should I just use PHP to detect the browser, then based on that, select the fluid or fixed width CSS file? Would that make "sense" as a web designer, or should I try to make it work without that.

PS: I like your signature :P

You don't need PHP for that, just use conditional comments to target IE6 and a separate CSS file that contains ONLY the rules needed to make IE behave.