html - CSS Align Divs Correctly -



html - CSS Align Divs Correctly -

so have these 2 big divs, want 1 mainbar, , 1 sidebar right. i've tried making them both float left, tried using width percentages couldn't figure out. maybe guys can? html code:

<div class="container box" style="clear:both !important;"> </div> <div class="sidebar sidebarbox" style="clear:both !important;"> </div>

then css:

.box { background-color: rgba(224, 222, 217, 0.25); -moz-box-shadow: 0 0 10px #1a1a18; -webkit-box-shadow: 0 0 10px #1a1a18; box-shadow: 0 0 10px #1a1a18; border: 1px solid #ffffff; margin-top:25px; } .container { margin-left: auto; margin-right: auto; float: left; width: 60%; padding: 20px; background-color: none; border: 1px solid #c9c7c8; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; min-height: 450px; } .sidebar { float: left; width: 20%; padding: 20px; background-color: none; border: 1px solid #c9c7c8; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; margin-right:10px; min-height: 450px; } .boxsidebar { background-color: rgba(224, 222, 217, 0.25); -moz-box-shadow: 0 0 10px #1a1a18; -webkit-box-shadow: 0 0 10px #1a1a18; box-shadow: 0 0 10px #1a1a18; border: 1px solid #ffffff; margin-right:10px; }

is able figure out? appreciate help.

you have inline styling (set important) overriding float.

set html to:

<div class="container box"> </div> <div class="sidebar sidebarbox"> </div> <div style="clear:both;"></div>

your code cleaned bit.. above solve issue of boxes not floating next each other.

html css

Comments

Popular posts from this blog

php - Android app custom user registration and login with cookie using facebook sdk -

django - Access session in user model .save() -

php - .htaccess Multiple Rewrite Rules / Prioritizing -