Problems with floating two divs side by side (both not following wrapper width)

Question

First off, excuse my lack of knowledge regarding CSS and HTML. I'm quite new to this.

I've read most of the questions here regarding aligning two divs side by side here, I've also read some tutorials. But for some reason, I'm having trouble with the divs length in my code.

This is the test site's URL, to give you guys an idea of how it looks.

And here's the HTML:

  
  
  
      
    Okamainakute ne~  
     
  

  

      

        

                    
                        
                    

                    
                        

                            

                                   

                            

                                   

                    

        

        

            
                
                    HOME/NEWS
                    TALES OF... »
                            
                                    By Type
                                    By Platform
                            
                    
                    FEATURES »
                            
                                    Media
                                    Columns
                                    Reviews
                                    Fan Works
                            
                    
                    GALLERY
                    FORUMS
                    THE SITE »
                            
                                    AC's History
                                    Site Staff
                                    Affiliation
                                    Contact Us

And the CSS for that:

body {
    margin:0; padding:0;
    background:#0e564b url('images/ver3_banner.jpg') no-repeat center top;
}

a img {
    border:0;
}

img {
    border:0;
    margin:0;
}

#main_wrapper {
    width:983px;
    padding:0;
    border:0;
    margin:0 auto;
    top:0;
}

#logo {
    width:750px;
    padding:0;
    border:0;
    margin:0;
    display:-moz-inline-stack;
    display:inline-block;
    vertical-align:top;
    zoom:1;
    *display:inline;
}

#xillia {
    width:222px;
    padding:0;
    border:0;
    margin:0;
    display:-moz-inline-stack;
    display:inline-block;
    vertical-align:top;
    zoom:1;
    *display:inline;
}

#socialgels {
    width:255px;
    padding: 3px 5px 3px 2px;
    border:0;
    margin:0;
    text-align: right;
    display:-moz-inline-stack;
    display:inline-block;
    vertical-align:top;
    zoom:1;
    *display:inline;
}

#maincontent {
    box-shadow: 0 4px 5px 3px #062521;
    width:983px;
    background-color: #f0f8ff;
    float:left;
}

#highlights{
    padding: 10px 0px 10px 17px;
    border:0;
    margin:0;
    background: url('images/highlights_bg.gif') #f0f8ff no-repeat top left;
    vertical-align:top;
    float:left;
}

#ads {
    padding:10px 17px 10px 0px;
    border:0;
    margin:0;
    background: url('images/ads_bg.gif') #f0f8ff no-repeat top right;
    float:right;
    position: relative;
    z-index:1;
}

.xilliacountry {
    text-indent:40px;
    border: 0;
    margin: 0;
    padding:0;
}

.xilliashops {
    text-indent:75px;
    border: 0;
    margin: 0;
    padding:0;
}

.menu_area {
    background: url('images/ver3_menubg.jpg') #ab528c no-repeat;
    height:42px;
    border-top:#6a6a6b solid 1px;
    border-bottom:6a6a6b solid 1px;
    font-family: Tahoma, Helvetica, Arial, Verdana, sans-serif;
    font-weight: bold;
    font-size: 15px;
    color: #fff;
    text-shadow: 2px 2px #660643;
    z-index:2;
    positon: absolute;
}

.menu_area ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    position: relative;
    display: inline-table;
}

.menu_area ul li:hover > ul {
    display:block;
}

.menu_area li {
    float: left;
}

.menu_area ul a {
    background-image: url('images/menu_bg_divider.jpg');
    background-repeat: no-repeat;
    background-position: right;
    padding: 11px 16px 11px 16px;
    display: block;
    color: #fff;
    text-decoration: none;
}

.menu_area ul li a:hover {
    color: #fff;
    background-color: #b95a94;
}

.menu_area ul ul {
    display: none;
    background: #bb5c96;
    background-image: none;
    border: 0;
    padding: 0;
    position: absolute;
    top: 100%;
    width: 152px;
    z-index:2;
}

.menu_area ul ul li {
        float: none; 
        border-top: 1px solid #e6b5d5;
        position: relative;
}

.menu_area ul ul li a {
            padding: 10px 15px 10px 15px;
            color: #fff;
            background: none;
}   

.menu_area ul ul li a:hover {
                background: #e385c1;
}

The two divs I'm trying to align together are the highlights and ads divs. They're contained within a wrapper div named maincontent, and the said two divs are located below another div named menu_area. I think I should also note that within the main_area div, there's also a div for the social buttons you see at the right, named socialgels.

Anyway, as you can see in the demo page, the divs highlights and ads are aligned no problem, but that's because I had to decrease the width given to those divs. I want the site to strictly be 983px wide only, hence why the other parent divs you see in the code (the main_wrapper and banner_area divs) are set at 983px. The maincontent div is also set at that. As such, the highlights div was supposed to be set at 662px and the ads div at 321 px, with highlights floating left and ads floating right. That way, they equal 983px. However, when I do set it like that, for some reason they just won't place side by side: the ads div would always position itself below the highlights div. OR at times (I seriously have no idea what happened), the ads div would position itself to the very far right, as if there's this invisible space between the highlights and ads div that I just don't know where it comes from. They align properly when there are no widths indicated for both divs (that's how the demo page is, currently), but I can't have it like that.

Here's a look of the page when there're indicated widths for both divs.

Apologies if it was long. Basically, I really need to set those specific widths to the highlights and ads div because I don't want the upcoming content I'll be adding below them (the actual posts, and the rest of the navigation at the right, and such), to ruin the layout. I really need it at that specific 983px width.

Thank you in advance.

tryzor · Accepted Answer

The problem is that you forget the padding. If you set the width of the highlight div to 662px you must add the 17px padding and end up with 679px.

So to solve your problem there are two solutions:

Just subtract the padding and/or margin from your desired width.

662px - 17px = 645px

321px - 17px = 304px

Or you use box-sizing: border-box on the highlight and the ads div. If you now set the width to 662px, the padding is inside of the width.

Problems with floating two divs side by side (both not following wrapper width)

Answers (1)

Related Questions