Floats will not align, stay staggered, can't find a solution?
- by Sarah Proper
What I am trying to do is build a multi column layout.
The main two sections are divided 2/3 to 1/3 and inside the 2/3 column is divided 2/3 1/3 as well. My problem is that my floats will not align nicely with each other, choosing instead to stagger like stairs.
I have tried declaring the widths smaller, floating them individually, including in the float sections display:block,inline, or inline-block and nothing seems to be working.
I am getting really frustrated and would appreciate any help! Thanks!
<div class="wrapper">
<div class="width50" style="float:left;">
<h1>Our Mission:</h1>
<p> Bacon ipsum dolor sit amet swine spare ribs pork meatloaf pancetta filet mignon. Rump frankfurter pork belly prosciutto beef boudin andouille pig pork chop
meatball ham drumstick filet mignon. Strip steak flank shank pig, tongue tri-tip jowl leberkas sirloin brisket t-bone. Ground round spare ribs salami capicola
filet mignon. Capicola turkey t-bone corned beef sausage ham hock. Corned beef capicola leberkas pork chop, swine pastrami drumstick. Frankfurter fatback
bacon jowl short loin, jerky pancetta bresaola corned beef shoulder drumstick ball tip tri-tip.</p>
<div class="width50 float-left">
<img src="@Url.StaticContent(Links.Content.images.map_homepage_png)" alt="Map" />
</div>
<div class="width33 float-right">
<img src="@Url.StaticContent(Links.Content.images.address_line_text_png)" alt="addressline" />
<br />
<h3>address</h3>
<b>405 Empire Boulevard<br />
Rochester, NY 14609
</b>
</div>
</div>
<div class="width33" style="float:right;">
<h1>Events</h1>
<ul class="events">
<li>
<h2>Fall Volunteer Festival</h2>
<p>
<b>october 6<br />
10 am to 3pm
</b>
</p>
<p>
come to our town location for some fun activities for family and friends!
</p>
</li>
<li>
<h2>Fall Volunteer Festival</h2>
<p>
<b>october 6<br />
10 am to 3pm
</b>
</p>
<p>
come to our town location for some fun activities for family and friends!
</p>
</li>
<li>
<h2>Fall Volunteer Festival</h2>
<p>
<b>october 6<br />
10 am to 3pm
</b>
</p>
<p>
come to our town location for some fun activities for family and friends!
</p>
</li>
</ul>
</div>
</div>
</div>
and the css:
.clearfix:before,
.clearfix:after,
.grid-block:before,
.grid-block:after,
.deepest:before,
.deepest:after {
content: "";
display: table;
}
.clearfix:after,
.grid-block:after,
.deepest:after { clear: both; }
.grid-box { float: left; }
/* Grid Units */
.width16 { width: 16.666%; }
.width20 { width: 20%; }
.width25 { width: 25%; }
.width33 { width: 39.333%; }
.width40 { width: 40%; }
.width50 { width: 50%; }
.width60 { width: 60%; }
.width66 { width: 66.666%; }
.width75 { width: 75%; }
.width80 { width: 80%; }
.width100 { width: 100%; }
.width16,
.width20,
.width25,
.width33,
.width40,
.width50,
.width60,
.width66,
.width75,
.width80,
.width100 {
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
padding: 5px 10px 5px 10px;
}
/* Create new Block Formatting Contexts */
.bfc-o { overflow: hidden; }
.bfc-f {
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
width: 100%;
float: left;
}
/* Align Boxes */
.float-left { float: left; }
.float-right { float: right; }
/* Grid Gutter */
.grid-gutter.grid-block { margin: 0 -15px; }
.grid-gutter > .grid-box > * { margin: 0 15px; }
.grid-gutter > .grid-box > * > :first-child { margin-top: 0; }
.grid-gutter > .grid-box > * > :last-child { margin-bottom: 0; }
/* Layout Defaults
--------------------------------------------------------------------------------------- -------------*/
/* Center Page */
.wrapper {
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
margin: auto;
}
/* Header */
#header { position: relative; padding-top: 10px; }
#toolbar .float-left .module,
#toolbar .float-left > time {
margin: 0 15px 0 0;
float: left;
}
#toolbar .float-right .module {
margin: 0 0 0 15px;
float: right;
}
#headerbar .module {
max-width: 300px;
margin-right: 0;
float: right;
}
#logo, #logo > img,
#menu { float: left; }
#search { float: right; }
#banner {
position: absolute;
top: 0;
right: -200px;
}
/* Footer */
#footer {
position: relative;
text-align: center;
}
/* Absolute */
#absolute {
position: absolute;
z-index: 15;
width: 100%;
}
