Menu
I have a very simple layout with 2 DIVS: a fixed width left bar and a right area which should take up 100% of the remaining width. Both are 100% height, and I want the right item to have a vertical scroll bar if the height is taller than the window height.
My current code takes up the whole browser window, but the right area scrolls way off the browser viewable area to the right, and there is never a vertical scroll bar visible.
HTML:
<body>
<form id="Form2" runat="server">
<div class="page">
<div class="clear hideSkiplink">
Left side stuff goes here....
</div>
<div class="main">
Right size stuff goes here....
</div>
</div>
</form>
</body>
CSS:
div.hideSkiplink
{
padding:20px;
background-color:#990000;
position:fixed;
top:0px;
left:0px;
width:249px;
height:100%;
}
div.main
{
padding: 10px;
margin: 0px;
background-color: #000000;
color: #ffffff;
position: fixed;
top: 0px;
left: 250px;
width: 100%;
height: 100%;
}
783
The width property is used to fill a div remaining horizontal space using CSS. By setting the width to 100% it takes the whole width available of its parent. Example 1: This example use width property to fill the horizontal space. It set width to 100% to fill it completely.
It seems like this should be one of the easiest things to understand in CSS. If you want a block-level element to fill any remaining space inside of its parent, then it's simple — just add width: 100% in your CSS declaration for that element, and your problem is solved.
What is meant by width 100%? if you specify width:100%, the element's total width will be 100% of its containing block plus any horizontal margin, padding and border.
When you give something width:100% it means 'whatever the width of my container, I will have the same width' -- it does not mean 'I will take up 100% of the available space'
In other words, let's say your parent DIV was 300 pixels wide -- if you give the child div width: 100%, it will be 100% of 300 pixels.
What you can do here, since your left column is fixed width, is add a left margin to the right div.
div.left
{
width: 249px;
}
div.right
{
width: 100%;
margin-left: 249px;
}
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
