CSS Container Div Not Getting Height

* { padding: 0; margin: 0; }html, body, #fullheight {    min-height: 100% !important;    height: 100%;}#fullheight {    width: 250px;    background: blue;}

<div id=fullheight>  Lorem Ipsum        </div>

Divs not showing specified height or width

First, yes there's a typo, but that's not gonna solve the whole issue for you (although you haven't asked about the rest yet so this might just be unnecessary and if so, feel free to ignore).

HTML needs to be changed if you want to use inline-block for the .feature blocks. See why this is a problem here. If you're ok with using float:left; for them all instead then you don't have to do this.

Depending on whether you choose to use box-sizing for all the elements you have (like with a Normalize.css solution or just doing what I do in my fiddle), you'll need to possibly change the width and height to account for the border only on the container. See how, why and pros/cons here on box-sizing: border-box;.

Your CSS isn't terrible so the changes I made were mainly aesthetic but the main thing you gotta decide is display: inline-block; or float: left; inside of .feature { }.

FYI - using float: left; implies display: block;, not to mention <div> using it by default.

Using display: inline-block;

New HTML:

<div class="container"><div class="feature a">
     </div><div class="feature b">
     </div><div class="feature c">
     </div><div class="feature d">
     </div>
</div>

New CSS

*, *:before, *:after {
    box-sizing: border-box;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
}
.container {
    width: 710px;
    height: 710px;
    border: 5px solid black;
    margin: 0px;
    padding: 0px;
}
.feature {
    width: 350px;
    height: 350px;
    padding: 0;
    margin: 0;
    display: inline-block;
    text-align: center;
}
.a {
    background-color: yellow;
    border-bottom: 2px solid steelblue;
    border-right: 2px solid steelblue;
}
.b {
    background-color: red;
    border-bottom: 2px solid steelblue;
    border-left: 2px solid steelblue;
}
.c {
    background-color: blue;
    border-top: 2px solid steelblue;
    border-right: 2px solid steelblue;
}
.d {
    background-color: purple;
    border-top: 2px solid steelblue;
    border-left: 2px solid steelblue;
}

Live Demo

Using float: left;

New HTML:

<div class="container">
    <div class="feature a"></div>
    <div class="feature b"></div>
    <div class="feature c"></div>
    <div class="feature d"></div>
</div>

New CSS:

*, *:before, *:after {
    box-sizing: border-box;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
}
.container {
    width: 710px;
    height: 710px;
    border: 5px solid black;
    margin: 0px;
    padding: 0px;
}
.feature {
    width: 350px;
    height: 350px;
    padding: 0;
    margin: 0;
    float: left;
    text-align: center;
}
.a {
    background-color: yellow;
    border-bottom: 2px solid steelblue;
    border-right: 2px solid steelblue;
}
.b {
    background-color: red;
    border-bottom: 2px solid steelblue;
    border-left: 2px solid steelblue;
}
.c {
    background-color: blue;
    border-top: 2px solid steelblue;
    border-right: 2px solid steelblue;
}
.d {
    background-color: purple;
    border-top: 2px solid steelblue;
    border-left: 2px solid steelblue;
}

Live Demo

PS - your widths and heights are changed here for continuity but you can use whatever sizes you want that fit.

Div not getting correct height with img content

It's because of the parent's line-height. Either set the line-height (or font-size) of the parent to zero, or set the image to display: block.

Inner Div not getting parent div height

The divs won't naturally occupy the full vertical space available to them. See this jsfiddle for an example. The outer div is given an explicit height of 100 pixels, and the inner div has no height specified at all. The inner div thus only take up the space needed to display its contents.

HTML:

<div class="outer">
   <div class="inner">
       <p>Content here!</p>       
   </div>
</div>​

CSS:

.outer {
    background: red;
    height: 100px;
}
.inner {
    background: green;
}

​
If you want the inner div to take up all the vertical space available, set height:100% in the CSS. See this jsfiddle for an example.

New CSS:

.outer {
    background: red;
    height: 100px;
}
.inner {
    background: green;
    height: 100%; /* new line */
}

I'm not sure if there are any more specifics to your problem as you are using a clearfix CSS class that isn't shown in your example. Please let me know if there's something else missing for you to solve your problem.

Related Topics