Home/ Questions/Q 9115483
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-17T04:26:37+00:00

I have a pretty simple layout that looks like this The code for is

  • 0

I have a pretty simple layout that looks like this

enter image description here

The code for is this:

<!DOCTYPE html>
<html>
<HEAD>
    <LINK href="mystyle.css" title="compact" rel="stylesheet" type="text/css">
  </HEAD>
<body>

<div id="wrap">

    <div id="header">
    <p> Im the header. </p> 
    </div>

    <div id="nav">
    <p> Im the nav. </p> 
    </div>

    <div id="sidebar">
    <p> sidebar here </p> 
    <p> sidebar here </p>
    <p> sidebar here </p>
    <p> sidebar here </p>
    <p> sidebar here </p>
    <p> sidebar here </p>
    <p> sidebar here </p>
    <p> sidebar here </p>
    <p> sidebar here </p>
    </div>

    <div id="main">
    <p> im the main </p> 
    <p> im the main </p> 
    <p> im the main </p> 
    <p> im the main </p> 
    <p> im the main </p> 
    <p> im the main </p> 
    <p> im the main </p> 
    <p> im the main </p> 
    <p> im the main </p> 
    <p> im the main </p> 
    <p> im the main </p> 
    <p> im the main </p> 
    </div>

    <div id="footer">
    <p> footer </p> 
    </div>
</div>

<body> 


</html>

Here is the CSS: 

#wrap
{ 
    width: 100%; 
    background-color:blue; 
    padding: 10px; 
}

#header 
{ 
    background-color:white; 
    width: 98%; 
    float: left; 
    padding: 10px; 
}

#nav
{ 
    background-color:yellow; 
    padding: 10px; 
    width:100%;

}


#main 
{ 

    width:100%; 
    background:green; 
    padding: 10px; 

}


#sidebar
{ 
    background-color:pink; 
    float:right; 
    float:top; 
    padding: 10px; 
    width:20%;
    height:100%; 

}

#footer 
{ 
    background-color:orange; 
    padding: 10px; 
    width:100%;
    clear:both;


}

Now I just dont know why I cant get the pink are / sidebar to fill all the space vertically, down to the orange footer?

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Example: http://jsfiddle.net/s96Tw/

    1) append #sidebar content to the #main element;

    2) add position:relative to the #main element;

    3) add this extra code to the css file:

    #sidebar {
  height:100%;
  position:absolute;
  right:0;
  top:0;
  background:pink;
}
    • 0