Question

I’m trying to create a simple full screen site where the side bar is a constant width, but the “site content” area expands and contracts depending on your browsers width.

Here are two pictures visualizing what I am trying to do:

https://i.stack.imgur.com/AKBme.png

https://i.stack.imgur.com/4Lg0E.png

When the browser is expanded the side bar is still maintains its original width, but the “site content” has nearly doubled to fill up the space.

The only way I have been able to get site content to expand is to also have the sidebar expand for example:

<style>
#sidebar{
width:20%;
float:right;
}
#sitecontent{
width:80%;
float:left;
}
</style>

Any ideas?

Answer 1

<style>
#sidebar{
    width: 256px; /* Use a fixed width for your sidebar. */
    float: right;
}
#sitecontent{
    display: block;
    float: left;
}
</style>