CODEWITHSUNDEEP
htmlcsscss-float
Andrew Walker
Andrew Walker

Reputation: 3

CSS Floats Right

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;}

Upvotes: 0

Views: 313

Answers (3)

gwood
gwood

Reputation: 176

Another way to do this is this:

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

and

#feature {float: left; width:100}
#header { margin: 0px 0px 0px 110px;}

This will float the image, and use the margin of the div to align it to the right of the image. I just made up values for the width and the margin, but you should get the idea. If you use float: right, your div will end up on the right side of the browser window, whereas this will let you place the div "to the right" of your image.

Upvotes: 0

eksith
eksith

Reputation: 156

You'll need to float both the image and the header if you want them next to each other inside the holder div.

Upvotes: 1

Gyan
Gyan

Reputation: 12410

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;}

Upvotes: 0

Related Questions