CODEWITHSUNDEEP
htmlcss
TheBlackBenzKid
TheBlackBenzKid

Reputation: 27087

How to use 100% DIV height with HTML5?

I have tried following many articles and used many links in SO but I cannot fix my CSS of my page. The page can be seen here: http://tinyurl.com/d3ru8tf

Screenshot:

enter image description here

My CSS

html, body {
   height:100%
}

body{
   line-height:1;
   color:#454545;
   background:url(/assets/imgs/bg.png);
   font:11px Tahoma,Arial,sans-serif
}

#soul{
   display:block;
   margin:0 auto;
   width:920px;
   background:url(/assets/imgs/back.png) repeat-y right #fff;
   padding:0;
   position:relative;
   height:100%
}

My HMTL5

<!DOCTYPE html>
<html>
   <head>
       <meta charset="UTF-8">
       <title></title>
   </head>
   <body>
       <div id="soul">

          This is my content which does not sit fluid.

       </div>
   </body>
</html>

Upvotes: 0

Views: 4031

Answers (1)

Dejan Marjanović
Dejan Marjanović

Reputation: 19380

Add <hr style="clear:both;" /> right before closing </div> of #soul and remove height:100% from #soul CSS.

enter image description here

Also, use min-height:100%, or better, yet, don't use that attribute at all in this case.

Edit

Read more about floating divs: http://css-tricks.com/all-about-floats/

Also, you seem to want them to be equal in height.

enter image description here

Take a look at this: http://matthewjamestaylor.com/blog/equal-height-columns-cross-browser-css-no-hacks

Upvotes: 3

Related Questions