CSS Forum

**Skeddles** · 07-31-2007, 10:54 PM

It produces the right things, but they are one on top of each other. I want div.top all the across the top, div.left to stay on the left, div.right to stay on the right, and div.middle to stay in the middle(and be as big as it can without changing the content of the left or right. Bottom same as top.

Heres the CSS

Code:

div.top
{
background-color:gray;
width:100%;
margin:0px;
}

div.left
{
width:160px;
background-color:#ff0000;
}

div.middle
{
background-color:#00ff00;
}

div.right
{
width:160px;
background-color:#0000ff;
}

div.bottom
{
width:100%;
background-color:gray;
}

HTML:

Code:

<html>
<head>
    <title>Pixel Geeks</title>
    <link rel="stylesheet" type="text/css" href="mystyle.css" />
</head>
<body>

<div class="top">Top</div>
<div class="left">left<br/>left<br/>left<br/></div>
<div class="middle">Middle</div>
<div class="right">right<br/>right<br/>right<br/></div>
<div class="bottom">Bottom</div>

</body>
</html>

**Angelosanto** · 08-01-2007, 09:38 AM

You need to make use of the float property

I think if you float the left and middle divs to the left, and your right div to the right, it should display how you want it

**Skeddles** · 11:50 AM

Quote:

Originally Posted by Angelosanto

You need to make use of the float property

I think if you float the left and middle divs to the left, and your right div to the right, it should display how you want it

thank you, that worked.

Now it looks almost perfect, but how can I make the sections stretch (such as make the middle strech all the way to the right untill it hits the right div?

CSS:

Code:

#content a:link, #content a:visited
{
color:#bbdaa9;
font-weight:normal;
text-decoration:none;
}

#content a:hover, #content a:active
{
color:#cc8a52
font-weight:normal;
text-decoration:line-through;
}

/* tables */

div.container
{
width:100%;
margin:0px;
border:1px solid gray;
min-height:500;
}

div.top
{
clear:left;
background-color:gray;
width:100%;
}

div.left
{
float:left;
width:160px;
background-color:#ff0000;
}

div.middle
{
float:left;
min-height:500;
background-color:#00ff00;
}

div.right
{
float:right;
width:160px;
background-color:#0000ff;
}

div.bottom
{
clear:left;
float:none;
width:100%;
background-color:gray;
}

HTML:

Code:

<html>
<head>
    <title>Pixel Geeks</title>
    <link rel="stylesheet" type="text/css" href="mystyle.css" />
</head>
<body>


<div class="top">Top</div>

<div class="left">
<center>
Link<br/>
Link<br/>
Link<br/>
</center>
</div>

<div class="middle">Middle</div>

<div class="right">
<center>
Link<br/>
Link<br/>
Link<br/>
</center>
</div>

<div class="bottom">Bottom</div>

</body>
</html>

**Angelosanto** · 08-01-2007, 06:21 PM

I could probably tell you that if you link me to the page

**Skeddles** · 08-01-2007, 07:47 PM

Quote:

Originally Posted by Angelosanto

I could probably tell you that if you link me to the page

http://www.freewebs.com/skeddles/blank.htm
http://www.freewebs.com/skeddles/mystyle.css

I want the red blue and green to fill up that space.

**Angelosanto** · 08-01-2007, 08:23 PM

I'd like to reccomend to you a bit of a change in the way you have approached it (not that your way was bad

)

Firstly, use a wrapper div to go around the entire thing, all the other divs can be put into that.

Set the wrapper divs width to 100%

Then set all other divs widths to percentage values, e.g. left 10%, right 10% and middle 80%.

This way, your sit will always fill the screen and your middle div will touch both its surrounding divs

I'll also point out that the 'min-height' property doesn't work in IE6, so you might want to reconsider that

**Skeddles** · 08-01-2007, 08:35 PM

Quote:

Originally Posted by Angelosanto

I'd like to reccomend to you a bit of a change in the way you have approached it (not that your way was bad

)

Firstly, use a wrapper div to go around the entire thing, all the other divs can be put into that.

Set the wrapper divs width to 100%

Then set all other divs widths to percentage values, e.g. left 10%, right 10% and middle 80%.

This way, your sit will always fill the screen and your middle div will touch both its surrounding divs

I'll also point out that the 'min-height' property doesn't work in IE6, so you might want to reconsider that

Ok. I had that at one point, but got rid of for some reason. And ya I noticed the height thing. Thank you for all your help.