Menu
I have two divs on a page. a grid-container that takes a background and an internal grid that needs to be positioned in the center of the other grid. My css:
html, body{ margin:0; padding:0; width:100%; } #grid-container{ background:#f8f8f8 url(../images/grid-container-bg.gif) repeat-x top left; width:100%; } #grid{ width:1140px; margin:0px auto; } At this point, the bg image of the #grid-container only fills the window, not the full width of the html. The symptom of this is that if you narrow the browser window so that a horizontal scrollbar is required and refresh the page, the bg image ends where the browser window ends. When I scroll to the right, the bg image is not there. Ideas?
EDIT: ok, per requests, I've edited my css/html. When I remove the width designation in the #grid-container, it shrinks to the width of the container within, which is even worse. Here's what I have now:
html, body{ margin:0; padding:0; min-width:1140px; } body{ background:url(../images/page-background.jpg) repeat-x top left !important; height:100%; } #grid-container{ background:#f8f8f8 url(../images/grid-container-bg.gif) repeat-x top left; padding-top:1px; } #grid-container2{ width:1140px; margin:0px auto; } .clearfix:after { content: "."; display: block; clear: both; visibility: hidden; line-height: 0; height: 0; } .clearfix { display: inline-block; } html[xmlns] .clearfix { display: block; } * html .clearfix { height: 1%; } and the html:
<!DOCTYPE HTML> <html> <head> --- </head> <body> ... <div id="grid-container" class="clearfix"> <div id="grid">..all kinds of things in here</div> </div> 
979
Method 2: We can make the display attribute of the child container to table-row and display attribute of parent container to table, that will take all the height available from the parent div element. To cover all the width, we can make the width of parent div to 100%.
What you could do is set your div to be position: absolute so your div is independent of the rest of the layout. Then say width: 100% to have it fill the screen width. Now just use margin-left: 30px (or whatever px you need) and you should be done.
If you want the child divs to fit the parent size, you should put a margin at least of the size of the child borders on the child divs ( child. margin >= child.
auto automatically computes the width such that the total width of the div fits the parent, but setting 100% will force the content alone to 100%, meaning the padding etc. will stick out of the div, making it larger than the parent. so setting the 'width' to 'auto' would be better? Yes, but that's the default anyway.
The problem is caused by your #grid having a width:1140px.
You need to set a min-width:1140px on the body.
This will stop the body from getting smaller than the #grid. Remove width:100% as block level elements take up the available width by default. Live example: http://jsfiddle.net/tw16/LX8R3/
html, body{ margin:0; padding:0; min-width: 1140px; /* this is the important part*/ } #grid-container{ background:#f8f8f8 url(../images/grid-container-bg.gif) repeat-x top left; } #grid{ width:1140px; margin:0px auto; } If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
