Question

I would like to know the best way to have my header float right so that it’s position right next my image.

I’ve notice that since it’s contained inside a div which stetches 100% wide that when I float the title right it goes to the furthest right point of the div rather than next to my image.

I can absolute or relative position my image, but won’t that effect the flow? For example when the screen gets to small I would want the header to float under the image.

Is this possible?

<div id="holder">
<h1 id="header">My Header goes here</h1>
<img id="feature" src="pic.jpg" alt="" /> 
</div>

*style

#header{float:right;}

Answer 1

If you need your container to be 100% width you’ll need another ‘inner’ container that is not 100% width and that contains all the things you want floated to the right:

<div id="holder">
    <div id="innerHolder">
        <h1 id="header">My Header goes here</h1>
        <img id="feature" src="pic.jpg" alt="" /> 
    </div> 
</div>

Style:

#holder{width:100%;}
#innerHolder{float:right;}