View Full Version : problem with h4

06-13-2012, 03:48 PM

header 4 " Find Christmas" - its below the Fathers Day Ad

first off I have the lettering marked as white in the css and its showing brown on the page , and I cannot get the thing closer to the red box below and for that matter the only way I got it to move down from section class leftadtop was to ad a height to that section and that does not seem right somehow.
Anyone want to play with a header ?

06-13-2012, 05:35 PM
#featured h4 {
background-color: #008000;
color: white;
font-size: 16px;
font-weight: bold;
margin-top: 2em;
padding-left: 20px;
width: 180px;

will change the colour to white. Use Firebug (http://getFirebug.com) to find these sorts of things.

That element is not moving down as you expect because the contents of section.topleftad are floated, and consequently the element has no height. Your explicitly applied height works around this somewhat, but a better solution is to clear the float at the end of section.topleftad by:

section.topleftad {
background-color: white;
/*height: 230px;*/
margin: 10px;
overflow: auto;

The height:1% will clear the float in IE7 and under - leave this out if you're not bothered about supporting these browsers.

The reason there's a gap between the h4 and section.christmas is because of the default bottom margin on h4 - again Firebug makes this simple to see. Set the margin-bottom to 0 and the gap will disappear.

06-14-2012, 04:15 PM
thanks for taking the time to reply. I know it takes time. I use the latest versions of Firefox and Chrome and IE9 -
Actually after I posted I realized what was wrong with the H4 header color

I am having a hard time understanding the idea of clearing - I have read several things on it online but I just don't get it. Overflow I get.
But I do not see the difference between your 1% and the 230 height in pixels I input on the top ad. why does the 1% work and what does it represent?

I do not like Firebug - I use Chrome's code visualization pacage that is similar to Firebug but in my opionion easier to understand.

06-14-2012, 04:36 PM
When you give an arbitrary height to the element, any subsequent elements will be positioned after that height. However the actual height (as here) may be less than your arbitrary height and so you get a gap.

Here, section.topleftad has no height because all of the elements it contains are floated. Floated elements are removed from the normal flow of the document, which is why the containing element then has no height.

Clearing the float at the end of section.topleftad forces it to extend to include the contained elements, and the element then has a height. Clearing is achieved by adding the overflow:auto (or overflow:hidden) property. Have a look at this explanation (http://www.quirksmode.org/css/clearing.html) for some more detail on clearing floats.

For IE7 and earlier, adding overflow:auto has no effect, but the float on an element can be cleared by setting the proprietary MS hasLayout (http://www.satzansatz.de/cssd/onhavinglayout.html) property - there's a number of ways to do this, but adding height:1% is one of the less obtrusive ways - and has no effect on the layout.