2-column layout; right column fixed; left colum 100%

After going through a number of examples and trying to modify them to get what should be a simple layout, I’ve just about given up. The layouts I’ve found are based on percentage widths or fixed widths…not both.

Here’s what I have so far. Note that it does not come close to working correctly in opera 9.26, FF2 or IE6

<!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=iso-8859-1">
<title></title>
<style type="text/css">
/* resets */
html, body, div, span, h1, h2, h3, h4, h5, h6, p, pre, form, fieldset, input, select, textarea, button, label, legend, p, blockquote, code, caption, dl, dt, dd, ol, ul, li, table, th, tr, td, tbody, tfoot, strong, em, b, i, u, strike, abbr, acronymn, address {
	margin: 0px;
	padding: 0px;
	border: 0px;
	outline: 0px;
	vertical-align: baseline;
	background: transparent;
}
body {
	font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
	font-size: 100.01%; /* ie font size bug */
	color: black;
}
p { margin: .2em 0 .8em 0; }
/*resets */


body {
	background: silver;
}
#header {
	background: red;
	height: 90px;
	clear: both;
}

#footer {
	background: green;
	height: 90px;
	clear: both;
}

#main { }

#maincol {
	background: yellow;
	position: relative;
	float: left;
	margin: 0px 275px 0px 0px;
	width: 100%;
	height: 1%;
}

#rightcol {
	background: orange;
	position: relative;
	float: right;
	width: 275px;
}

#maincol #maincol_pad {
	padding: 12px;
}
#rightcol #rightcol_pad {
	padding: 12px 12px 0px 12px;
}

#content {
	background: white;
}


/* right column pods */
#rightcol .pod {
	background: white;
	margin-bottom: 12px;
}
#rightcol .pod .pod_title {
	font-weight: bold;
	color: blue;
}
#rightcol .pod .pod_content {
	padding: 4px 4px 4px 4px;
}
/* right column pods */
</style>
</head>

<body>
<div id="header"><p>header</p></div>

<div id="main">
	<div id="maincol">
		<div class="maincol_pad">
			<div id="content">
				<p>content</p>
				<p>content</p>
			</div>
		</div>
	</div>
	<div id="rightcol">
		<div id="rightcol_pad">
			<div class="pod">
				<div class="pod_title">Title</div>
				<div class="pod_content">pod content</div>
			</div>
			<div class="pod">
				<div class="pod_title">Title</div>
				<div class="pod_content">pod content</div>
			</div>
			<div class="pod">
				<div class="pod_title">Title</div>
				<div class="pod_content">pod content</div>
			</div>
		</div>
	</div>
</div>

<div id="footer"><p>footer</p></div>
</body>
</html>

The right column is 275px and the left column is supposed to fill in the rest of the space.

#maincol_pad and #rightcol_pad are supposed to be fixes for the IE box model issues.

After spending hours on this, I’m sorely tempted to go back to using tables. They seemed to be so much easier and reliable… :frowning:

Any fix suggestions or links to working examples would be greatly appreciated :slight_smile:

Hi FF,

I think you might be able to find what your looking for at Paul’s site, if it is not exactly what you want the demos can usually be modified to suit your needs.

A lot of his demos are 100% height.

This one has a fixed column on the right and fully liquid left’ it just needs a header.

This one has a header, a fixed column on the left and fully liquid on the right. You could swap the columns on this one to get it fixed on the right.

Neither of those layouts require faux images, the columns are lapped over by 1px to push the footer down.

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

The footer is fixed at a certain height. Is there a way to eliminate that without destroying the rest of the layout?

Hi again FF,
I just took this Two-Column demo from Paul’s site and modified it to a fixed right column and liquid left. The layout is now 100% wide but there is no height set on it.

There’s no need to go back to tables for site layout. :slight_smile:

See if this is close to what you are wanting


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Two Equal Columns ~ No Faux Image</title>
<meta http-equiv="Content-Type" content="text/html; charset=us-ascii" />
<style type="text/css">
<!--
* {margin:0; padding:0;}
body {
    margin:0;
    padding:0;
    background:#dcdcdc;
    color:#000;
    text-align:center;/*centre for ie5 */
}
#container {
    background:#D1DCE9;/*this colour will be right column colour */
    margin:auto;/* centre for compliant browsers*/
    text-align:left;
    border:1px solid #000;
}
#header {
    height:5em;
    border-bottom:1px solid #000;
    background:#ffffCC;
    text-align:center;
}
#navbar {
    height: 1.5em;
    background:teal;
    text-align:center;
    border-bottom: 1px solid black;
}
#right {
    margin-right:-269px;/*must be 1 pixel less than width */
    float:right;
    width:270px;/* this width is the same as the margin on #middle */
    position:relative;
    right:-2px;/* line it up exactly without losing pressure on footer*/
    
}
#right p,h3,h4 {padding:5px 5px 10px 15px;}

