Get Even More Visitors To Your Blog, Upgrade To A Business Listing >>

why wont my containers extend to encompass my content?

why wont my containers extend to encompass my content?

Problem

I'm having issues getting my content box to extend to encompass everything within it. shouldnt max-height:100% do this?

http://codepen.io/anon/pen/xujAC

There's the codepen of my code. The red and blue background are for visual reference only. Shouldnt the blue background (.container) only extend 20px below the blocks?

Pretty new at this and learning as I go. I'm probably missing something easy.

Thanks a lot.

Problem courtesy of: madboymatt

Solution

You have the height of your .container set to 100%. In this sample, it will be as tall as its containing element. Because its top is set to 80px and its height is that of its parent, it will extend below the bottom by ~ 80px.

Other things that throw this off are:

  • floated elements are outside the regular flow which means the containing element can't calculate the height of its children. In this case, I think the simplest fix would be to use position: inline-block; for the children.
  • The child elements banner and container are absolutely positioned. This also take them outside the flow of the document. In this example, I believe you can get the results you are looking for using relative positioning.
  • Margins are also throwing off the layout. Here you can using padding in #content to achieve better results.

Demo fiddle

Updated CSS:

* {
  margin: 0;
  padding: 0;
  border: 0;
  box-sizing: border-box;
}

header {
  width: 100%;
  height: 60px;
  background-color: #dcdcdc;
  position: relative;
}

#content {
  position:relative;
  margin: 0 auto;
  width: 960px;
  min-height: 500px;
  max-height: 100%;
  border-left: 1px solid #ccc;
  border-right: 1px solid #ccc;
  box-shadow: 0px 2px 2px #111;
  background-color: red;
  padding: 20px;
  padding-top: 0;
}
#banner {
  width: 900px;
  position: relative;
  margin: 0 auto;
  padding: 0;
  text-align: center;
  border-top: 1px solid #888;
  border-bottom: 1px solid #888;
  top: 15px;
  left: 30px;
  height: 100px;
  box-shadow: 0 2px 0 #ddd;
}

#banner h2 {
  color: #555;
  text-shadow: 0 -1px 0 #000;
}

.container {
  margin: 0 auto;
  padding: 0;
  position: relative;
  background-color: blue;
}
.blocks {
  display: inline-block;
  width: 250px;
  height: 150px;
  background-color: #666;
  margin: 25px;
  margin-top: 30px;
}
Solution courtesy of: dc5

Discussion

View additional discussion.



This post first appeared on CSS3 Recipes - The Solution To All Your Style Problems, please read the originial post: here

Share the post

why wont my containers extend to encompass my content?

×

Subscribe to Css3 Recipes - The Solution To All Your Style Problems

Get updates delivered right to your inbox!

Thank you for your subscription

×