simple div problems

**Skeddles** · 07-31-2007, 09: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, 08: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** · 10: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, 05:21 PM

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

**Skeddles** · 08-01-2007, 06: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, 07: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, 07: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.

**Angelosanto** · 08-01-2007, 07:36 PM

Don't mention it

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

Quote:

Originally Posted by Angelosanto

Don't mention it

WAIT!! But what about the height? Is there a way to keep them all the same if one section needs more room?

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

Not sure what you mean by that?

**LadynRed** · 08-01-2007, 08:37 PM

Yes.. but the easiest way to FAKE the look of equal-length columns is the faux columns method.

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

Quote:

Originally Posted by LadynRed

Yes.. but the easiest way to FAKE the look of equal-length columns is the faux columns method.

What's that?

**LadynRed** · 08-01-2007, 09:14 PM

Google is your friend

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

**Angelosanto** · 08-01-2007, 09:25 PM

Thats a pretty good link - does that explain what you need Skeddles?

**Skeddles** · 08-01-2007, 11:25 PM

Quote:

Originally Posted by Angelosanto

Thats a pretty good link - does that explain what you need Skeddles?

Not really, I just decided to go with a fixed height. But now it only works in fire fox, not IE! Whats up with that?