SitePoint Sponsor

User Tag List

Results 1 to 12 of 12
  1. #1
    SitePoint Enthusiast
    Join Date
    Apr 2007
    Posts
    36
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Question Full-height columns within liquid layout

    I'm trying to create a layout with the following specs:

    1. Responsive, liquid layout supporting modern browsers and IE7 up
    2. Usual Header / menu elements
    3. Sticky footer (using technique as described in the FAQ)
    4. Main area is 2-columns, left fixed width, the other variable, and...
    5. The problem area: Both columns fill the entire area available when content is short, and expand if needed.

    The first four items went smoothly, and I have an equalizing two column layout working fine with a sticky footer, etc. My problem is that the column heights fit the content instead of filling the available area. Are there other solutions using CSS, or is Javascript the best answer? Do you know of any examples or articles that might explain how to do this?

    Hmm...I hope this makes sense, a bit short of sleep.

    Thank you for any light you can shed on this!

  2. #2
    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)
    You can use something called faux columns to simulate this . Basically give the wrapper a background image to simulate. On the left part of the image, a fixed width color, and then make hte image really really wide and apply another color. Wide enough that the page will never get that wide and exceed.

    However, you can simply copy and make use of this example.

    http://www.pmob.co.uk/temp/2colfixedtest_4.htm

    Instead of using images, it give the left column via background: color, and the main content color via background as well.

    Does that suffice for you?

    This one is also basically the same. However it's not taking up the full width.

    http://www.pmob.co.uk/temp/2col_main.htm#

    The column order is messed up but that's an easy fix.
    Twitter-@Ryan_Reese09
    http://www.ryanreese.us -Always looking for web design/development work

  3. #3
    SitePoint Enthusiast
    Join Date
    Apr 2007
    Posts
    36
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks, Ryan, I appreciate the suggestion, but that doesn't seem to do quite what I need. I'm trying to load a control into the main content area, and it's not appearing full height (I'm seeing about 10px of it).

  4. #4
    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)
    Well we can do nothing without the code you have . Do you have a site where this is online? If not, give us at least the HTML/CSS to replicate your issue (and please be descriptive! I have problems understanding what people want on this forum ).
    Twitter-@Ryan_Reese09
    http://www.ryanreese.us -Always looking for web design/development work

  5. #5
    SitePoint Enthusiast
    Join Date
    Apr 2007
    Posts
    36
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Geez, Ryan, what happened to that wonderful neural interface Sitepoint was building? *cough, cough* Ahem. Sorry about that, should've posted some code at the start.

    Here's a jsFiddle that I hope will help clarify what I meant. This is Paul O'B's sticky footer and equalizing column code. Here, there's only a little bit of content, so the columns are squooshed up against the header. The client wants to see column 1 and column 2 full-height even when there's just a couple of lines of content, covering up the pink area.

    They want to be able to assign new background images to the column divs or load controls without adjusting the column height using Javascript.

    I hope this is a little more clear now.

  6. #6
    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)
    Twitter-@Ryan_Reese09
    http://www.ryanreese.us -Always looking for web design/development work

  7. #7
    SitePoint Enthusiast
    Join Date
    Apr 2007
    Posts
    36
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I'm sorry, I guess I still didn't explain this right. This was about getting the columns to display full height between the header and footer (for real, not faking with an image) even when there's little or no content there.

    I think I'll have to use Javascript to set the heights until I figure out something better. Thank you, though!

  8. #8
    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)
    The link I posted will do just htat, without images.
    Twitter-@Ryan_Reese09
    http://www.ryanreese.us -Always looking for web design/development work

  9. #9
    SitePoint Enthusiast
    Join Date
    Apr 2007
    Posts
    36
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    OK, one more try. I've mocked up a table-based layout that shows the exact effect I'd like to see. Compare this table-based version with the equalizing column version.

    See how the columns fill the area in the table-based version even when the content is nearly empty? The column divs in the equalizing column version collapse to the height of the content rather than extending to the full height of the viewport between the header and footer. I want to make the equalizing column version look and behave like the table-based version. No faux columns (for anyone new to the thread).

    Thank you for your patience, I really need to get this work.

  10. #10
    SitePoint Enthusiast
    Join Date
    Apr 2007
    Posts
    36
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Aha! This layout from Pixelsvsbytes looks like I can adapt it to do what I'd like. Adding the link in case someone else should have this same issue.

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

    That method you linked to will only work in IE8+ because it uses display:table. It is nothing new and that technique has been used for years where IE7 support wasn't required.

    Ryan has given you links to layouts that will accomplish what you want but you seemed to have mixed them a little

    Here's a full example that does what you want back to IE6 (with a little help) and uses very clean mark up.

    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 type="text/css">
    * {/* for demo only -  use a refined reset instead*/
    	margin:0;
    	padding:0
    }
    html, body {
    	height:100%;/* needed to base 100% height on something known*/
    	text-align:center;
    }
    #outer {
    	width:100%;
    	margin:auto;
    	min-height:100%;
    	margin-top:-40px;/*footer height - this drags the outer 40px up through the top of the monitor */
    	text-align:left;
    	clear:both;
    	background:orange;/* column one color one background */
    	position:relative;
    }
    #header {
    	background:red;
    	border-top:40px solid #fff; /* soak up negative margin and allows header to start at top of page*/
    	position:relative;
    	z-index:2;
    }
    #footer {/* footer now sits at bottom of window*/
    	background:blue;
    	width:100%;
    	margin:auto;
    	height:40px;/* must match negative margin of #outer */
    	clear:both;
    	position:relative;
    	z-index:2;
    }
    /*Opera Fix*/
    body:before {/* thanks to Maleika (Kohoutec)*/
    	content:"";
    	height:100%;
    	float:left;
    	width:0;
    	margin-top:-32767px;/* thank you Erik J - negate effect of float*/
    }
    h1, h2, p { padding:10px; }
    #outer:after {
    	clear:both;
    	display:block;
    	height:1%;
    	content:" ";
    }
    /* Start of Column CSS */
    #col1 {
    	float:left;
    	width:50%;
    	position:relative;
    	z-index:2;/* keep content as z-index 2*/
    	overflow:hidden;
    }
    #col2 {
    	z-index:2;
    	position:relative;
    	overflow:hidden;
    	zoom:1.0;
    }
    /* this provides the full column colour in IE8%*/
    #outer:before {
    	content:" ";
    	position:absolute;
    	left:0;
    	width:50%;
    	top:0;
    	right:0;
    	bottom:0;
    	background:yellow; /* column 2 background colour */
    	z-index:1;
    }
    /* ie6 and 7 */
    .after {
    zoom:expression( runtimeStyle.zoom=1, insertAdjacentHTML('beforeEnd', '<div class="after"></div>') );
    	position:absolute;
    	left:0;
    	width:50%;
    	top:0;
    	right:0;
    	bottom:0;
    	background:yellow; /* column 2 background colour */
    	z-index:1;
    	clear:both;
    }
    </style>
    <!--[if lt IE 7]>
    <style type="text/css">
    #outer { height:100% }
    .after{height:999em;top:auto}
    </style>
    <![endif]-->
    </head>
    <body>
    <div id="outer" class="after">
    		<div id="header">
    				<h1>Header</h1>
    		</div>
    		<div id="col1">Column 1; height is based on content, but I'd like this to stretch the distance between here and blue footer area regardless of content.</div>
    		<div id="col2">Column 2; Same as column 1.</div>
    </div>
    <div id="footer"> Sticky footer </div>
    </body>
    </html>
    The stacking levels are critical so take note of the z-index. The header and footer must be a fixed height as mentioned in the FAQ.

    If you don't need IE7 support then the display:table method is probably easier to maintain and I'd do it like this.

    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 type="text/css">
    * {/* for demo only -  use a refined reset instead*/
    	margin:0;
    	padding:0
    }
    html, body {
    	height:100%;/* needed to base 100% height on something known*/
    	text-align:center;
    	background:blue;/* match footer colour to mask rounding errors */
    }
    #outer {
    	width:100%;
    	margin:auto;
    	height:100%;
    	margin-top:-80px;/*footer + header height - this drags the outer 80px up through the top of the monitor */
    	text-align:left;
    	clear:both;
    	position:relative;
    	display:table;
    	float:left;/* needed for negative margin*/
    	z-index:1;
    }
    #header {
    	background:red;
    	position:relative;
    	z-index:2;
    	overflow:hidden;
    	height:40px;
    }
    #footer {/* footer now sits at bottom of window*/
    	background:blue;
    	width:100%;
    	margin:auto;
    	height:40px;
    	clear:both;
    	position:relative;
    	z-index:2;
    	overflow:hidden;
    }
    /*Opera Fix*/
    body:before {
    	content:"";
    	height:100%;
    	float:left;
    	width:0;
    	margin-top:-32767px;
    }
    /* Start of Column CSS */
    #col1, #col2 {
    	display:table-cell;
    	background:yellow; /* column 2 background colour */
    	width:50%;
    	overflow:hidden;
    	vertical-align:top;
    	padding-top:80px;/* match header and footer height */
    }
    #col2 { background:orange; /* column 2 background colour */ }
    </style>
    </head>
    <body>
    <div id="header">
    		<h1>Header</h1>
    </div>
    <div id="outer">
    		<div id="col1">Column 1; height is based on content, but I'd like this to stretch the distance between here and blue footer area regardless of content.</div>
    		<div id="col2"><p>Column2 </p><p>Column2 </p><p>Column2 </p><p>Column2 </p><p>Column2 </p><p>Column2 </p><p>Column2 </p><p>Column2 </p><p>Column2 </p><p>Column2 </p><p>Column2 </p><p>Column2 </p><p>Column2 </p><p>Column2 </p><p>Column2 </p></div>
    </div>
    <div id="footer"> Sticky footer </div>
    </body>
    </html>
    Of course you could then add some support for iE6 and 7 if you wanted using conditional comments.
    Last edited by Paul O'B; Apr 17, 2012 at 05:44.

  12. #12
    SitePoint Enthusiast
    Join Date
    Apr 2007
    Posts
    36
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    *facepalm* I totally missed the issues with IE7 support in the Pixelsvsbytes version, glad you saw that.

    I'll put the layout changes in this morning. Amazing how much difference even a little sleep makes...

    Thank you, Ryan and Paul!


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
  •