CODEWITHSUNDEEP
htmlcssstylesheet
IAmGroot
IAmGroot

Reputation: 13855

CSS: Cant get sidebar working properly

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.

CSS Desired layout

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.

Upvotes: 0

Views: 131

Answers (3)

bpeterson76
bpeterson76

Reputation: 12870

Float left on both is my usual method. However, you need to remember to clear float after the two floated elements, otherwise you get overlap like you mentioned on the footer. I usually handle this by doing an empty div with clear:both defined.

I can't say enough about Grids. There's both the standard 960 and fluid grid options. Then, there's no worries about floats, overlap, or wrapping. It's just done for you. Then you can spend development time on the really important stuff.

Upvotes: 1

Liam
Liam

Reputation: 9855

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;}

Upvotes: 1

Greg Humphreys
Greg Humphreys

Reputation: 1066

You don't need a margin on main, you just need to either float main to the right, or float the navbar to the left. I notice you have a float: left commented out for the ul; was that not working for you?

Upvotes: 1

Related Questions