auto sizeing div box

[berteldk 0]

Hey AGAIN.So my problem this: when i make a center div and put inside 2 other div, 1 for text and 1 for pictures the center div "colapses" down to like 20 pixels or so even thouhg i got the height set to auto, so it should box arround the 2 divs inside it shouldnt it? im confused... SOS

<div class="trans" id="center"><div class="trans" id="textbox"><h2>text</h2><br /><p>1. text, text, text, text, text, text, text, text, text, text, </p><br /><p>2.text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, </p><br /><p>3. 2.text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text,</p><br /><p>4. 2.text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text,</p><br /><p>5. 2.text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text,</p></div><div class="trans" id="picturebox"></div></div>

CSS - all the DIV are inside the Center div

#center{	height:auto;	width:740px;	background-color:#000;	margin:auto;	margin-top:50px;	margin-bottom:50px;	padding:30px;}#textbox{	width:400px;	height:auto;	background-color:#000;		float:left;}#picturebox{	width:400px;	height:auto;	background-color:#000;		float:left;}#bottom{	height:200px;	width:800px;	margin:auto;	background-color:#000;	clear:both;}

Edited July 30, 2010 by berteldk

[migroo 2]

Its because you are floating your textbox and picturebox.Try something like this:

#center{	height:auto;	width:740px;	background-color:#000;	margin:auto;	margin-top:50px;	margin-bottom:50px;	padding:30px;}#textbox{	width:400px;	height:auto;	background-color:#000;	margin-left: 0px;}#picturebox{	width:400px;	height:auto;	background-color:#000;	margin-left: 0 px;}#bottom{	height:200px;	width:800px;	margin:auto;	background-color:#000;	clear:both;}

[thescientist 231]

instead of creating extra HTML/CSS markup, you could just add overflow: auto to the container div. (although migroo was correct that its because you are floating the inner div's).

Edited July 30, 2010 by thescientist

[berteldk 0]

Its because you are floating your textbox and picturebox.Try something like this:

#center{	height:auto;	width:740px;	background-color:#000;	margin:auto;	margin-top:50px;	margin-bottom:50px;	padding:30px;}#textbox{	width:400px;	height:auto;	background-color:#000;	margin-left: 0px;}#picturebox{	width:400px;	height:auto;	background-color:#000;	margin-left: 0 px;}#bottom{	height:200px;	width:800px;	margin:auto;	background-color:#000;	clear:both;}

with these settings it just adds text below the div i currently had with text, thats also why i would float. maybe i didnt explain it clear, i want the divs to be next to eachother with equally space inside the center div. - ex. the center div is 800 width, so i want the 2 divs inside it to be 400 each in width.

[berteldk 0]

Its because you are floating your textbox and picturebox.Try something like this:

#center{	height:auto;	width:740px;	background-color:#000;	margin:auto;	margin-top:50px;	margin-bottom:50px;	padding:30px;}#textbox{	width:400px;	height:auto;	background-color:#000;	margin-left: 0px;}#picturebox{	width:400px;	height:auto;	background-color:#000;	margin-left: 0 px;}#bottom{	height:200px;	width:800px;	margin:auto;	background-color:#000;	clear:both;}

with these settings it just adds text below the div i currently had with text, thats also why i would float. maybe i didnt explain it clear, i want the divs to be next to eachother with equally space inside the center div. - ex. the center div is 800 width, so i want the 2 divs inside it to be 400 each in width.