I have a div which I use for the body of my page which constrains the content width to 550px, which is great for legibility, but not great when I have images that are more than 550px. I either need to know how to keep the large image centered and have it move outside the left and right margins equally or else how to temporarily ignore the div tag for single elements. Currently the large image keeps its left margin (lined up with the text) and then all of the overflow is on the right margin (so the image doesn't stay centered). My applicable CSS is as follows: #MainContent { width: 750px; margin: 0 0 0 0; padding: 12px 25px 10px 25px; line-height: 1.3em; background-color: #FFFFF3; border-top: solid 1px #a9a9a9; } #OneColumn { width:550px; margin: 0 auto; overflow:visible; } .centered { margin: inherit auto; text-align:center; } And the body of the page in question: <body> <div id="MainContent"> <div id="OneColumn"> <p>This is supposed to be contrained within the 550px margins.</p> <img src="images/test.gif" width="645" height="435" alt="This should not be constrained by the 550px margins." class="centered" /> <p>And then much more paragraphs and images will follow...if I solve this.</p> </div> </div> </body>
How about a strategy like this? <!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"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>Untitled</title> <style type="text/css"> #MainContent { width: 750px; margin: 0 0 0 0; padding: 12px 25px 10px 25px; line-height: 1.3em; background-color: #FFFFF3; border-top: solid 1px #a9a9a9; } #OneColumn p { width:550px; margin: 0 auto; } #OneColumn p.image { width:100%; text-align:center } #OneColumn img { border:1px solid #F00; } .centered { margin: inherit auto; text-align:center; } </style> </head> <body> <div id="MainContent"> <div id="OneColumn"> <p>This is supposed to be contrained within the 550px margins.</p> <p class="image"><img src="images/test.gif" width="645" height="435" alt="This should not be constrained by the 550px margins." class="centered" /></p> <p>And then much more paragraphs and images will follow...if I solve this.</p> </div> </div> </body> </html> Code (markup): I added the red border to the image to make it more apparent when viewing the results. Just remove that style when you're done with it