Question

I am trying to get a sidebar working. But it is not letting the #main Section go along side the sidebar.
Instead you get the sidebar, followed by the main (puts it below). 🙁

Also, if you can get a solution where sidebar may/maynot be present, and the main will fill the space, that would be great.

Below is what I am trying to get.

Here is some of the relevant CSS

#main 
{
    margin: 0 0 0 100px; /* This is my way of indenting it over the sidebar (not dynamic to no sidebar being present*/
    padding: 15px 15px 15px 15px;
    background-color: #fff;
    border-radius: 4px 0 0 0;
    -webkit-border-radius: 4px 0 0 0;
    -moz-border-radius: 4px 0 0 0;   
}

ul#sidebar
{ 
    width: auto;
    /* float:left; */
    font-size: 95%;
    word-spacing: -0.1em;
    padding:10px 10px 10px 1px; 
}

The footer seems to work fine.

Answer 1

You could set widths using % and float the sidebar left…

<div class="wrapper">
   <div class="sidebar">Sidebar</div>
   <div class="main">Main</div>
</div>

.wrapper {width:100%; overflow:hidden;}
.sidebar {width:8%; float:left; margin-right:2%;}
.main {width:90%; float:left;}