Div space adjusting with contained content

shifty · #1 (**permalink**) Oct 12th, 2006, 16:27

Okay, this one is kinda hard to explain, and I have no example as the site is in working.

How do I set-up a Div so that i automatically increases/decreases in vertical size , depending on what content is containe within the Div.

I am currently using a #Container(Div), with a #Content(Div) inside which houses the actual content. The problem is, however much text I put in the #Content(Div), the background (white) of either Div does not stretch with content, so I end up with lots of text which is overlaying the body.

I know thisis slighty ambigous, but your help would be appreciated.

moojoo · #2 (**permalink**) Oct 12th, 2006, 16:34

Divs with no height properties should stretch with the content automatically. Unless you are floating something which takes that div out of the normal flow in which case you will need a clearing div.

shifty · #3 (**permalink**) Oct 12th, 2006, 16:41

Quote:

Originally Posted by moojoo

Divs with no height properties should stretch with the content automatically. Unless you are floating something which takes that div out of the normal flow in which case you will need a clearing div.

Yes I'm floating a #rightcolumn(Div) within the #Container(Div) too.

So, should the #Container be set to clear 'Both'? I have just tried this but doesn't solve the problem....

escaflowne11 · #4 (**permalink**) Oct 12th, 2006, 16:44

You most likely have something restricting the outer div. Can you post the code? I had this similar problem a while back, and resolved it, so I know what you mean.

shifty · #5 (**permalink**) Oct 12th, 2006, 16:49

Yeah, I'll post it now

shifty · #6 (**permalink**) Oct 12th, 2006, 16:50

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "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=iso-8859-1" />
<title>Untitled Document</title>
<link href="../css/mcr_main.css" rel="stylesheet" type="text/css" />
<script src="../css/tabmenu.js" type="text/javascript" language="javascript1.2" charset="utf-8"></script>
<link href="../css/tabmenu.css" rel="stylesheet" type="text/css" />
</head>

<body>
<div id="header"></div>

<div id="container">

<div id="mainMenu">
<a class="inactiveMenuItem" style="left: 15px;" id="mainMenuItem1" href="index.html">Home</a>
<a class="inactiveMenuItem" style="left: 110px;" id="mainMenuItem2" href="../programs/programs.html">Option</a>
<a class="inactiveMenuItem" style="left: 195px;" id="mainMenuItem3" href="../shipping/shipping.html">Option</a>
<a class="inactiveMenuItem" style="left: 280px;" id="mainMenuItem4" href="../supplies/supplies.html">Option</a>
<a class="inactiveMenuItem" style="left: 365px;" id="mainMenuItem5" href="../volunteer/volunteer.html"/>Option</a>
<a class="activeMenuItem" style="left: 450px;" id="mainMenuItem6" href="../resources/resources.html">Option</a>
<a class="inactiveMenuItem" style="left: 535px;" id="mainMenuItem7" href="../about/about.html">Option</a></div>
<div id="submenu">
<div style="padding-left: 15px; position: static; display: none;" id="submenu_1"></div>
<div style="padding-left: 15px; position: static; display: none;" id="submenu_2">
<a href="../programs/schools.html">Option</a> |
<a href="../programs/vocational.html">Option</a> |
<a href="../programs/training.html">Option</a> |
<a href="../programs/medical.html">Option</a></div>
<div style="padding-left: 15px; position: static; display: none;" id="submenu_3">
<a href="../shipping/howto.html">Option</a> |
<a href="../shipping/shipform.html">Option</a> </div>
<div style="padding-left: 15px; position: static; display: none;" id="submenu_4">
<a href="../supplies/kits.html">Option</a> |
<a href="../supplies/needs.html">SOption</a> |
<a href="../supplies/altgifts.html">Option</a> </div>
<div style="padding-left: 15px; position: static; display: none;" id="submenu_5">
<a href="../volunteer/workteams.html">Option</a> |
<a href="../volunteer/indy.html">Option</a> |
<a href="../supplies/domestic.html">GOption</a> </div>
<div style="padding-left: 15px; position: static; display: none;" id="submenu_6">
<a href="../resources/blackboard.html">Option</a> |
<a href="../resources/speakers.html/">Option</a> |
<a href="../resources/studies.html/">Option</a> |
<a href="../resources/consult.html/">COption</a> |
<a href="../resources/books.html/">Option</a> |
<a href="../resources/ocgear.html/">Option</a> |
<a href="../resources/prayer.html/">Option</a> |
<a href="../resources/links.html/">WOption</a></div>
<div style="padding-left: 15px; position: static; display: none;" id="submenu_7">
<a href="../about/contactus.html/">Contact Us</a> |
<a href="../about/history.html/">History</a></div>
</div>

<div id="rightcolumn">

