help help help

**numbenator** · 06:22 AM

Hi,

I'm having a nightmare with positionin nested divs and thought best thing to do was to get some help.

I want to create a container div :

in the container (container 1) I want to put two divs side by side.

div 1 width 500
div 2 width 250

in div 1 I want to place 3 divs col1,col2,col3 of equal width side by side.

and beneath the 3 cols I then want to put a div (base) that streches all three cols the
width of div 1 ......... this is where have real difficulty

I need the Divs to enable edit of the content so if one div extends in height, it pushes the other divs down accordingliy. In the above example the key div that will drop is div base.

heres a jpeg of what actually want...

my problem is not really understanding how position and float are working and I am getting some terrible results.

hope someone can help me with this it's been a nightmare for me.
Too long using tables.

**ibbo** · 10:27 AM

Code:

<style type="text/css">

#main{
  position: absolute;
  top: 10px;
  left: 10px;
  width: 900px;
  height: 600px;
  border: 1px solid black;
}

#left{
 position: absolute;
 top: 20px;
 left: 5px;
 height: 540px;
 width:630px;
 border: 1px solid blue;
}

#leftA{
  position: absolute;
  top: 5px;
  left: 5px;
  width: 200px;
  height: 340px;
  background: yellow;
  border: 1px solid black;
}

#leftB{
  position: absolute;
  top: 5px;
  left: 215px;
  width: 200px;
  height: 340px;
  background: yellow;
  border: 1px solid black;
}

#leftC{
  position: absolute;
  top: 5px;
  left: 425px;
  width: 200px;
  height: 340px;
  background: yellow;
  border: 1px solid black;
}

#leftFill{
  position: absolute;
  top: 355px;
  left: 5px;
  width: 620px;
  height: 175px;
  background: yellow;
  border: 1px solid black;
}

#right{
 position: absloute;
 margin-left: 650px;
 height: 540px;
 width: 230px;
 background: #8e7445;
 border: 1px solid black;
}

#footer{
 width: 898px;
 left: 1px;
 margin-top: 5px;
 height: 25px;
 background: beige;
 border: 1px solid black;
}
</style>

<html>
<head></head>
<body>
<div id="main">
 Main
 <div id="left">
 <div id="leftA"> 
  left A
  <br />
   #main{
  position: absolute;
  top: 10px;
  left: 10px;
  width: 900px;
  height: 600px;
  border: 1px solid black;
}

#left{
 position: absolute;
 top: 20px;
 left: 5px;
 height: 540px;
 width:630px;
 border: 1px solid blue;
}

#leftA{
  position: absolute;
  top: 5px;
  left: 5px;
  width: 200px;
  height: 340px;
  background: yellow;
  border: 1px solid black;
}
  </div>
 <div id="leftB">
  left B
  <br />
  #main{
  position: absolute;
  top: 10px;
  left: 10px;
  width: 900px;
  height: 600px;
  border: 1px solid black;
}

#left{
 position: absolute;
 top: 20px;
 left: 5px;
 height: 540px;
 width:630px;
 border: 1px solid blue;
}

#leftA{
  position: absolute;
  top: 5px;
  left: 5px;
  width: 200px;
  height: 340px;
  background: yellow;
  border: 1px solid black;
}
  </div>
  <div id="leftC"> 
  left C
  <br />
  #main{
  position: absolute;
  top: 10px;
  left: 10px;
  width: 900px;
  height: 600px;
  border: 1px solid black;
}

#left{
 position: absolute;
 top: 20px;
 left: 5px;
 height: 540px;
 width:630px;
 border: 1px solid blue;
}

#leftA{
  position: absolute;
  top: 5px;
  left: 5px;
  width: 200px;
  height: 340px;
  background: yellow;
  border: 1px solid black;
}
  </div>
  <div id="leftFill">
  Fill
  <br />
  #main{
  position: absolute;
  top: 10px;
  left: 10px;
  width: 900px;
  height: 600px;
  border: 1px solid black;
}

#left{
 position: absolute;
 top: 20px;
 left: 5px;
 height: 540px;
 width:630px;
 border: 1px solid blue;
}

#leftA{
  position: absolute;
  top: 5px;
  left: 5px;
  width: 200px;
  height: 340px;
  background: yellow;
  border: 1px solid black;
}
  </div>
 </div>

 <div id="right">
  Right
  <br />
  #main{
  position: absolute;
  top: 10px;
  left: 10px;
  width: 900px;
  height: 600px;
  border: 1px solid black;
}

#left{
 position: absolute;
 top: 20px;
 left: 5px;
 height: 540px;
 width:630px;
 border: 1px solid blue;
}

#leftA{
  position: absolute;
  top: 5px;
  left: 5px;
  width: 200px;
  height: 340px;
  background: yellow;
  border: 1px solid black;
}
 </div>

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

</div>

The things I am prepared to do during dinner eh!

I just banged loads of css into the columns to fill it up, but It works ok.

Here it is again empty

Code:

<style type="text/css">

#main{
  position: absolute;
  top: 10px;
  left: 10px;
  width: 900px;
  height: 600px;
  border: 1px solid black;
}

#left{
 position: absolute;
 top: 20px;
 left: 5px;
 height: 540px;
 width:630px;
 border: 1px solid blue;
}

#leftA{
  position: absolute;
  top: 5px;
  left: 5px;
  width: 200px;
  height: 340px;
  background: yellow;
  border: 1px solid black;
}

#leftB{
  position: absolute;
  top: 5px;
  left: 215px;
  width: 200px;
  height: 340px;
  background: yellow;
  border: 1px solid black;
}

#leftC{
  position: absolute;
  top: 5px;
  left: 425px;
  width: 200px;
  height: 340px;
  background: yellow;
  border: 1px solid black;
}

#leftFill{
  position: absolute;
  top: 355px;
  left: 5px;
  width: 620px;
  height: 175px;
  background: yellow;
  border: 1px solid black;
}

#right{
 position: absloute;
 margin-left: 650px;
 height: 540px;
 width: 230px;
 background: #8e7445;
 border: 1px solid black;
}

#footer{
 width: 898px;
 left: 1px;
 margin-top: 5px;
 height: 25px;
 background: beige;
 border: 1px solid black;
}
</style>

<html>
<head></head>
<body>
<div id="main">
 Main
 <div id="left">
  <div id="leftA"> 
  left A
  <br />
  
  </div>
  <div id="leftB"> 
  left B
  <br />
 
  </div>
  <div id="leftC"> 
  left C
  <br />
 
  </div>
  <div id="leftFill">
  Fill
  </div>
 </div>

 <div id="right">
  right
 </div>

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

</div>

Yea no closing tags so what!

you will need to hack the widths yourself.

Ibbo

**numbenator** · 08-27-2004, 11:15 AM

thats wicked ibbo although when additional info entered in any of the div dont want div to over rite other divs. I want them to drop accordingly.

so if left a is filled with content, if the div requires to extend then Fill must drop also

**ibbo** · 08-27-2004, 11:48 AM

Yea you owe me a pint!

Your allways going to have that problem. The content in the divs should be kept within the divs otherwise as you know it can go wrong.

In IE the divs do actually drop to accomodate the text, At least they do here. In NN they tend to remain at that size. However for NN you can use the min-height option to set them as they are but this will allow them to grow.

This would be usefull for the main div so it grown when the others do.

Ibbo

**numbenator** · 08-27-2004, 02:59 PM

I owe you a pint.
cheers mate!