How can I make a div expand like adding content?

I do base a CSS layout in Dreamweaver CS4. The page is a column with the headers, footers and a large area in the Middle for the most part, any statement as div tags in a global div that contains everything.

I set the height of the div global container to 'auto '. The height of the main content div also has the value 'auto '. I thought it would make the main content area develop if necessary, when the text and images are placed in it - that would happen with a layout based on a table. Everything else was going to stay in the right relative position - the divs below the main content div would simply move down as the main content div expands.

Unfortunately, it doesn't seem to work. As the main content div moves down, it pushes everything below the road more or less randomly. The lower part of the layout break like the divs below the main content div are tossed out of position.

Is there some code, I need to keep it all together? Maybe somewhere under the #container #maincontent in the code below?

Thank you for the ideas!

< ! DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional / / IN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" > ""

" < html xmlns =" http://www.w3.org/1999/xhtml ">

< head >

< meta http-equiv = "Content-Type" content = text/html"; Charset = UTF-8 "/ >"

< title > Untitled Document < /title >

< style type = "text/css" >

<!--

{body

do-family: Arial, Helvetica, without serif.

do-size: 100%;

background-color: #333;

text-align: left;

padding-top: 10px;

padding-right: 0px;

padding-bottom: 10px;

padding-left: 0px;

margin: 0px;

}

#container {}

do-family: Arial, Helvetica, without serif.

do-size: 100%;

background-color: #000;

text-align: left;

padding: 0px;

Width: 960px;

margin-top: 0px;

margin-right: auto;

margin-bottom: 20px;

left margin: auto;

border: 4px solid #FFF;

height: auto;

}

#container #header {}

background-color: #FFF;

height: 268px.

Width: 940px;

padding-top: 2px;

padding-right: 0px;

padding-bottom: 0px;

padding-left: 20px;

}

#container #header2 {}

do-family: Arial, Helvetica, without serif.

make-weight: bold;

background-color: #CCC;

height: 50px;

Width: 920px;

border-top-width: 0px;

border-right-width: 0px;

border-bottom-width: 4px;

border-left-width: 0px;

border-top-style: none;

border-bottom-color: #FFF;

border-right-color: #FFF;

border-bottom-color: #FFF;

border-left-color: #FFF;

padding-top: 10px;

padding-right: 20px;

padding-bottom: 10px;

padding-left: 20px;

border-bottom-style: solid;

}

{#header2 #navigationbox #container

float: left;

height: 50px;

Width: 600px;

}

{#header2 #buttonbox #container

}

#container #maincontent {}

do-family: Arial, Helvetica, without serif.

color: #FFF;

background-color: #000;

text-align: left;

Width: 920px;

do-size: 16px;

make-style: normal;

line-height: normal;

make-weight: normal;

padding: 20px;

Clear: both;

height: auto;

}

#container #footer {}

do-family: Arial, Helvetica, without serif.

background-color: #CCC;

text-align: center;

padding: 10px;

border-top-width: 4px;

border-top-style: solid;

border-bottom-color: #FFF;

border-right-color: #FFF;

border-bottom-color: #FFF;

border-left-color: #FFF;

}

{#topadbox}

background-color: #CCC;

}

#container #footer2 {}

background-color: #CCC;

height: 90px;

Width: 920px;

border-top-width: 4px;

border-top-style: solid;

border-bottom-color: #FFF;

do-family: Verdana, Geneva, without serif.

do-size: 18px;

line-height: 24 PX.

make-weight: bold;

padding-top: 20px;

padding-right: 20px;

padding-bottom: 10px;

padding-left: 20px;

}

#container #header #masthead {}

background-color: #FFF;

text-align: left;

height: 260px;

Width: 550px;

padding-left: 15px;

float: left;

}

#container #header #topadbox {}

float: right;

}

#container #header #topadbox {}

background-color: #FFF;

border: 4px solid #666;

float: right;

height: 250px;

Width: 300px;

Clear: none;

}

#container #header #topadbox {}