<div id="quickLinks">
<script language="JavaScript" type="text/javascript">
function gotoLink() {
if (document.quickLinksForm.quickLinksList.options[document.quickLinksForm.quickLinksList.selectedInd ex].value != "") {
location = document.quickLinksForm.quickLinksList.options[document.quickLinksForm.quickLinksList.selectedInd ex].value
}
}
</script>
<form name="quickLinksForm">
<h6> Quick Links:</h6>
<select name="quickLinksList" onChange="gotoLink()">
<option value="">Option
<option value="#">Option 3
<option value="#">Option 2
<option value="#">Search
<option value="#"> pption 2
<option value="#"> pption 2
</select>
</form></div>

<h1>Right Column</h1></div>

<div id="pathway"><a href="#">Home</a> ></div>
<div id="content">

<div id="content_header"><img src="../images/resturants/pink_garlic_sml.jpg" class="img_top" /><img src="../images/resturants/shaandaar_sml.jpg" width="150" height="112" class="img_floatclear_right" /><img src="../images/resturants/shahenshah_sml.jpg" width="150" height="112" class="img_floatclear_right" />
<h1>Hello</h1>

<p>Velit esse cillum dolore consectetur adipisicing elit, ut enim ad minim veniam. Sunt in culpa eu fugiat nulla pariatur. Quis nostrud exercitation ut labore et dolore magna aliqua. Cupidatat non proident, excepteur sint occaecat mollit anim id est laborum.</p>
<p>Ullamco laboris nisi duis aute irure dolor lorem ipsum dolor sit amet. Cupidatat non proident, sunt in culpa quis nostrud exercitation. Eu fugiat nulla pariatur.</p>
<p>Ut labore et dolore magna aliqua. Ut aliquip ex ea commodo consequat. Ut enim ad minim veniam, velit esse cillum dolore qui officia deserunt. Ullamco laboris nisi mollit anim id est laborum. Ut labore et dolore magna aliqua.</p>
<p>Sed do eiusmod tempor incididunt sunt in culpa eu fugiat nulla pariatur. In reprehenderit in voluptate duis aute irure dolor cupidatat non proident. Velit esse cillum dolore ut aliquip ex ea commodo consequat.</p>
<p>Consectetur adipisicing elit. Quis nostrud exercitation consectetur adipisicing elit, ut enim ad minim veniam. Sunt in culpa duis aute irure dolor ut aliquip ex ea commodo consequat. Mollit anim id est laborum.</p>
<p>Qui officia deserunt excepteur sint occaecat eu fugiat nulla pariatur. Velit esse cillum dolore sed do eiusmod tempor incididunt duis aute irure dolor. Ut enim ad minim veniam, qui officia deserunt ut labore et dolore magna aliqua. Ut aliquip ex ea commodo consequat.</p>
<p>Ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, cupidatat non proident, excepteur sint occaecat. Sed do eiusmod tempor incididunt sunt in culpa velit esse cillum dolore.</p>
<p>Lorem ipsum dolor sit amet, cupidatat non proident, ut enim ad minim veniam. In reprehenderit in voluptate sunt in culpa excepteur sint occaecat. Ut labore et dolore magna aliqua. Duis aute irure dolor mollit anim id est laborum. Lorem ipsum dolor sit amet.</p>
<p>Velit esse cillum dolore sed do eiusmod tempor incididunt quis nostrud exercitation. Excepteur sint occaecat eu fugiat nulla pariatur. Duis aute irure dolor consectetur adipisicing elit, qui officia deserunt.</p>
<p>Ut labore et dolore magna aliqua. Quis nostrud exercitation eu fugiat nulla pariatur. Velit esse cillum dolore ullamco laboris nisi in reprehenderit in voluptate. Lorem ipsum dolor sit amet, qui officia deserunt consectetur adipisicing elit. Sed do eiusmod tempor incididunt ut aliquip ex ea commodo consequat.</p>
</div>

</div>

</div>
<div id="footer"></div>
</body>
</html>

shifty · #7 (**permalink**) Oct 12th, 2006, 16:50

body {
background-color: #FFFFCC;
}
#header {
background-image: url(../images/elements/header.jpg);
height: 155px;
width: 760px;
margin-top: 0;
margin-right: auto;
margin-bottom: 0;
margin-left: auto;
text-align: left;
}
#pathway {
font-family: Geneva, Arial, Helvetica, sans-serif;
font-size: 10px;
color: #990000;
}
#pathway a:link {
font-size: 10px;
color: #CC0000;
text-decoration: none;

}
#pathway a:visited {
font-size: 10px;
color: #CC0000;
text-decoration: none;
}
#pathway a:active {
font-family: Geneva, Arial, Helvetica, sans-serif;
font-size: 10px;
color: #CC0000;
text-decoration: none;
}

#pathway a:hover {
color: #CC0033;
text-decoration: underline;
}

#container {
width: 756px;
background-color: #FFFFFF;
border-top-width: 2px;
border-right-width: 2px;
border-bottom-width: 2px;
border-left-width: 2px;
border-right-style: solid;
border-left-style: solid;
border-top-color: #FFCC67;
border-right-color: #FFCC67;
border-bottom-color: #FFCC67;
border-left-color: #FFCC67;
margin-top: 0;
margin-right: auto;
margin-bottom: 0;
margin-left: auto;
clear: both;
float: none;

}

