Question

I styled an image with float:left, and predictably, the text of the header after it appears to the right of the image (if it helps, the context for this situation is a logo and title next to each other in the header of a website).

When I look at the header element (h1), it takes up space behind the image (overlapping). The text is still next to the image, but the background of the h1 element overlaps with the image.

<div id="header">
  <a href="index.html"><img src="logo2.png" /></a>
  <h1>AlanHoRizon</h1>
  <p>
...
#header img {
    float: left;
}

Is this how floating is supposed to work? Is background synonymous to the padding in the css box model? What if I wanted the header element to begin completely after the image, including the background (which is what I expected float to do actually).

Doesn’t actually affect the appearance of the header, as everything appears as it should, but I’m curious, as it would add to my understanding of html and css web design.

thanks.

Answer 1

HTML:

<div id="header">
    <a href=""><img id="logo" src="http://lorempixum.com/100/100/abstract" alt="" /></a>
    <div>
        <h1>AlanHoRizon</h1>
        <h3>Site description</h3>
    </div>
</div>
<div id="content">
    <p>Lorem ipsum dolor ...</p>
</div>

CSS:

#header:after {
    display: block;
    clear: both;
    content: ".";
    visibility: hidden;
    height: 0; 
    line-height: 0;
}
#logo {
    float: left;
}
#header div {
    float: left;
    padding: .25em;
}

And here’s the complete jsfiddle example