0

I have 3 floats that make up my layout, However even though two sections are exactly the same but one wont keep its shape unless I put text in it.

my html;

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
    <title>test</title>
    <meta http-equiv="content-type" content="text/html;charset=utf-8" />
    <link rel="stylesheet" href="css.css" type="text/css" />
</head>

<body>
<div id="pagewidth" >
    <div id="header"><h2>Head</h2></div>
        <div id="twocols"> 
            <div id="maincol"><h1>Main Content Column</h1><p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p> <p>Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus.</p> </div>
            <div id="rightcol"><p>a</p></div>
        </div> 
        <div id="leftcol"></div>
</div>
</body>
</html>

my CSS, it's rightcol that won't show properly.

html, body{ 
 margin:0; 
 padding:0; 
 text-align:center; 
} 

#pagewidth{ 
 width:100%; 
 hight:100%;
 text-align:left; 
 margin:0 auto; 
} 

#header{
 position:relative; 
 height:3%; 
 background-color:#000000; 
 width:100%;
 display:block;
 overflow:auto;

} 

#leftcol{
 width:5%; 
 height:97%;
 float:left; 
 position:absolute; 
 background-color:#000000; 

 }

 #twocols{
 width:90%; 
 height:97%;
 float:right; 
 position:relative; 
  }

#rightcol{
 width:5%; 
 float:right; 
 position:relative; 
 background-color:#000000;
 }


#maincol{
 background-color: #FFFFFF;  
 float: left; 
 position: relative; 
 width:94%; 
 }
4
  • Demonstration: jsfiddle.net/Zup25 Apr 16, 2011 at 21:51
  • No need to apologize, we are here to learn!
    – Trufa
    Apr 16, 2011 at 21:53
  • @Trufa - Was there a comment that got deleted? Apr 16, 2011 at 21:56
  • @JaredFarrish: No.. I edited the question...
    – Trufa
    Apr 16, 2011 at 21:59

1 Answer 1

1

#rightcol does not have a height defined, hence it is taking a height of 0, so it doesn't show up unless it is filled with something.

0

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.