padding: 0px;

float: right;

height: 250px;

Width: 300px;

background-color: #FFF;

border-top-width: 5px;

border-right-width: 20px;

border-bottom-width: 5px;

border-left-width: 20px;

border-top-style: solid;

border-right-style: solid;

border-bottom-style: solid;

border-left-style: solid;

border-bottom-color: #CCC;

border-right-color: #CCC;

border-bottom-color: #CCC;

border-left-color: #CCC;

margin-top: 0px;

right margin: 2px;

margin-bottom: 0px;

left margin: 0px;

}

#container #footer #bannerbox {}

margin: auto;

height: 100px;

Width: 728px;

}

{#searchbox}

height: 50px;

Width: 860px;

border-top-width: 4px;

border-top-style: solid;

border-bottom-color: #FFF;

background-color: #CCC;

padding-right: 70px;

padding-left: 30px;

padding-top: 20px;

padding-bottom: 10px;

do-family: Arial, Helvetica, without serif.

do-size: 16px;

}

{#footer2 #creditsbox #container

}

#container #footer2 {}

padding-top: 20px;

padding-right: 20px;

padding-bottom: 20px;

padding-left: 20px;

}

{#header2 #buttonbox #container

float: right;

height: 50px;

Width: 300px;

do-family: Arial, Helvetica, without serif.

do-size: 16px;

line-height: 20px;

make-weight: bold;

Color: #000;

padding: 4px;

}

{#header2 #navigationbox #container

do-family: Arial, Helvetica, without serif.

do-size: 16px;

line-height: 25px;

make-weight: bold;

Color: #000;

}

a: link {}

Color: #F00;

}

a: visited {}

color: #F0F;

}

a: active {}

color: #F90;

make-weight: bold;

make-style: italic;

do-size: 16px;

}

{#footer2 #creditsbox #container

float: left;

height: 90px;

Width: 260px;

do-family: Arial, Helvetica, without serif.

do-size: 12px;

line-height: normal;

make-weight: normal;

}

{#footer2 #creativecommonsbox #container

float: left;

height: 90px;

Width: 520px;

left margin: 20px;

do-size: 12px;

do-family: Arial, Helvetica, without serif.

line-height: 14px;

make-weight: normal;

}

{#footer2 #backtotopbox #container

float: left;

height: 90px;

Width: 100px;

left margin: 20px;

}

{#footer2 #backtotopbox #container

do-family: Arial, Helvetica, without serif.

do-size: 14px;

make-weight: bold;

}

#container #maincontent {}

height: auto;

}

< / style >

< / head >

< body >

< div id = "container" > < a name = 'Top' id = 'Top' > < / a >

< div id = "header" >

< div id = "topadbox" > < script type = "text/javascript" > <!--

google_ad_client = "pub-9536785785834220";

/ * Top of page of advertising * /.

google_ad_slot = "9886597060";

google_ad_width = 300;

google_ad_height = 250;

< /script >

< script type = "text/javascript".

src = » http://pagead2.googlesyndication.com/pagead/show_ads.js ">

< /script > < / div >

< div id = "generic" > < / div >

< / div >

< div id = "tete2" >

< div id = "navigationbox" >

< center >

" < a href =" http://www.nemesis.to "> Home < /a > | "< a href ="http://www.nemesis.to/live.htm"> Live < /a > | "< a href ="http://www.nemesis.to/records.htm"> CD/Vinyl/Downloads < /a > | "< a href ="http://www.nemesis.to/records.htm"> Photos < /a > | "< a href ="http://www.nemesis.to/int.htm"> Interviews < /a > < br / > ".

" < a href =" http://www.nemesis.to/archive.htm "> archive < /a > | .

" < a href =" http://www.nemesis.to/about.htm "> information and Contacts < /a > | "< a href ="http://www.nemesis.to/links.htm"> < /a > link .

< /Center >

< / div >

