c2tarun
Reputation: 795
height 100% not working in CSS
I am learning CSS and while practicing I was trying to copy this page.
Here is my screenshot. I want the left column (the one with white background and blue border-bottom) to fill up 100% in height. The whole middle portion is divided into three boxes(div). First there is a "columns" div which contain two divs "left_column" and "right_column". The border of "columns" div can be seen in yellow color. I tried setting "height:100%" for "left_column" but its not working. Can anyone please suggest me what I am doing wrong?
Here is my css file:
#left_column {
width: 65%;
height: 100%;
float: left;
font-size: 80%;
color: #414342;
background-color: white;
border-bottom: 1px solid blue;
text-align: justify;
overflow: hidden;
}
#left_column h2 {
color: #3399FF;
padding: 0 15px;
}
#left_column p {
padding: 0 15px;
}
#right_column {
width: 35%;
float: right;
font-size: 80%;
background-color: #424D47;
color: #8BC7D3;
}
#right_column h2,h3,h4 {
color: #3399FF;
padding: 0 15px;
}
#right_column p {
padding: 0 15px;
}
#columns {
border: 1px solid yellow;
overflow: hidden;
margin: 0;
}
#columns p {
font-family: "sans serif";
line-height: 1.5em;
}
Here is my HTML file:
<!DOCTYPE html>
<html>
<head>
<title>Cloudy Water Sports</title>
<link rel="stylesheet" href="main.css" />
</head>
<body>
<div id="outer_frame">
<div id="header">
<img src="images/header.jpg" alt="Cloudy Water"/>
<h1>CLOUDY WATER SPORTS</h1>
</div>
<div id="nav">
<ul>
<li><a href="#">HOME</a></li>
<li><a href="#">NEWS</a></li>
<li><a href="#">BLOG</a></li>
<li><a href="#">GALLERY</a></li>
<li><a href="#">ABOUT CWS</a></li>
<li><a href="#">CONTACT</a></li>
</ul>
</div>
<div id="columns">
<div id="left_column">
<h2>Hello!</h2>
<p>
Free Cloudy Water Sports template is yours to use.
</p>
<p>
Ulysses, Ulysses - Soaring through all the galaxies. In search of Earth, flying in to the night. Ulysses, Ulysses - Fighting evil and tyranny, with all his power, and with all of his might. Ulysses - no-one else can do the things you do. Ulysses - like a bolt of thunder from the blue. Ulysses - always fighting all the evil forces bringing peace and justice to all.
</p>
<ul>
<li><a href="#">One for all and all for one.</a></li>
<li><a href="#">I never spend much time in School.</a></li>
<li><a href="#">Soaring through all the galaxies.</a></li>
</ul>
<p>
One for all and all for one, Muskehounds are always ready. One for all and all for one, helping everybody. One for all and all for one, it's a pretty story. Sharing everything with fun, that's the way to be. One for all and all for one, Muskehounds are always ready. One for all and all for one, helping everybody. One for all and all for one, can sound pretty corny. If you've got a problem chum, think how it could be.
</p>
</div>
<div id="right_column">
<h2>What's New?</h2>
<h4>There's a voice</h4>
<p>There's a voice that keeps on calling me. Down the road, that's where I'll always be. More…</p>
<h4>Every stop I make</h4>
<p>Every stop I make, I make a new friend. Can't stay for long, just turn around and I'm gone again. Maybe tomorrow, I'll want to settle down, Until tomorrow, I'll just keep moving on. More...</p>
<h4>Hong Kong Phooey</h4>
<p>Hong Kong Phooey, number one super guy. Hong Kong Phooey, quicker than the human eye. He's got style, a groovy style, and a car that just won't stop. More…</p>
<h3>Archive</h3>
<ul>
<li><a href="#">One for all</a></li>
<li><a href="#">Can't stay for long</a></li>
<li><a href="#">Muskehounds</a></li>
<li><a href="#">Hong Kong Phooey</a></li>
</ul>
</div>
</div>
<div id="footer">
<p>Copyright © 2006 YOUR SITE NAME.</p>
<p>Design by <a href="http://360guide.info">360guide.info</a></p>
</div>
</div>
</body>
</html>
Upvotes: 1
Views: 470
Answers (4)
user3818576
Reputation: 3391
try this code:
#columns{
position:relative;
background-color:#fff;
}
#left_column{
width: 65%;
float: left;
font-size: 80%;
color: #414342;
text-align: justify;
position:relative;
z-index:1;
}
#right_column {
width: 35%;
float: right;
font-size: 80%;
background-color: #424D47;
color: #8BC7D3;
position:relative;
z-index:1;
}
.right_dummy{
position:absolute;
width: 35%;
height:100%;
background-color: #424D47;
z-index:0'
right:0;
top:0;
}
.clearB{
clear:both;
}
html:
<div id="columns">
<div id="left_columns">TEXT HERE.....</div>
<div id="right_columns">TEXT HERE.....</div>
<div class="right_dummy"></div>
<div class="clearB"></div>
</div>
Upvotes: 1
Ruddy
Reputation: 9923
Right.
The way this is working is, you have a parent element with no height. So any child that goes in the parent cannot have a percentage height because:
20% of nothing = nothing
100% of nothing = nothing
If the child has content it will default to the size that the content is.
If you have the parent a height in px:
20% of 100px = 20px
100% of 100px = 100px
So thats how that works.
Solution to your code, as its the right column that is bigger we could use display: table; this will allow us to get the cells to be equal height (whatever the bigger height is).
Change CSS:
#columns {
display: table;
border: 1px solid yellow;
overflow: hidden;
margin: 0;
height: 800px;
}
#left_column {
width: 65%;
height: 100%;
display: table-cell;
font-size: 80%;
color: #414342;
background-color: white;
border-bottom: 1px solid red;
text-align: justify;
overflow: hidden;
}
#right_column {
display: table-cell;
width: 35%;
font-size: 80%;
background-color: #424D47;
color: #8BC7D3;
}
Any question feel free to ask.
Upvotes: 3
Alex Wilson
Reputation: 2419
I suggest option emulation of equal height columns CODEPEN
<body>
<div class="wrapper">
<header class="header">
<strong>Header:</strong> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras tortor. Praesent dictum, libero ut tempus dictum, neque eros elementum mauris, quis mollis arcu velit ac diam. Etiam neque. Quisque nec turpis. Aliquam arcu nulla, dictum et, lacinia a, mollis in, ante. Sed eu felis in elit tempor venenatis. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Ut ultricies porttitor purus. Proin non tellus at ligula fringilla tristique. Fusce vehicula quam. Curabitur vel tortor vitae pede imperdiet ultrices. Sed tortor.
</header><!-- .header-->
<div class="middle">
<div class="container">
<main class="content">
<strong>Content:</strong> Sed placerat accumsan ligula. Aliquam felis magna, congue quis, tempus eu, aliquam vitae, ante. Cras neque justo, ultrices at, rhoncus a, facilisis eget, nisl. Quisque vitae pede. Nam et augue. Sed a elit. Ut vel massa. Suspendisse nibh pede, ultrices vitae, ultrices nec, mollis non, nibh. In sit amet pede quis leo vulputate hendrerit. Cras laoreet leo et justo auctor condimentum. Integer id enim. Suspendisse egestas, dui ac egestas mollis, libero orci hendrerit lacus, et malesuada lorem neque ac libero. Morbi tempor pulvinar pede. Donec vel elit.
<a href="#" class="expand">Expand column</a> </main><!-- .content -->
</div><!-- .container-->
<aside class="right-sidebar">
<strong>Right Sidebar:</strong> Integer velit. Vestibulum nisi nunc, accumsan ut, vehicula sit amet, porta a, mi. Nam nisl tellus, placerat eget, posuere eget, egestas eget, dui. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. In elementum urna a eros. Integer iaculis. Maecenas vel elit.
<a href="#" class="expand">Expand column</a> </aside><!-- .right-sidebar -->
</div><!-- .middle-->
<footer class="footer">
<strong>Footer:</strong> Mus elit Morbi mus enim lacus at quis Nam eget morbi. Et semper urna urna non at cursus dolor vestibulum neque enim. Tellus interdum at laoreet laoreet lacinia lacinia sed Quisque justo quis. Hendrerit scelerisque lorem elit orci tempor tincidunt enim Phasellus dignissim tincidunt. Nunc vel et Sed nisl Vestibulum odio montes Aliquam volutpat pellentesque. Ut pede sagittis et quis nunc gravida porttitor ligula.
</footer><!-- .footer -->
</div><!-- .wrapper -->
</body>
body {
font: 12px/18px Arial, sans-serif;
width: 100%;
}
/* Begin of styles for the demo (you can remove them) */
a.expand {
width: 90px;
display: block;
margin: 10px 0 0;
}
a.expand:hover {
height: 500px;
}
/* End of of styles for the demo */
.wrapper {
width: 960px;
margin: 0 auto;
}
/* Header
-----------------------------------------------------------------------------*/
.header {
height: 150px;
background: #FFE680;
}
/* Middle
-----------------------------------------------------------------------------*/
.middle {
border-right: 250px solid #FFACAA;
position: relative;
}
.middle:after {
display: table;
clear: both;
content: '';
}
.container {
width: 100%;
float: left;
overflow: hidden;
margin-right: -100%;
}
.content {
padding: 0 20px;
}
/* Right Sidebar
-----------------------------------------------------------------------------*/
.right-sidebar {
float: right;
margin-right: -250px;
width: 250px;
position: relative;
background: #FFACAA;
}
/* Footer
-----------------------------------------------------------------------------*/
.footer {
height: 100px;
background: #BFF08E;
}
Upvotes: 1
Alvaro Menéndez
Reputation: 9012
add this css's:
#columns, #outer_frame, html, body, form {
height:100%;
}
For height:100% to work propely all container parents must also have the height set to 100%
Upvotes: 0