...

View Full Version : Heading container not sticking to top of its container



capoeirista
09-24-2007, 09:29 PM
Hi There -

Have a simple container div containing two other divs, top and content.

My problem is that I can't get the colorboxtop to stick to the top of its container. There's a wayward space. Can't find any stray margins or padding hanging around. Perhaps fresh eyes can see what I cannot. Please let me know.

Any help you can give me would be greatly appreciated. Thanks!



<body>

<div class="colorbox">

<div class="colorboxtop">
<h2>title goes here</h2>
</div><!-- /colorboxtop -->

<div class="boxcontent">
<p>You should read this and <a href="#">Click Here</a>.</p>
<a title="Go Here!" href="#">[button]</a>
</div><!-- /boxcontent -->

</div><!-- /colorbox -->

</body>


No great complexity there...here's the CSS:



body {
color:#666666;
font-family:Lucida Grande,Verdana,sans;
font-size:10px;
font-size-adjust:none;
font-style:normal;
font-variant:normal;
font-weight:normal;
line-height:13px;
}

.colorbox {
margin-bottom:9px;
padding-bottom:15px;
width:300px;
border:thin solid #CCCCCC;
}

.colorbox h2 {
color:#FFCC33;
}

.colorbox {
color:#CC6633;
padding:0px 20px 15px;
margin-top:0;
margin-bottom:10px;
}

.colorboxtop {
background-color: #dddddd;
height:50px;
color:#666666;
background-image: url(images/bg_Tiles/stripe-dk-blue-green.png);
padding:auto 20px;
}

.colorbox a {
color:#C5DBE9;
font-weight:bold;
text-decoration:none;
}

ScottInTexas
09-24-2007, 11:42 PM
First I see two different styles for colorbox. Your colorboxtop has no positioning. You're leaving it to the browser and you've included padding auto and 20px. Remove that and tryp absolute positioining.



colorboxtop{
position:absolute;
top:0;
left:0;
background-color: #dddddd;
height:50px;
color:#666666;
background-image: url(images/bg_Tiles/stripe-dk-blue-green.png);
}


See if that helps.

VIPStephan
09-24-2007, 11:51 PM
No, please no absolute positioning. Most likely itís the collapsing margins (http://complexspiral.com/publications/uncollapsing-margins/) of the headline that is causing the gap.

ScottInTexas
09-25-2007, 02:47 AM
What's wrong with absolute positioning? I have tried everything else and that is the only way I can get things to line up properly. I know fixed positioning is a problem and I can't get px or em to do the job. If there is something I should know about absolute then I am all ears (or eyes in this case).

vtjustinb
09-25-2007, 11:13 PM
I agree with VIPStephan, that gap is more than likely the top margin of .colorbox collapsing into the top margin of the h2. If you set the top-margin of the H2 to 0 you'd likely lose the gap.

I think the big problems with absolute positioning are they take the content out of normal flow, which can make flexible designs problematic, and also the fact that making absolutely positioned elements behave in the context of most layouts requires relatively-positioned parents which can incur some hard-to-track bugs in IE6.

garydarling
09-26-2007, 06:31 AM
Are you having the problem in IE by chance? If so, try removing the whitespace between the two divs and see if that cures it. Be sure to refresh the page or dump your cache.

Actually, this may only work if you have an image in the div.


<div class="colorbox">
Get rid of this space
<div class="colorboxtop">

Gary



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum