SitePoint Sponsor

User Tag List

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

    Flexible ("Responsive") layout issue once float breaks

    I have a two column layout with wrapper, header, main container, content area, sidebar and footer.

    The structure is:

    HTML Code:
    <!DOCTYPE html>
    <!DOCTYPE html>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
    
    <style type="text/css">
    .wrapper {margin:0 auto;max-width:960px;border:1px solid #777;overflow:hidden;}
    .content {width:70%;border:1px solid red;float:left;overflow:hidden;min-width:100px;}
    .sidebar {width:29%;border:1px solid green;float:right;overflow:hidden;}
    .clear {clear:both;}
    @media only screen
    and (max-width : 800px) {
    .content, .sidebar {float:none;width:100%;}
    }
    
    </style>
    <html>
    <body>
    <div class="wrapper">
    	<div class="header">header stuff</div>
    	<div class="main">
    		<div class="content">Main content area. This is the main content area. if it has more text that can fit, then it will display.</div>
    		<div class="sidebar">Sidebar content here</div>
    		<div class="clear">clear the footer</div>
    		<div class="footer">footer goes here</div>
    	</div>
    </div>
    </body>
    </html>
    I've got the content area set to float left and the sidebar set to float right. The wrapper div is set to max-width:960px.

    The content is set to width:70% with float:left and the sidebar is set to 29% (not sure why it can't be 30% but it breaks the float) with a float:right.

    My problem is:

    Once I reduce the browser width to a certain point, the float breaks as expected, but the content area is still 70% of the available width.

    How can I establish a point at which the content and sidabar are both 100% of the available width?

  2. #2
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    23,598
    Mentioned
    411 Post(s)
    Tagged
    6 Thread(s)
    The reason the floats can't afford to add up to 100% width is that the % has to be translated into pixels, and depending on how the browser does that calculation, you may sometimes get slightly more that 100% width.

    You can use media queries to change widths to 100% on small screens. For example, if you reduce your browser window to under 800px width, the content and sidebar will turn to 100% width:

    Code:
    <!DOCTYPE html>
    <style type="text/css">
    .wrapper {margin:0 auto;max-width:960px;border:1px solid #777}
    .content {width:70%;border:1px solid red;float:left;}
    .sidebar {width:29%;border:1px solid green;float:right;}
    .clear {clear:both;}
    
    @media only screen
    and (max-width : 800px) {
    .content, .sidebar {float: none; width: 100%;}
    }
    
    </style>
    <html>
    <body>
    <div class="wrapper">
    	<div class="header">header stuff</div>
    	<div class="main">
    		<div class="content">Main content area</div>
    		<div class="sidebar">Sidebar content here</div>
    		<div class="clear">clear the footer</div>
    		<div class="footer">footer goes here</div>
    	</div>
    </div>
    </body>
    </html>
    The media queries are different for different devices. There is a nice list of them here:

    http://css-tricks.com/snippets/css/m...ndard-devices/

    PS: the float drop may also have been caused by the border on the columns, which adds to the width.

  3. #3
    SitePoint Addict Scott Blanchard's Avatar
    Join Date
    Sep 2010
    Posts
    314
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks for that Ralph! That helps lots.

    Any idea why, in Firefox only, when I reduce the size of the browser, the contents of the "content" div will not wrap to allow the div to collapse to the size of the browser?

  4. #4
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    23,598
    Mentioned
    411 Post(s)
    Tagged
    6 Thread(s)
    Not quite sure what you mean there. Do you have an example with content in it? Are you talking about the @media version?

  5. #5
    SitePoint Addict Scott Blanchard's Avatar
    Join Date
    Sep 2010
    Posts
    314
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Yes, I'm on the right track with the @media version, but the next problem I'm trying to figure out, even with this version, is why, in Firefox, as I reduce the width of the browser, and at the point I reach the "y" in "display", the content no longer collapses. It acts as though it had a white-space:no-wrap attribute on it.

    If you will load that content into an empty text file, save it as test.html, for example, and then resize the window, you should see that the content does not wrap as expected as the browser width decreases beyond that point.

  6. #6
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    23,598
    Mentioned
    411 Post(s)
    Tagged
    6 Thread(s)
    Firefox doesn't let you reduce the browser window to under about 600px. It's the same for me in either of the cases you describe. Is that what you mean?

  7. #7
    SitePoint Addict Scott Blanchard's Avatar
    Join Date
    Sep 2010
    Posts
    314
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by ralph.m View Post
    Firefox doesn't let you reduce the browser window to under about 600px. It's the same for me in either of the cases you describe. Is that what you mean?
    Yes, exactly.

  8. #8
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    23,598
    Mentioned
    411 Post(s)
    Tagged
    6 Thread(s)
    Ah well, there's nothing you can do about that. That's just how Firefox works. Realistically, there's not a lot of use in having your desktop browser set to less that 600px wide. If you want to test at a narrower range, just use a different browser like Opera.

  9. #9
    SitePoint Addict Scott Blanchard's Avatar
    Join Date
    Sep 2010
    Posts
    314
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I agree. Now that I know its a browser limitation and not a flaw in my code, I'm good. Thanks very much for the media query tip.

  10. #10
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    23,598
    Mentioned
    411 Post(s)
    Tagged
    6 Thread(s)
    You're welcome. I have a lot to learn about media queries, but they certainly are fun to play around with. The css-tricks link above is very handy, as it can be a bit confusing working out how to target the various devices that recognize media queries.


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
  •