Can't get floats to line up

HTML & CSS
1

In the markup below, I’m attempting to get a side by side display of the “content-footer box s1” element and the “content-footer widget_pages” element. However, I can’t seem to get them side by side on the same horizontal line. Its as if there is a clear:right on the content-footer.box.s1 element

<div class="main">
            <div role="main" class="content">
               <article class="entry">
                  <p>content goes here</p>
               </article>

               <!--FLOAT THIS ELEMENT LEFT-->
               <div class="sb2 content-footer box s1">
                  <h4 class="sidebarTitle">Box 1 content</h4>
                  <div class="textwidget">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</div>
               </div>

               <!--FLOAT THIS ELEMENT RIGHT OF PREV SIBLING-->
               <div class="sb3 content-footer widget_pages">
                  <h4 class="sidebarTitle">Pages</h4>
                  <ul>
                     <li class="page_item page-item-15"><a href="http://localhost/contact/">Contact</a></li>
                     <li class="page_item page-item-14"><a href="http://localhost/give-back/">Give Back</a></li>
                     <li class="page_item page-item-17"><a href="http://localhost/privacy/">Privacy</a></li>
                  </ul>
               </div>

            </div>
            <aside role="complementary" class="sidebar">
              <p>aside content here</p>
            </aside>
            <div class="clear">&nbsp;</div>
</div>

.content-footer.box.s1 {width:40%;float:left}
.content-footer.widget_pages {width:40%;float:right}
2

Hi Scott,

I’m not seeing anything strange here and they all seem to line-up.

e.g.


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Untitled Document</title>
<style>
.content-footer.box.s1 {
	width:40%;
	float:left;
	background:red
}
.content-footer.widget_pages {
	width:40%;
	float:right;
	background:blue;
}
h4{margin:0 0 1em}
</style>
</head>

<body>
<div class="main">
		<div role="main" class="content">
				<article class="entry">
						<p>content goes here</p>
				</article>
				
				<!--FLOAT THIS ELEMENT LEFT-->
				<div class="sb2 content-footer box s1">
						<h4 class="sidebarTitle">Box 1 content</h4>
						<div class="textwidget">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</div>
				</div>
				
				<!--FLOAT THIS ELEMENT RIGHT OF PREV SIBLING-->
				<div class="sb3 content-footer widget_pages">
						<h4 class="sidebarTitle">Pages</h4>
						<ul>
								<li class="page_item page-item-15"><a href="http://localhost/contact/">Contact</a></li>
								<li class="page_item page-item-14"><a href="http://localhost/give-back/">Give Back</a></li>
								<li class="page_item page-item-17"><a href="http://localhost/privacy/">Privacy</a></li>
						</ul>
				</div>
		</div>
		<aside role="complementary" class="sidebar">
				<p>aside content here</p>
		</aside>
		<div class="clear">&nbsp;</div>
</div>
</body>
</html>
3

I can’t quite figure it.

Here’s a screenshot of what I’m seeing, along with my css:

758×727 47.7 KB

4

does anything, specifically your box class have a clear rule?

5

There has to be more to it :). Can you provide us with a link to the page?

At the very least, we need more code. The HTML should be fine, but there is clearly other CSS being played into this. Can you take your site and give us all the code for that? Or at the very least, cut out the sections that aren’tapplicable to this problem (header/footer) and give us that? Basically a reduced test case.

6

Yes there must be something else going on there :slight_smile:

Either you have cancelled out the float on the red box or you have a clear added to the green box or you have a wrapper around the red box that is not floated but contains the float.