CODEWITHSUNDEEP
htmlcss
HelloWorldNoMore
HelloWorldNoMore

Reputation: 317

How do prevent my div from spilling outside its parent container?

Here is my code taken from the codepen: http://codepen.io/rags4developer/pen/ONoBpm

Please help me to fix these problems.

  1. How do I prevent the the main div & footer from spilling out of the container div ? overflow: hidden for container will not always work !
  2. How do I make the container div height equal to page height without setting its height to a fixed percentage ?

HTML:

<body>
 <div id="container">
   <div id="nav">nav links 1,2,3 etc</div>
   <div id="main">
     <!--no text here-->
     <div id="left">left panel</div>
     <div id="right">right panel</div>
   </div>
   <div id="footer">footer</div>
 </div> 
</body>

CSS:

* {box-sizing: border-box;}
html {height: 100%;}
body {height: 100%;}
#container {
  border: 8px solid yellow;
  height: 100%;
  width: 80%;
  margin: 0 auto;
}

#nav {
  border: 4px solid red;
  height: 15%;
}

#main {
  border: 4px solid black;
  height: 100%;
  background: gray;
}

#left {
  border-top: 4px solid green;
  border-left: 4px solid green;
  border-bottom: 4px solid green;
  float: left;
  width: 15%;
  height:100%;
  /*I will make this gradient later*/
  background: #9e9999;
}

#right {
  border: 4px solid blue;
  float: right;
  width: 85%;
  height: 100%;
  border-radius: 20px 0 0 0;
  background: white;
}

#footer {
  border: 4px solid pink;
  clear: both;
}

Upvotes: 0

Views: 5554

Answers (3)

Johannes
Johannes

Reputation: 67768

I am not completely sure if I understand you correctly, but your heights (i.e. the heights within the #container div) add up to 15% + 100% + the height of the footer = at least 115% of the #container height plus the footer height, which causes the "spilling over".

I changed the #content height to 80% and added height: 5%; to the footer in this fork of your codepen: http://codepen.io/anon/pen/EKeOdm

Now everything remains within the #container. Is this what you want?

Upvotes: 1

HelloWorldNoMore
HelloWorldNoMore

Reputation: 317

Using display table should fix this. 

#container {
    border: 8px solid yellow;
    height: 100%;
    width: 80%;
    margin: 0 auto;
    **display: table;**
}

#content {
    border: 4px solid black;
    background: gray;
    height: 100%;/*Not sure 100% of what ? Parent ???*/
    **display: table-row;**
}

Upvotes: 0

johnniebenson
johnniebenson

Reputation: 540

The clearfix solution still works well for floated elements, IMO. Try removing the height styles and add this:

#main:before,
#main:after {
  display: table;
  content: "";
}

#main:after {
  clear: both;
}

Further: http://nicolasgallagher.com/micro-clearfix-hack/

Upvotes: 0

Related Questions