securobo2 Posted September 23, 2010 Share Posted September 23, 2010 I have a page with a content div that is inside a container div. When maximizing the browser, the content div spans across the entire page. This is what I want. However, when I add an image to the content div, that is larger than the screen size, I have to use the horizontal scrollbar to look at it. That's ok also. The problem is, that when scrolling off screen to see the rest of the image, the container including the content is not as large as the image. In other words, the image does not match the size of the backdrop. Can someone help me with an example solution.The only thing I ask, is that you have a container div and a content div inside the container div. How can I setup my css for this to work, when I scroll to the right to look at the rest of the image. <div id="container"> <div id="content"> <img src="" alt="" width="3000" height="2000" /> </div></div> Link to comment Share on other sites More sharing options...
aspnetguy Posted September 23, 2010 Share Posted September 23, 2010 You need to give the container div a display:table-cell. table cells will stretch with the content, divs will only stretch to the width of their container (the window).This solution won't work in IE6 or IE7. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html><head> <title>Div span</title> <style type="text/css"> body { margin: 0; } #container { background: red; padding: 10px; display: table-cell; } #content { background: green; } #content img { width: 1500px; margin: 10px; } </style></head><body> <div id="container"> <div id="content"> <img src="http://www.google.com/intl/en_ALL/images/srpr/logo1w.png" alt="" /> </div> </div></body></html> For maximum compatibility you can wrap your container div in a table cell. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html><head> <title>Div span</title> <style type="text/css"> body { margin: 0; } #container { background: red; padding: 10px; } #content { background: green; } #content img { width: 1500px; margin: 10px; } </style></head><body> <table> <tr> <td> <div id="container"> <div id="content"> <img src="http://www.google.com/intl/en_ALL/images/srpr/logo1w.png" alt="" /> </div> </div> </td> </tr> </table></body></html> Link to comment Share on other sites More sharing options...
securobo2 Posted September 24, 2010 Author Share Posted September 24, 2010 Thank you, excellent. Link to comment Share on other sites More sharing options...
securobo2 Posted September 24, 2010 Author Share Posted September 24, 2010 I came up with some complications. If anyone can help, please do.1. If I set the container to display: table-cell;, it left-justifies it. I am trying to center it in the browser window. I'm working on figuring this out.2. This is more difficult. If I set my content which is a div in the container to display: table-cell;, than the background is white. I am trying to make it a particular color. I know how to use css to setup different properties of a table, but how do you set up the properties of a table used in a style setting? Is there an efficient way to do this? Do I set the property as a child member of the div? such as css file -> #content table{ background: somecolor;} Is this the right way? or is there a better way to do this? Link to comment Share on other sites More sharing options...
aspnetguy Posted September 24, 2010 Share Posted September 24, 2010 1. I thought the content stretched beyond the width of the window? You could still center the content div inside the container.2. Why are you setting the background of a table inside your content div?Look at the samples I posted. The container and content divs both have different background colors and it works fine. #container { background: red; padding: 10px; display: table-cell; } Link to comment Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.