#inner p,h2,h3,h4 {padding:5px 10px 10px 15px;}
#main {
    border-right:1px solid #000;
    background:#6FACD0;/* background colour of left column */
    margin-right:270px;/*this is the space for the right column */
    padding: 5px;
}
#inner{  
width:100%;
float:left; 
margin-right:-1px
}/* contain cleared elements from clearing other floats*/

#footer {
    clear:both;
    border-top:1px solid #000;
    height:2em;
    background:#ffffCC;
    text-align:center;
}
h1,h2,h3,p {margin-top:0}

/* clear without structural mark-up from PIE website*/
.clearfix:after {
    content:".";
    display:block;
    height:0;
    clear:both;
    visibility:hidden;
}
.clearfix {
    display:inline-block;
}

  /* mac hide \\*/
* html .clearfix {height: 1%;}
.clearfix {display: block;}
/* End hide */
/* do not change or amalgamate clearfix styles*/

-->
</style>
</head>
<body>
    <div id="container">
        <div id="header">
            <h2>Two Equal Columns ~ No Faux Image</h2>
            <h3>Liquid Left Column ~ Fixed Right</h3>
        </div>
        <div id="navbar">
            <h4>navigation here</h4>
        </div>
            <div id="main" class="clearfix">
                <div id="right">
                    <h4>Right Column</h4>
                    <p>Lorem ipsum dolor sit amet, consectetuer
                    adipiscing elit. In quis erat. Nulla auctor
                    consectetuer erat. Sed est tellus, laoreet et,
                    faucibus et, cursus ut, lectus.</p> 
                    <p>Lorem ipsum dolor sit amet, consectetuer
                    adipiscing elit. In quis erat. Nulla auctor
                    consectetuer erat. Sed est tellus, laoreet et,
                    faucibus et, cursus ut, lectus.</p>
                </div>
                <div id="inner">
                    <h3>Main Content</h3>
                    <p>Two column layout with borders and 2 column colors (no background
                    images required). Either column can be the longest and the columns
                    will equalize.</p>
                    <p style="clear: both;">
                    "There is nothing special about this demo as similar techniques have 
                    been used before, however they are not usually integrated into one example. 
                    The secret to this demo is the left column which is floated negatively
                    from the Main container. If you float them completely in the gaps at
                    the side then they don't clear the footer. However if you leave them
                    overlapping the center content by 1 pixel then the footer is pushed
                    down as required. Or you can float them completely to the side and just
                    add some padding bottom to the columns to clear the footer."</p>
                    <h4>Filler Text</h4>
                    <p>Nulla a lacus. Nulla facilisi. Lorem ipsum dolor sit amet,
                    consectetuer adipiscing elit. Fusce pulvinar lobortis purus. Cum sociis
                    natoque penatibus et magnis dis parturient montes, nascetur ridiculus
                    mus. Donec semper ipsum et urna. Ut consequat neque vitae felis.
                    Suspendisse dapibus, magna quis pulvinar laoreet, dolor neque lacinia
                    arcu, et luctus mi erat vestibulum sem. Mauris faucibus iaculis lacus.
                    Aliquam nec ante in quam sollicitudin congue. Quisque congue egestas
                    elit. Quisque viverra. Donec feugiat elementum est. Etiam vel lorem.</p>
                </div>
            </div>
        <div id="footer">
            <h4>Footer | <a href=
            "http://www.pmob.co.uk/temp/3colfixedtest_4.htm">Back to Main
            Demo</a> | Footer</h4>
        </div>
    </div>
</body>
</html>

I just tried to put a header on the one you linked to, it was being kinda stubborn.

The code I just gave you does not have a sticky footer on it, but one could be put on it easily though. That is if you want the footer to stay at the bottom of the viewport when there’s not enough content to get it there.

Here’s two more layouts with 250px fixed right columns and fluid left.

This one works really well, it has the header, navbar, and footer sized with em’s.

This one works good too, but I can’t seem to give padding to <h> and <p> tags on individual divs. They can only be set through the #main div for some reason. It needs some more work done on it that area. It was a modification of Pauls 25% right column.

#main p,h2,h3,h4 {padding:10px 15px 5px 15px;}