SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    SitePoint Enthusiast
    Join Date
    Mar 2010
    Location
    Northern Indiana, USA
    Posts
    6
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Question 2 column elastic/fluid layout

    Hi
    I am trying to make a layout with an elastic sidebar and a fluid content area. however, I want the sidebar to appear to extend the whole height of the page. I know how to do this with a fixed-width layout, but with a fluid right column I am scratching my head.

    Thanks

    HTML Code:
    <body>
    <div id="page">
    
    <!-- sidebar -->
    <div id="sidebar">
    	<div id="logo">
    	Logo here
    	</div>
    	
    	<div id="navigation">
    	Navigation here
    	</div>
    </div>
    
    <!-- header and content -->
    <div id="rightCol">
    	<div id="header">
    	</div>
    	
    	<div id="content">
    	Main content here
    	</div>
    </div>
    </div> <!-- end page div -->
    </body>
    And my css:
    Code:
    #page {
    	width: 95%;
    	margin: 10px auto;
    }
    
    /* sidebar rules */
    #sidebar {
    	width: 15em;
    	min-height: 100%;
    	background: #eeeeee;
    	float: left;
    }
    
    #logo {
    	width: 200px;
    	height: 200px;
    	margin: 5px auto;
    	text-align: center;
    	border: 1px solid black;
    }
    /* end sidebar rules */
    #rightCol {
    	background: #d2d2d2;
    	height: 700px;
    }

  2. #2
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,596
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    Hi, to get a fluid right column just set a left margin on #rightCol of 15em. That will ensure the right column is fluid

    You could set up a min-height:100&#37; routine. See FAQ at the top of this forum for details
    Always looking for web design/development work. Willing to do it cheap to build portfolio!

  3. #3
    SitePoint Enthusiast
    Join Date
    Mar 2010
    Location
    Northern Indiana, USA
    Posts
    6
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thank you for the tip. I should have known. It is really the same method you use in a fixed layout.

    If you have a left column, Set the right margin of the right column (or middle, depending on your layout) to the same width as your left column or vice versa.

  4. #4
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,596
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    If you want hte right column to take up the remaining width, and the left column is fixed/fluid/elastic (whatever!) then all you need to do is set a left margin on the right column.

    The value of hte left margin has to match the width of the left column

    Aka if my leftcolumn is 200px then I must set a margin-left:200px on the right column.
    Aka if my left column is 20em then I must set a margin-left:20em on the right column
    etc
    etc
    Always looking for web design/development work. Willing to do it cheap to build portfolio!


Tags for this Thread

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
  •