< div id = "buttonbox" > < img src = "images_graphics/linkbuttons_4piece.jpg" width = "171" height = "40" hspace = "65" hspace = "4" border = "0" align = "left" well = "#Map" / > "

< name of the map 'Map' id = 'Card' = >

" < area shape ="rect"coords ="1,2,42,41"href =" http://nemesis-to-go.livejournal.com "alt ="LiveJournal"/ > "

" < area shape ="rect"coords ="45,1,86,45"href =" https://Twitter.com/uncle_n "alt ="Twitter"/ > "

" < area shape ="rect"coords ="90,1,128,38"href =" http://www.mixcloud.com/misadventuresinmodernmusic/ " />

" < area shape ="rect"coords ="132,2,171,39"href =" https://www.Facebook.com/misadventures.in.modern.music "alt ="Facebook"/ > "

< / map >

< / div >

< div id = "maincontent" > < / div >

< div id = "footer" >

< div id = "bannerbox" >

< p >

< script type = "text/javascript" > <!--

google_ad_client = "pub-9536785785834220";

/ * Bottom of page ad * /.

google_ad_slot = "0254538778";

google_ad_width = 728;

google_ad_height = 90;

< /script >

< script type = "text/javascript".

src=" http://pagead2.googlesyndication.com/pagead/show_ads.js ">

< /script >

< /p >

< / div >

" < div id ="searchbox"> < form method ="get"action =" http://www.Google.com/search ">

< div style = "border: 0px solid black; padding: 0px; Width: auto; do-size: 16px; ">

< table border = "0" align = "center" cellpadding = "2" >

< b >

< td width = "291" align = "right" valign = "middle" > < input type = "text" name = "q" size = "35".

MaxLength = "255" value = "" / > < table > "

< td width = "102" align = "right" valign = "middle" > < input type = "submit" value = "Google search" / > < table >

< td width = "247" align = "center" valign = "middle" > < input type = "checkbox" name = "sitesearch".

value = "nemesis.to" checked / > "

< span class = "searchtext" > Nemesis to go search for </span > < table >

< /tr >

< /table >

< / div >

< / form > < / div >

< div id = "footer2" >

" < div id ="creditsbox"> Page credits: Photos and construction by < a href =" http://www.nemesis.to/about.htm "> < strong > Michael Johnson < facilities > < /a >." "Nemesis logo by < a href ="http://www. "> < strong > Antony Johnston < facilities > < /a >. «Version red N < strong > < a href = "http://www.rimmell.com" > Mark Rimmell < /a > < / strong >.» < / div >

< div id = "creativecommonsbox" > < img src = "images_graphics/creativecommonslogo.png" width = "88" height = "31" hspace = "4" hspace = "4" align = "left" "/ > words and photos in Nemesis To Go by Michael Johnson are allowed under < a href =" " http://www.creativecommons.org/licences "> < strong > CC < facilities > < /a >." «You can copy and distribute this material or derivations of it, provided that give you a credit to Michael Johnson and a link to < strong > < a href = "http://www.nemesis.to" > Nemesis To Go < /a > < / strong >.» When using materials from other sources, copyright remains with the original owners. All rights to the name "Nemesis To Go" and the "n" logo are preserved. < / div >

< div id = "backtotopbox" > < img src = "images_graphics/arrer_sml_up.gif" alt = "Back To Top" width = "40" height = "40" hspace = "4" hspace = "4" align = "left" / > < a href = "#Top" > top < /a > < / div > "

< / div >

< / body >

< / html >

Height of the DIV is determined solely by the amount of content it contains. It is best to avoid using explicit height values that this limits the amount of content can contain a div tag If necessary to reveal a background image, use height min instead of the height.

If your #container floated div inside and develops to the content, add the following property to the CSS of your #container.

#container {}

overflow: hidden; / * for floating containment * /.

}

For more information on why this works, see the link below:

http://colinaarts.com/articles/the-magic-of-overflow-hidden/

Nancy O.

Tags: Dreamweaver

How can I make a div expand like adding content?

Similar Questions

Maybe you are looking for