here's my question, i want to fill the content div
with white. BUT when i do it , its not filling the whole div. The child div are more bigger and they go over the parent div (content). I want that the content div cover all the child div.
Here's my code
#content { width: 100%; min-height: 400px; height: auto; max-height: 2000px; /* ONLY FOR THE MOMENT */ margin-top: -7px; background:white; } #fastMenu { float:left; width: 200px; height: 100%; margin-top: 20px; } #contenu { float:left; width: 430px; height: 100%; margin-top: 20px; background:white; }
<div id = "content"> <div id = "fastMenu"> <a href="conseil-d-administration"> <img src="<?php echo 'http://dev201.viglob.gtvr.com/client_file/themes/default/interface/FR/menuAdmin.png'; ?>" border="0" /> </a> <a href="congres-2012"> <img src="<?php echo 'http://dev201.viglob.gtvr.com/client_file/themes/default/interface/FR/menuCongres.png'; ?>" border="0" /> </a> <a href="formation"> <img src="<?php echo 'http://dev201.viglob.gtvr.com/client_file/themes/default/interface/FR/menuFormation.png'; ?>" border="0" /> </a> <a href="devenir-membre"> <img src="<?php echo 'http://dev201.viglob.gtvr.com/client_file/themes/default/interface/FR/menuMembre.png'; ?>" border="0" /> </a> </div> <div id="contenu" class="txt"></div> </div>
I want also a cross-browsing answer please (IE7, IE8, IE9, Firefox, Chrome, Opera)
A child div can also be wider than its parent by utilizing different positioning such as absolute or fixed positioning. Different results can occur depending on the specified position of the parent div but as long as the element is either absolute/fixed or contains a specified width, it will grow outside the parent.
- First set the width of the extended-content-container div to 500%. This will make the div you are trying to extend 5 time wider than the center column it lives inside. This can be adjusted up or down depending on the size of the center column you are working with.
Answer: Set the 100% height for parents too And we all know that the default value of the height property is auto , so if we also set the height of <body> and <html> elements to 100%, the resulting height of the container div becomes equal the 100% height of the browser window.
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. bordersize ).
add overflow: auto
to the css for .content
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