Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Parent div is smaller than child div?

Tags:

html

css

wrapper

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)

like image 301
user1440480 Avatar asked Jun 20 '12 19:06

user1440480


People also ask

Why is child div larger than parent div?

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.

How do you make a div bigger than a 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.

How do I make my div take 100% height of parent div?

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.

How can a child div fit parent div?

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 ).


1 Answers

add overflow: auto to the css for .content

like image 84
Rodolfo Avatar answered Oct 08 '22 05:10

Rodolfo