FRIHOST • FORUMS • FAQ • TOS • BLOGS • DIRECTORY
You are invited to Log in or Register a Frihost Account!

div positioning problem

   Frihost Forum Index -> Scripting -> Html, CSS and Javascript
 


alalex
Hi all,
I'm trying to setup a content section containing two divs, the main one and a sidebar to the right. I've done this tons of times with no problem but for some reason I can't get it to work this time...

I'll explain the scenario and then I'll post the source code so that you can help me out Smile
First there is a container div, which has a padding of 50px in all sides except bottom one.
Inside that one I've placed two divs, one the main one and the other the sidebar. The main one has no width specified, and the right margin is the same as the sidebar's width + the margin that separates them. The sidebar is then floated right with a width of 285px, and a margin left of 20px. Now that usually works for me but this time I've probably forgot something somewhere which I can't find Sad

Here is the html (plain)
Code:
<div id="content">
       <div id="main"></div>
        <div id="nav"></div>
    </div>


And the CSS:
Code:
/* Center container: */
#content{
   width:100%;
   padding:50px 0 0 50px;
}
/* Center (Posts) styling */
#main{
   margin: 0 355px 0 0;
   background-image:url(images/content.png);
   background-position:top;
   background-repeat:repeat-x;
   min-height:370px;
   padding:5px;
   border-right-color:#FFFCF0;
   border-right-style:solid;
   border-right-width:1px;
   border-left-color:#FFFCF0;
   border-left-style:solid;
   border-left-width:1px;
}

/* Right Sidebar styling */
#nav{
   margin-right:50px;
   float: right;
   width:285px;
   background-image:url(images/sidebar.png);
   background-position:top center;
   background-repeat:no-repeat;
   min-height:398px;
   padding:5px;
}

And here is a link to the actual page:
http://urbanoalvarez.es/test/
I'm still working on it so it takes a little longer than it should to load, but for now it doesn't matter...
brokenadvice
I think the left border on the main div is throwing the navigation div down. Try increasing the margin of the main div by 1 or 2 px. Several browsers only include the borders in reality, but not when they calculate the % width.
alalex
Thanks for the tip, it improved the appearance, but the real problem was another thing I just realized Sad

It was so easy that I had completely overlooked it...

The HTML for that to work had to be with the floated div first (the nav) and then the other one, like this:
Code:
<div id="content">
       <div id="nav"></div>
        <div id="main"></div>
    </div>


I feel so good right now! it took me two days to realize... Very Happy
Reply to topic    Frihost Forum Index -> Scripting -> Html, CSS and Javascript

FRIHOST HOME | FAQ | TOS | ABOUT US | CONTACT US | SITE MAP
© 2005-2007 Frihost, forums powered by phpBB.