Divisor Posted March 25, 2014 Share Posted March 25, 2014 (edited) 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 March 25, 2014 by Divisor Link to comment Share on other sites More sharing options...
Steven Posted March 25, 2014 Share Posted March 25, 2014 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 More sharing options...
davej Posted March 25, 2014 Share Posted March 25, 2014 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 More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now