css - Problems with floating two divs side by side (both not following wrapper width) -
first off, excuse lack of knowledge regarding css , html. i'm quite new this.
i've read of questions here regarding aligning 2 divs side side here, i've read tutorials. reason, i'm having trouble divs length in code.
this test site's url, give guys idea of how looks.
and here's html:
<!doctype html public "-//w3c//dtd xhtml 1.0 strict//en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <title>okamainakute ne~</title> <link href="acver3style.css" rel="stylesheet" type="text/css" /> </head> <body> <div id="main_wrapper"> <div id="banner_area"> <div id="logo"> <a href="http://www.abyssalchronicles.com"><img src="images/acver3_sitelogo.png" alt="" /></a> </div> <div id="xillia"> <img src="images/acver3_toxlogo.png" /><br /> <div class="xilliacountry"><img src="images/acver3_toxus.png" /><br /></div> <div class="xilliashops"><a href="" target="_blank"><img src="images/gamestop.png" alt="" /></a> <a href="" target="_blank"><img src="images/playasia.png" alt="" /></a> <a href="" target="_blank"><img src="images/amazon.png" alt="" /></a><br /></div> <div class="xilliacountry"><img src="images/acver3_toxeu.png" /><br /></div> <div class="xilliashops"><a href="" target="_blank"><img src="images/zavvi.png" alt="" /></a> <a href="" target="_blank"><img src="images/shopto.png" alt="" /></a> <a href="" target="_blank"><img src="images/playasia.png" alt="" /></a><br /></div> </div> </div> <div id="maincontent"> <div class="menu_area"> <ul> <li><a href="http://www.abyssalchronicles.com">home/news</a></a></li> <li><a href="http://www.abyssalchronicles.com/tales-of">tales of... »</a> <ul> <li><a href="http://www.abyssalchronicles.com/tales-of/type">by type</a></li> <li><a href="http://www.abyssalchronicles.com/tales-of/platform">by platform</a></li> </ul> </li> <li><a href="http://www.abyssalchronicles.com/features">features »</a> <ul> <li><a href="http://www.abyssalchronicles.com/features/media">media</a></li> <li><a href="http://www.abyssalchronicles.com/features/columns">columns</a></li> <li><a href="http://www.abyssalchronicles.com/features/reviews">reviews</a></li> <li><a href="http://www.abyssalchronicles.com/features/fanworks">fan works</a></li> </ul> </li> <li><a href="http://gallery.abyssalchronicles.com" target="_blank">gallery</a></li> <li><a href="http://forums.abyssalchronicles.com" target="_blank">forums</a></li> <li><a href="http://www.abyssalchronicles.com/the-site">the site »</a> <ul> <li><a href="http://wwww.abyssalchronicles.com/the-site/acs-history">ac's history</a></li> <li><a href="http://www.abyssalchronicles.com/the-site/staff">site staff</a></li> <li><a href="http://www.abyssalchronicles.com/the-site/affiliates">affiliation</a></li> <li><a href="http://www.abyssalchronicles.com/the-site/contact-form">contact us</a></li> </ul> </li> </ul> <div id="socialgels">  <a href="" target="_blank"><img src="images/fbgel.png" alt="" /></a> <a href="" target="_blank"><img src="images/twgel.png" alt="" /></a> <a href="" target="_blank"><img src="images/tmgel.png" /></a> <a href="" target="_blank"><img src="images/ytgel.png" alt="" /></a> <a href="" target="_blank"><img src="images/rsgel.png" alt="" /></a> </div> </div> <div id="highlights"> <img src="images/sample_highlightsfader.jpg" alt="" /> </div> <div id="ads"> <img src="images/sample_ad.jpg" alt="" /> </div> </div> </div> </body> </html> and css that:
body { margin:0; padding:0; background:#0e564b url('images/ver3_banner.jpg') no-repeat center top; } 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 { 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 { padding: 10px 15px 10px 15px; color: #fff; background: none; } .menu_area ul ul li a:hover { background: #e385c1; } the 2 divs i'm trying align highlights , ads divs. they're contained within wrapper div named maincontent, , said 2 divs located below div named menu_area. think should note within main_area div, there's div social buttons see @ right, named socialgels.
anyway, can see in demo page, divs highlights , ads aligned no problem, that's because had decrease width given divs. want site strictly 983px wide only, hence why other parent divs see in code (the main_wrapper , banner_area divs) set @ 983px. maincontent div set @ that. such, highlights div supposed set @ 662px , ads div @ 321 px, highlights floating left , ads floating right. way, equal 983px. however, when set that, reason won't place side side: ads div position below highlights div. or @ times (i have no idea happened), ads div position far right, if there's invisible space between highlights , ads div don't know comes from. align when there no widths indicated both divs (that's how demo page is, currently), can't have that.
here's of page when there're indicated widths both divs.
apologies if long. basically, need set specific widths highlights , ads div because don't want upcoming content i'll adding below them (the actual posts, , rest of navigation @ right, , such), ruin layout. need @ specific 983px width.
thank in advance.
the problem forget padding. if set width of highlight div 662px must add 17px padding , end 679px.
so solve problem there 2 solutions:
just subtract padding and/or margin desired width.
662px - 17px = 645px
321px - 17px = 304px
or use box-sizing: border-box on highlight , ads div. if set width 662px, padding inside of width.
Comments
Post a Comment