Hi I am new to this type of stuff, and I would really appreciate some help with my divisions, I have 5 in total 2 for the top one is just the main pic and the other is for the nav, the problem I am having is the 3 I am using as columns, I need to add content to the middle column ie: pics and stuff so I have it set to auto, as do I have the left and right div, but this leaves me with a very un-balanced site.

 

My question is: How do I make my left and right div adjust automatically to my middle div?

 

Thanks.

You say you want the side divs to adjust automatically for the middle div if that expands/contracts to suit its content; do any of your divs have a fixed width? Is the page fixed width in total?

 

This CSS

#middle { width: auto; background: skyblue; }
#left { float: left; background: pink; }
#right { float: right; background: lime; }

 

with this markup:-

<div id="left"><p>Left div; left div</p></div>
<div id="right"><p>Right div...........right div</p></div>
<div id="middle"><p>Middle div</p></div>

 

produces side divs which have no width so they are just as wide as they need to be, while the middle div fills the remainder of the middle space, however much that is. None have a fixed width.

 

Normally people want the side divs fixed width and a flexible width middle column, but if you want fixed width middle div and flexible side divs, see

http://www.wickham43.net/threecolumnsfixedmiddle7.html

Yea sorry I am having problems with the length. because as I add content to my middle div it increases in length, but my side divs are either as long as I set them or if set to auto only as long as the content on them, I need it to be level at the bottom and automatically adjust to the middle one.

 

I really appreciate the help, its for my first project at uni.

 

and I do have set width for my page but not length, that is set to auto.

here is my style sheet:

 

body{

font-family:verdana;

font-size:13px;

text-align: center;

background:black;

}

 

 

#wrapper{

text-align:left;

width:760px;

margin-left:auto;

margin-right:auto;

height:auto;

}

 

 

#header {

width:760px;

height:120px;

background-color:white;

img src = "bugz.jpg";

}

 

 

#nav{

width:760px;

background-color:yellow;

height:20px;

text-align:center;

}

 

 

#left {

width:130px;

background-color:white;

height: auto;

float:left;

padding:10px;

font-size:14px;

color: black;

}

 

#middle {

width:430px;

background:white ;

height: auto;

padding:10px;

float:left;

border-left: 1px gray solid;

border-right:1px gray solid;

color: black;

 

}

 

#right {

width:138px;

height:auto;

float:left;

padding:10px;

background-color:white;

}

This link was posted only two days ago:-

http://manisheriar.com/blog/faux-columns-next-generation

which makes the column backgrounds as long as the one that has the most content. It uses two full width wrapper divs, one with a background-image positioned top left with a width the same as the left div and one positioned top right with a width the same as the right div, both having repeat-y to repeat vertically, so that the left and right divs have them as backgrounds which are pulled down by whichever div has the most content.

 

There are other ways, as described in items 16 to 19 here:-

http://www.wickham43.net/firefoxbackground.php