SitePoint Sponsor

User Tag List

Results 1 to 6 of 6

Hybrid View

  1. #1
    SitePoint Addict Scott Blanchard's Avatar
    Join Date
    Sep 2010
    Posts
    314
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Can't get floats to line up

    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

    HTML Code:
    <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>
    Code:
    .content-footer.box.s1 {width:40%;float:left}
    .content-footer.widget_pages {width:40%;float:right}

  2. #2
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,775
    Mentioned
    158 Post(s)
    Tagged
    3 Thread(s)
    Hi Scott,

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

    e.g.
    Code:
    <!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. #3
    SitePoint Addict Scott Blanchard's Avatar
    Join Date
    Sep 2010
    Posts
    314
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Paul O'B View Post
    Hi Scott,
    I'm not seeing anything strange here and they all seem to line-up.
    I can't quite figure it.

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



    float-issue.png

  4. #4
    SitePoint Wizard rguy84's Avatar
    Join Date
    Sep 2005
    Location
    Durham, NC
    Posts
    1,659
    Mentioned
    5 Post(s)
    Tagged
    0 Thread(s)
    does anything, specifically your box class have a clear rule?
    Ryan B | My Blog | Twitter

  5. #5
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,564
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    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.
    Twitter-@Ryan_Reese09
    http://www.ryanreese.us -Always looking for web design/development work

  6. #6
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,775
    Mentioned
    158 Post(s)
    Tagged
    3 Thread(s)
    Yes there must be something else going on there

    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.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •