Question

I’m trying to implement a bar on the left of the window, with a set width, with another div that fills the right side of the window. I’ve tried using “float:left;” on both, but this results in the “right” area to get stacked below the left bar.

This is correct, except I need the white area at the right to be filled by the other div.
With my current try, this is what happens:

How can I get the bottom div to fill up the white area to the right? The black gradient is a background: setting, and will scale properly.

Thanks!

Answer 1

I’ve figured out how to do this already… For anyone else needing to know how:

For the left bar, you need a set known width, in this replace %width% with your width…

CSS:

.leftBar{
    position:absolute;
    top:0;
    left:0;
    height:100%;
    color:white;
    height: 100%;
    width: %width%;
}
.mainCenterContent{
padding-left:%width%;
width:100%;
height:100%;
}

HTML:

<div class="leftBar">
bleh
</div>
<div class="mainCenterContent">
    bleh
</div>

As you can see the padding essentially moves the div over enough to not intersect with the left bar. This is working properly for me.

Thanks!