webuu Posted September 9, 2012 Share Posted September 9, 2012 I have the following webpage I am working on. If you set the image width to be larger than the box the image is in, it overlaps it. I would like the box to stay centered and to resize to the width of the image. The second problem is, that the "Profile" box above it, does not resize with it automatically. How can I fix those 2 problems? Here is the code <?xml version="1.0" encoding="UTF-8"?><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head> <title></title> <style type="text/css"> body { margin: 0; padding: 0; font-family: Verdana, sans-serif; font-size: 8pt; line-height: 2em; } #container { margin: 1em auto; width: 80em; } #profile, #pictures { border: 1px solid black; padding: 1em; } #pictures img { display: block; margin: 0 auto; } </style> </head> <body> <div id="container"> <b>Profile</b> <div id="profile"> </div> <b>Pictures</b> <div id="pictures"> <img src="" alt="Test" width="400" height="200" /> </div> </div> </body></html> Link to comment Share on other sites More sharing options...
niche Posted September 9, 2012 Share Posted September 9, 2012 (edited) Looks like you should use overflow:hidden; That should keep your image in your div. What do you mean by "resize automatically"? Edited September 9, 2012 by niche Link to comment Share on other sites More sharing options...
webuu Posted September 9, 2012 Author Share Posted September 9, 2012 That hides the resized image, I want the box to size around it. Link to comment Share on other sites More sharing options...
niche Posted September 9, 2012 Share Posted September 9, 2012 (edited) Then you have images that are different sizes that you want to pt a border around. Correct? Edited September 9, 2012 by niche Link to comment Share on other sites More sharing options...
webuu Posted September 9, 2012 Author Share Posted September 9, 2012 (edited) Oh, sorry, let me be more specific. You see the image that is in the code above? I would repeat the img tag maybe a dozen times so say there are 12 images 1 after another inside that box. The images - yes, can be different sizes, so the box should always size to fit the largest image. Also the profile box above the picture box has to resize automatically also. I can't figure out how to do this, even with the container. Edited September 9, 2012 by webuu Link to comment Share on other sites More sharing options...
niche Posted September 9, 2012 Share Posted September 9, 2012 This should help: http://stackoverflow.com/questions/5485341/css-div-width-depending-on-image-size-above Link to comment Share on other sites More sharing options...
dsonesuk Posted September 9, 2012 Share Posted September 9, 2012 IF you don't mind IE7 playing ball, us disply: inline-block; and min-width: ; #container { min-width:80em; display:inline-block; } Then create a outer container and use text-align: center; which causes #container to act as text and center itself, be fluid and expand and shrink with image until it reaches min-width of 80em. 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