Jump to content

Div positioning


Divisor
 Share

Recommended Posts

Hi guys......I'm just recently starting to learn HTML and CSS and it's going great but I can't figure something out......I have a div like so.....<div Id="banner"><img src="my picture" width="970" height="160" alt="banner" /></div>my desire is to have the banner centre'd on page which I did accomplish but when I resize the browser window to a width smaller than that of the width specified in the CSS file for the div, everything appears to "hug" the right side of the screen ignoring the right margin.....I was looking for a way to have everything fixed so browser window resizing has no effect on the contents of the div whatever it might be......

Edited by Divisor
Link to comment
Share on other sites

The image you are trying to put in the banner div, would it work to use it as a background image?

 

So, instead of using <img src="my-picture.jpg"> you would have:

#banner { background: url(my-picture.jpg) center; }
Link to comment
Share on other sites

Maybe I'm not understanding what you are looking for but for a fixed-width page layout the normal approach is to use a wrapper div. If the browser window is narrower than the banner then yes the right-side will be cut off.

<!DOCTYPE html><html lang="en"><head><meta charset="utf-8"><title>tab</title><style>#wrap{width:970px;margin:0 auto;}#banner{width:970px;}</style></head><body><div id="wrap"><div id="banner"><img src="my picture" width="970" height="160" alt="banner" /></div></div></body></html>

You can also auto-size the banner...

<!DOCTYPE html><html lang="en"><head><meta charset="utf-8"><title>tab</title><style>#wrap{max-width:970px;margin:0 auto;}img{width:100%;height:auto;}</style></head><body><div id="wrap"><div id="banner"><img src="p970x160.png" alt="banner" /></div></div></body></html>
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...