Parent div is smaller than child div?

Question

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)

Could you please show us the code on a test webpage or a JS fiddle? — Francisc, Jun 20 '12 at 19:15
Why are you using PHP to echo a string? Just place the string there you don't need PHP for that. — Francisc, Jun 20 '12 at 19:16
Your `#content` div *is* currently larger (or at least as large as) its contents: http://jsfiddle.net/qQZdV/ — bfavaretto, Jun 20 '12 at 19:22
@bfavaretto, that's because of the ´min-height´ properties, which presumably is a temporary hack. Remove those and the green background disappears, then add ´overflow: auto´ and it works as intended. — Supr, Jun 20 '12 at 19:31
@user1440480 I got it all wrong! I thought you were talking about the widths, not the heights. — bfavaretto, Jun 20 '12 at 19:43

score 65 · Accepted Answer · answered Jun 20 '12 at 19:16

65

add overflow: auto to the css for .content

answered Jun 20 '12 at 19:16

Rodolfo

4,155
23
38

6

it makes a scrollbar... i dont want it (the scrollbar) – user1440480 Jun 20 '12 at 19:34
5

then instead of `overflow:auto` add a `
` after you close `
`
– Rodolfo Jun 20 '12 at 19:53

score 1 · Answer 2 · answered Sep 13 '22 at 07:40

I had the same problem that wasn't solved by neither adding

<div style='clear:both'></div>

as a last element, nor by making the parent component's overflow: auto as it added a scroll bar.

I found out that the parent component was ok, but its parent (the grand parent) had this css:

{
  display:flex,
  flex-direction:column
}

making implicitly the flex-wrap value as 'wrap'

So I fixed it by making it:

{
  display:flex,
  flex-flow:column nowrap
}

I'm posting is here because it's the only question I found where my problem is described, so I thought other people in my situation will benefit my answer here rather than in another independent question

Parent div is smaller than child div?

2 Answers2