PDA

View Full Version : Nested div not filling up the containing div



cairo140
Jan 19th, 2009, 05:14 AM
I'm working on a site that can temporarily be found here (http://www.torizonlogistics.com/test/system/applications/view/homepage/display.php). Relevant style sheets are http://torizonlogistics.com/test/css/default.css, http://torizonlogistics.com/test/css/screen.css, and http://torizonlogistics.com/test/css/reset.css (I'm using the blueprint CSS framework).

I have an unruly segment of code contained with in a div id="main_body":


<div id="conversations" class="main_content">
<div class="header_bar"><span class="header_title">Hottest Conversations - Real Time</span> <span class="header_links"><a href="">Top Contributors</a></span></div>
<div id="conversation_listings">Listing</div>
<div id="email">
<div id="bubble_top" style="padding-bottom: 49px; margin-bottom: -49px;">&nbsp;</div>
<div id="bubble_area">The Maple Leafs have set the bar so low that you can't even limbo under it.</div>
<div id="bubble_bottom">&nbsp;</div>
</div>
</div>
<div id="insider_blogs" class="main_content">
<div class="header_bar"><span class="header_title">Insider Blogs</span> <span class="header_links"><a href="">Most Recent</a> | <a href="">Highest Rated</a> | <a href="">Most Commented</a> | <a href="">Most Viewed</a> | <a href="">All</a></span></div>
</div>

Relevant CSS follows:


.main_content .header_bar{
height: 25px;
background-image:url(../assets/images/header_bar.png);
background-repeat:repeat-x;
line-height: 25px;
padding-left: 10px;
padding-right: 10px;
color: white;
text-transform: uppercase;
}
.main_content .header_bar .header_title{
float: left;
font-family:Georgia,Utopia,Palatino,'Palatino Linotype',serif;
font-size: 16px;
}
.main_content .header_bar .header_links{
float: right;
font-size: 12px;
text-transform: none;
color: #AAAAAA;
}
.main_content .header_bar .header_links a{
color: #AAAAAA;
text-decoration: none;
}
.main_content .header_bar .header_links a:hover{
color: white;
text-decoration: none;
}
#conversations #conversation_listings {
width: 150px;
float: left;
}
#conversations #email {
width: 440px;
float: right;
}
#bubble_top {
height: 10px;
background-image:url(../assets/images/speech_bubble_top.png);
}
#bubble_area {
position: relative;
width: 408px;
background-image:url(../assets/images/speech_bubble_span.png);
background-repeat:repeat-y;
background-position:right;
left: 32px;
min-height: 65px;
}
#bubble_bottom {
background-image: url(../assets/images/speech_bubble_bottom.png);
position: relative;
left: 32px;
width: 408px;
height: 12px;
}

The div id="conversations" holds div id="conversation_listings" and div id="email". However, the two nested divs are not extending the container div. As a result, when I close the div id="conversations" and write another div, it doesn't sit underneath the two nested divs but rather finds its way into the middle (or in the case of IE, under div id="email").

I'm thinking this may have something to do with the fact that I'm running a float system.

A temporary solution could be to have the next div have style="clear: right", placing it under div id="conversation_listings", but I want to figure out why div id="conversations" is not extending.

Any help would be appreciated!

abduraooft
Jan 19th, 2009, 08:11 AM
You need to clear your floats (http://www.positioniseverything.net/easyclearing.html), like

<div id="conversations" class="main_content">
<div class="header_bar"><span class="header_title">Hottest Conversations - Real Time</span> <span class="header_links"><a href="">Top Contributors</a></span></div>
<div id="conversation_listings">Listing</div>
<div id="email">
<div id="bubble_top" style="padding-bottom: 49px; margin-bottom: -49px;"> </div>
<div id="bubble_area">The Maple Leafs have set the bar so low that you can't even limbo under it.</div>
<div id="bubble_bottom"> </div>
</div>
<div style="clear: both;"></div>
</div>

Jbert
Jan 27th, 2009, 02:24 AM
Cairo, can you help me. New to the Blueprint system. I have a column defined by ( span-8 first last ). under this I want to have 5 nested or new DIV.s whose total span is less than the span-8. I put in 2 divs but they load vertically like there is not enough room and that is not the case.


<div class="span-3 first ">
<h6>Box 1</h6>
<p>Some Text</p>
</div>

<div class="span-3 prepend-1 last">
<h6>Box 2</h6>
<p>Some Text</p>
</div>


Thanks

Jim

Excavator
Jan 27th, 2009, 03:02 AM
Hello cairo140,
Just for the fun of it, put a bg color on .main_content and you'll see that one of the divs does not get the color you'd expect.
Like this:

.main_content {
clear: both;
background: #f00;
}

Then add overflow: hidden; to that and see what it does.
Normally I used overflow:auto; but there is something else going on there and that adds a scrollbar. :hidden; seems to work fine though.

Read about clearing floats like that here - http://www.quirksmode.org/css/clearing.html