#content {
margin-right: 175px;
background-color: #FFFFFF;
}
#content_header {
background-image: url(../images/elements/body_header.jpg);
height: 45px;
width: 540px;
background-repeat: no-repeat;
}
#content_header p {
font-family: Geneva, Arial, Helvetica, sans-serif;
font-size: 11px;
color: #000000;
margin-left: 10px;
}
#content_header h1 {
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
font-weight: bold;
margin-left: 15px;
padding-top: 20px;
}
.img_floatclear_right {
clear: right;
float: right;
height: 112px;
width: 150px;
margin-right: 5px;
margin-left: 5px;
margin-top: 5px;
}
.img_top{
float: right;
margin-right: 5px;
margin-left: 5px;
margin-top: 60px;
}

#quickLinks select {
color: #000000;
font-family: Geneva, Arial, Helvetica, sans-serif;
font-size: 11px;
}
#quickLinks {
}
#quicklinks h2 {
color: #00CCFF;
font-size: 10px;
}
h6 {
font-family: Geneva, Arial, Helvetica, sans-serif;
font-size: 12px;
font-weight: bold;
}

#rightcolumn {
padding: 1px;
float: right;
width: 150px;
margin-top: 20px;
border-left-width: 1px;
border-left-style: dotted;
border-left-color: #CCCCCC;
}
#rightcolumn h1 {
font-family: Geneva, Arial, Helvetica, sans-serif;
font-size: 16px;
font-weight: bold;
color: #000000;
}

#rightcolumn p {
font-family: Geneva, Arial, Helvetica, sans-serif;
font-size: 11px;
font-weight: bold;
color: #FF9900;
}

#footer {
background-image: url(../images/elements/footer.jpg);
height: 150px;
width: 760px;
clear: both;
margin-top: 0;
margin-right: auto;
margin-bottom: 0;
margin-left: auto;
}

Ryan Fait · #8 (**permalink**) Oct 14th, 2006, 20:06

Provided that you're not floating content inside the div or using positioning, there should be no problem. Shrink down the code to what's applicable and post it back here in the CODE tags.

shifty · #9 (**permalink**) Oct 15th, 2006, 10:49

Quote:

Originally Posted by ryanfait

Provided that you're not floating content inside the div or using positioning, there should be no problem. Shrink down the code to what's applicable and post it back here in the CODE tags.

Here is the stripped down appropriate code:

HTML

Code: Select all

<body>

<div id="container">

<div id="rightcolumn"></div>

<div id="content"></div>

</div>

CSS

Code: Select all

}


#container {
    width: 756px;
    background-color: #FFFFFF;
    border-top-width: 2px;
    border-right-width: 2px;
    border-bottom-width: 2px;
    border-left-width: 2px;
    border-right-style: solid;
    border-left-style: solid;
    border-top-color: #FFCC67;
    border-right-color: #FFCC67;
    border-bottom-color: #FFCC67;
    border-left-color: #FFCC67;
    margin-top: 0;
    margin-right: auto;
    margin-bottom: 0;
    margin-left: auto;
    clear: both;
    float: none;

}

#content {
    margin-right: 175px;
    background-color: #FFFFFF;

}
.img_floatclear_right {
    clear: right;
    float: right;
    height: 112px;
    width: 150px;
    margin-right: 5px;
    margin-left: 5px;
    margin-top: 5px;
    border: 2px solid #FFCC67;
}


#rightcolumn {
    padding: 1px;
    float: right;
    width: 150px;
    margin-top: 20px;
    border-left-width: 1px;
    border-left-style: dotted;
    border-left-color: #CCCCCC;
}

shifty · #10 (**permalink**) Oct 15th, 2006, 11:40

Quote:

Originally Posted by ryanfait

Provided that you're not floating content inside the div or using positioning,

** This is now fixed thanks ** Postioning was being used on a DIV within. When I removed this, the problem was gone - thanks!

Ryan Fait · #11 (**permalink**) Oct 15th, 2006, 22:44

Great!

Similar Threads
Thread	Thread Starter	Forum	Replies	Last Post
Expandable Content Script (Swtich Content)	Matc	JavaScript Forum	0	Apr 8th, 2008 10:53
Adjusting for Screen Resolution	griffonwing	Flash & Multimedia Forum	3	Jun 19th, 2007 07:01
adjusting flash movie size	laxmi	Flash & Multimedia Forum	2	Apr 23rd, 2007 14:13
Adjusting dimensions of box..	rooraaahcrumbs	Web Page Design	3	Apr 30th, 2006 17:44
adjusting photo colours	ivyholly	Graphics and 3D	3	Dec 29th, 2005 04:29

		Webforumz.com > Main Forums > Design Your Website > Web Page Design
Div space adjusting with contained content