Clever Geek Handbook

Div tag height is ignored

I'm sure this is something stupid I'm doing, but it's been quite a while since I've been messing with the CSS. And for the life of me I can't figure out why the boxes don't have the correct heights (as stated in the CSS) ... and why there is a black block of space between the header headers and the columns.

Any help would be VERY appreciated! I know this is pretty bare bones, I'm just trying to clean up the main layout.

Thanks for any help !! CSS:

#container { width: 1000px; margin: 30px auto 60px;}

    h1 { text-align: center;}

    #header { height: 200 px; width: 1000 px;  background-color: #993300}
    #mcol1 { height: 600; width: 500px; float: left; background-color: #2a9c3b;}
    #mcol2 { height: 600; width: 500px; float: left; background-color: #996666;}

HTML:   

<div id="container">

<div id="header">
<h1> Name</h1>
</div>
<div id="mcol1">
<h1>Test1</h1>
</div>

<div id="mcol2">
<h1>Test2</h1>
</div>
</div>

</body>

Since I cannot directly post pictures because I am a newbie, here is a link to how it is displayed: http://imgur.com/gW0vY7a Thanks!

+3


source to share


4 answers


Not

height: 200 px; 
height: 200;


but

height: 200px;
+2


source


Add to each height value: px 

#header { height: 200px; width: 1000px;  background-color: #993300}
#mcol1 { height: 600px; width: 500px; float: left; background-color: #2a9c3b;}
#mcol2 { height: 600px; width: 500px; float: left; background-color: #996666;}


jsfiddle

+3


source


Try clearing the floats on mcol1 and mcol2 using the following:

          <!-- html -->
          <div id="container">

            <div id="header">
              <h1> Name</h1>
            </div>
            <div id="mcol1">
              <h1>Test1</h1>
            </div>

            <div id="mcol2">
              <h1>Test2</h1>
            </div>
            <div class="clear"></div>
           </div>

           <!-- css -->
           .clear{
             clear:both;
             height:0;
             line-height:1px;
           }
            #mcol1 { height: 600px; width: 500px; float: left; background-color:#2a9c3b;}
            #mcol2 { height: 600px; width: 500px; float: left; background-color: #996666;}
0


source


Also, you can add style overflow hidden to your divs, especially for small divs in Internet Explorer

style = "overflow: hidden;"

and also you can download reset.css and include it in your head

<link rel = "stylesheet" type = "text/css" href = "css/reset.css"/>
0


source






More articles:


All Articles