SitePoint Sponsor

User Tag List

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

    Floated, fixed-width sidebar with fluid-width *previous* sibling?

    In the markup below, without changing the order of the elements, and without adding additional elements, I would like to fix the width of the sidebar to 300 pixels and float it to the right of #content so that #content and #sidebar have the same top x position (they are aligned beside one another).

    For #content, I don't want to specify a width, but rather, I want it to auto expand to fill the available width left over from #sidebar.

    In some cases, #sidebar will not be present in the markup, so the CSS will allow that condition and content will just expand/contract nicely to fill the space.

    The tricky part is that since #sidebar follows #content in markup, unless #content is given a fixed width less than or equal to the parent container's remaining available width, #sidebar falls below it.

    Any ideas?

    HTML Code:
    <div id="main">
    	<div id="top-widget">This div should span the full width of the parent container</div> 
    	<div id="content">This div should float to the left of its sibling "#sidebar" and should take up as much horizonal space as left over after #sidebar's fixed width</div>
    	<div id="sidebar">This div should float to the right of content and be 300 pixels wide.</div>
    	<div class="clearFloats">This div is empty and just clears any floats before the footer section begins</div>
    </div>
    Code:
    #main {width:967px;}
    #top-widget {clear:both;}
    #sidebar {float:right; width:300px;}
    #content {???}

  2. #2
    SitePoint Wizard webcosmo's Avatar
    Join Date
    Oct 2007
    Location
    Boston, MA
    Posts
    1,434
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    i would probably place divs in this order

    <div id="main">
    <div id="top-widget">This div should span the full width of the parent container</div>
    <div id="sidebar">This div should float to the right of content and be 300 pixels wide.</div>
    <div id="content">This div should float to the left of its sibling "#sidebar" and should take up as much horizonal space as left over after #sidebar's fixed width</div>
    <div class="clearFloats">This div is empty and just clears any floats before the footer section begins</div>
    </div>

    When the sidebar is present you could easily have the content div with css
    #content {margin-right:300px;}

    However i am not sure if you could have a way of knowing from css if sidebar is present or not. you could use some javascript though to set different css for content div.

  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 webcosmo View Post
    i would probably place divs in this order

    <div id="main">
    <div id="top-widget">This div should span the full width of the parent container</div>
    <div id="sidebar">This div should float to the right of content and be 300 pixels wide.</div>
    <div id="content">This div should float to the left of its sibling "#sidebar" and should take up as much horizonal space as left over after #sidebar's fixed width</div>
    <div class="clearFloats">This div is empty and just clears any floats before the footer section begins</div>
    </div>
    Thanks webcosmo, I appreciate your suggestions, but...

    Its important in this example that the content precedes the sidebar for the intrinsic SEO value of the content over the sidebar.

    So I'm looking to see if there's a pure css solution that doesn't involve javascript or markup change.

    I figure that if its possible, I'm in the right place to find out, and how :-)

  4. #4
    SitePoint Member
    Join Date
    May 2008
    Posts
    11
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hello,

    You could try using a display:table-cell. Something like that:
    Code CSS:
    #main {width:967px;}
    #content {display:table-cell;min-width:667px;width:967px;}
    #sidebar {display:table-cell;min-width:300px;}

    Of course this won't work in IE7 and below. You could use a css expression for those old browsers:
    HTML Code:
    <!--[if lt IE 8]>
    		<style type="text/css">
    
    		#content {
    			float:left;
                            width:667px;
    			width:expression(document.getElementById('sidebar') ? "667px" : "967px");
    		}
    		
    		#sidebar {float:right;width:300px;}
    
    		</style>
    <![endif]-->

  5. #5
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,865
    Mentioned
    159 Post(s)
    Tagged
    4 Thread(s)
    The display table-cell method that Candygirl suggests above should do exactly what you want for modern browsers (IE8 and upwards).

    If you need support for IE6/7 then you either have to use the expressions shown above or change the html around a bit so that sidebar comes first in source if you need #content to automatic fill remaining space whether sidebar is present or not.


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
  •