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
Post a Comment