Jump to content

auto sizeing div box


Recommended Posts

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 by berteldk
Link to post
Share on other sites

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;}

Link to post
Share on other sites

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 by thescientist
Link to post
Share on other sites
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.
Link to post
Share on other sites
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.
Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
×
×
  • Create New...