Folks,
In a three-column liquid layout, I am trying to place different background images for my left and right columns. I am able to get the same image for both columns but have not succeeded in getting different left and right background images to display.
Can someone suggest how to achieve this please?
Thanks.
Hi polygon, Welcome to SitePoint! 
If your site is a fixed width this could be done easily by combining the left and right column BG images into one image that is repeat-y on your main wrapping div.
http://www.pmob.co.uk/temp/three-equal-divs-bg.htm
You can also use AP Faux columns which allow you to use different BG images for each column.
In a three-column liquid layout,
Opps, sorry. I just noticed that it is a liquid site.
You could set the left BG image on your main wrapping div and then set another BG image on the right column using the AP faux column method.
Here is an example of a Fluid 3-Column using the AP Faux method.
If you view the page source you will see that the BG colors/images can be changed.
/*=== These #faux divs give full height color and border to the side columns ===*/
#faux-lt,#faux-rt {
position:absolute;
bottom:0;
width:180px;
height:100%;
[B]background:blue;[/B]
z-index:0;
}
#faux-lt{left:0;border-right:1px solid #000;}
[B]#faux-rt[/B]{right:0;border-left:1px solid #000;[B]background:red[/B]}
Hi,
Are you talking about equal height columns?
Otherwise it’s straight forward and you just apply the background image to the column in question.
If you are talking about equal height columns in a fluid layout then it’s a little more complicated.
You could use my absolute overlay method shown here to accomplish it. It does suffer from a 1px jog in IE but then so would any fluid layout in IE.
ray beat me
That’s okay, I had to edit to my first post after I realized it was a liquid layout.
My thanks to Rayzur and Paul O’B.
I have implemented a design where I have been using Charles Wyke-Smith’s three column fluid layout given in his “Stylin’ with CSS” book.
The relevant minimal file may be viewed at:
w3boutique dot swanlotus dot com/minimal_examples/
I have tried without much success to modify the above design to incorporate the suggestions above. Can it be done, or must I scrap that design and start again?
Many thanks.
Hi,
The design you are using doesn’t really cater for equal columns. It works on a premise that the middle column is always going to be the longest which is a very bad premise to start with as you can never tell how long columns may be on different pages.
The site is broken in IE6 and uses a number of false assumptions. Ie6 and 7 do not understand inherit and therefore in places where you have stated width:inherit on floated elements IE7 and under will collapse to width:auto.
You have split the nav into ten equal sections of 10% but this will be rounded up in IE and cause the nav to break on every odd pixel width of the browser. You would need to set a negative right margin on the last element to avoid this float drop.
If you are happy to always have the middle column longest then the code could be adjusted to allow full column colours by re-arranging a bit as follows.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<title>Minimal Example for different left and right backgrounds</title>
<meta name="author" content="">
<meta name="copyright" content="© 2010">
<meta name="description" content="">
<meta name="keywords" content="">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<meta http-equiv="content-style-type" content="text/css">
<script type="text/javascript" src="js/minmax.js"></script>
<link media="screen" rel="stylesheet" type="text/css" href="css/text-and-colours.css">
<link media="screen" rel="stylesheet" type="text/css" href="css/layout.css">
<link media="screen" rel="stylesheet" type="text/css" href="css/navigation.css">
<style type="text/css">
/*
text-and-colours.css
minimal example file following Charles Wyke-Smith's (Stylin' CSS)
fluid three-column layout
*/
/* Setting all default browser margins and paddings to 0 - very bad move especially for form elements*/
* {
margin: 0;
padding: 0;
}
body {
background-color: navy;
font-size: 1em;
font-family: Arial, Verdana, sans-serif;
}
/* Setting all important elements' font-size */
h1 {
font-size: 2em;
}
h2 {
font-size: 1.5em;
line-height: 2;
color: #191970;
}
h3 {
font-size: 1.25em;
line-height: 1.5;
}
h4 {
font-size: 1.125em;
}
h5 {
font-size: 1em;
}
h6 {
font-size: 0.875em;
}
p {
font-size: 14px;
line-height: 1.5;
}
ul {
font-size: 14px;
}
#header {
color: black;
background-color: blue;
}
#tagline {
color: #191970;
}
#two_col_wrap {
color: inherit;
background:orange;
}
#left_column_inner {
color: white;
}
#content {
color: #191970;
background-color: transparent;
}
#content_inner {
background-color: #FFEFD5;
color: black;
}
#right_column_inner {
font-size: 20px;
color: black;
}
#footer_inner {
background-color: #15486E;
color: white;
font-size: 10px;
font-weight: bold;
text-align: center;
}
/*
layout.css
minimal example file following Charles Wyke-Smith's (Stylin' CSS)
fluid three-column layout
*/
#main_wrapper {
min-width: 900px;
max-width: 1050px;
margin-left: auto;
margin-right: auto;
text-align: left;
}
#header {
width: 100%;
}
#header_inner {
padding: 2px;
}
#tagline {
padding: 20px;
text-align: center;
}
#two_col_wrap {
float: left;
width: 100%;
display: inline;
margin-right: -200px;
}
#left_column {
float: left;
width: 200px;
display: inline;
}
#left_column_inner {
padding:1px 10px 1px 15px;
}
#left_column_inner li {
list-style-type: none;
margin-bottom: 10px;
text-align: left;
}
.left_column_heading {
text-align: left;
padding: 10px;
}
#right_column_inner {
padding:1px 10px 1px 15px;
}
#right_column_inner li {
list-style-type: none;
margin-bottom: 10px;
text-align: left;
}
.right_column_heading {
padding: 10px;
text-align: left;
}
#content {
width: auto;
margin-left: 200px;
}
#content_inner {
padding-top: 10px;
padding-left: 20px;
padding-right: 20px;
padding-bottom: 20px;
}
p {
margin-top: 0.5em;
margin-bottom: 0.5em;
}
#content_inner ul {
padding-left: 30px;
}
#content_inner ul li {
line-height: 1.5;
}
#right_column {
float: left;
position: relative;
width: 200px;
overflow: hidden;
}
#right_column_inner {
position: relative;
padding-right: 0px;
padding: 10px;
width: 180px;
}
#footer {
width: 100%;
clear:both;
}
#footer_inner {
padding-top: 0.5em;
padding-bottom: 0.5em;
width: inherit;/* ie<7 doesn't understand inherit and this will collapse*/
width:100%;
}
/*
navigation.css
minimal example file following Charles Wyke-Smith's (Stylin' CSS)
fluid three-column layout
*/
/* Navigation nav_inner mechanics */
#nav #nav_inner {
width: 100%;
}
#nav_inner * {
margin: 0;
padding: 0;
}
#nav_inner {
float: left;
}
#nav_inner ul {
float: left;
width: 100%; /* Setting width so that ul fills entire width of nav_inner */
}
/* All menu items are evenly spaced out on the navigation bar by giving equal widths */
#nav_inner li {
float: left;
width: 10%; /* 100% divided by 10 menu items so 10% space per item - which will equal about 101% in IE and drop down*/
text-align: center;
}
* html #nav_inner li.last {
margin-right:-1%
}
#nav_inner li.pad_right {
padding-right: 10px;
}
#nav_inner a {
padding: 0.3em 6px;
display: block;
}
/* Text and colors of navigation nav_inner */
#nav #nav_inner {
background-color: #15486E;
}
#nav_inner * {
font-size: 14px;
}
#nav_inner a {
background-color: #15486E;
color: white;
text-decoration: none;
}
#nav_inner a:hover {
color: black;
font-weight: bold;
background-color: orange;
}
#nav_inner li {
list-style-type: none;
}
.inner {
margin-right:200px;
background:green;
padding:0 0 1px;
}
</style>
</head>
<body>
<div id="main_wrapper">
<div id="header">
<div id="header_inner">
<h1 id="tagline">Header Area</h1>
</div>
</div>
<div id="nav">
<div id="nav_inner">
<ul>
<li><a href="">Link 1</a></li>
<li><a href="">Link 2</a></li>
<li><a href="">Link 3</a></li>
<li><a href="">Link 4</a></li>
<li><a href="">Link 5</a></li>
<li><a href="">Link 6</a></li>
<li><a href="">Link 7</a></li>
<li><a href="">Link 8</a></li>
<li><a href="">Link 9</a></li>
<li class="last"><a href="">Link 10</a></li>
</ul>
</div>
</div>
<div id="two_col_wrap">
<div class="inner">
<div id="left_column">
<div id="left_column_inner">
<h5 class="left_column_heading">Left Panel</h5>
<ul>
<li>List Item One</li>
<li>List Item Two</li>
<li>List Item Three</li>
<li>List Item Four</li>
</ul>
</div>
</div>
<div id="content">
<div id="content_inner">
<h2 id="some_text">Some Text</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut commodo pretium tortor sed convallis. Morbi condimentum imperdiet diam, in auctor eros sagittis non. Suspendisse ut est id magna consequat fermentum a sollicitudin metus. Quisque vitae turpis risus. Vivamus elit nunc, dapibus ut mollis et, dignissim sit amet tortor. Proin ac dui eget odio hendrerit sollicitudin a a sem. Nulla ut urna a purus blandit pellentesque et at ligula.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut commodo pretium tortor sed convallis. Morbi condimentum imperdiet diam, in auctor eros sagittis non. Suspendisse ut est id magna consequat fermentum a sollicitudin metus. Quisque vitae turpis risus. Vivamus elit nunc, dapibus ut mollis et, dignissim sit amet tortor. Proin ac dui eget odio hendrerit sollicitudin a a sem. Nulla ut urna a purus blandit pellentesque et at ligula.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut commodo pretium tortor sed convallis. Morbi condimentum imperdiet diam, in auctor eros sagittis non. Suspendisse ut est id magna consequat fermentum a sollicitudin metus. Quisque vitae turpis risus. Vivamus elit nunc, dapibus ut mollis et, dignissim sit amet tortor. Proin ac dui eget odio hendrerit sollicitudin a a sem. Nulla ut urna a purus blandit pellentesque et at ligula.</p>
<h2 id="some_more_text">Some More Text</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut commodo pretium tortor sed convallis. Morbi condimentum imperdiet diam, in auctor eros sagittis non. Suspendisse ut est id magna consequat fermentum a sollicitudin metus. Quisque vitae turpis risus. Vivamus elit nunc, dapibus ut mollis et, dignissim sit amet tortor. Proin ac dui eget odio hendrerit sollicitudin a a sem. Nulla ut urna a purus blandit pellentesque et at ligula.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut commodo pretium tortor sed convallis. Morbi condimentum imperdiet diam, in auctor eros sagittis non. Suspendisse ut est id magna consequat fermentum a sollicitudin metus. Quisque vitae turpis risus. Vivamus elit nunc, dapibus ut mollis et, dignissim sit amet tortor. Proin ac dui eget odio hendrerit sollicitudin a a sem. Nulla ut urna a purus blandit pellentesque et at ligula.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut commodo pretium tortor sed convallis. Morbi condimentum imperdiet diam, in auctor eros sagittis non. Suspendisse ut est id magna consequat fermentum a sollicitudin metus. Quisque vitae turpis risus. Vivamus elit nunc, dapibus ut mollis et, dignissim sit amet tortor. Proin ac dui eget odio hendrerit sollicitudin a a sem. Nulla ut urna a purus blandit pellentesque et at ligula.</p>
</div>
</div>
</div>
</div>
<div id="right_column">
<div id="right_column_inner">
<h5 class="right_column_heading">Right Panel</h5>
<ul>
<li>List Item 1</li>
<li>List Item 2</li>
<li>List Item 3</li>
<li>List Item 4</li>
<li>List Item 5</li>
<li>List Item 6</li>
<li>List Item 7</li>
<li>List Item 8</li>
<li>List Item 9</li>
<li>List Item 10</li>
<li>List Item 1</li>
<li>List Item 2</li>
<li>List Item 3</li>
<li>List Item 4</li>
<li>List Item 5</li>
<li>List Item 6</li>
<li>List Item 7</li>
<li>List Item 8</li>
<li>List Item 9</li>
<li>List Item 10</li>
</ul>
</div>
</div>
<div id="footer">
<div id="footer_inner">
<p>Footer</p>
</div>
</div>
</div>
</body>
</html>
However that is reliant on the middle column always being longest.
I also take issue with the way the styles have been grouped and it made debugging a nightmare as I had to keep switching up and down the stylesheet to find the same element. This is a maintenance nightmare and makes understanding the code so much harder.
When you debug as many sites as we do in the forum you want to go to an element and find all the styles that apply so you can figure out what they do and make changes in one place. Searching up and down for multiple rules took me ages to work out what this simple layout was actually doing. However that is a personal thing and other may like this approach.
The inner elements on your columns are unnecessary in most cases as you are just using them for padding which could have been added to the parent from the start and made things a lot cleaner.
You don’t actually have a 3 fluid column layout anyway - you have 3 column layout with a fluid middle column only. Therefore you could make this layout much simpler using background images on a couple of nested divs.
If you apply a repeating image on the main wrapper for the left column and then a repeating image on the inner element for the right column (repeated on the right side) then you will have your two equal columns and the background colour of the main wrapper will supply the colour for the middle column. You just then arrange your 3 columns inside the inner wrapper as required.
It may however be easier for you to use one of the layouts that we already mentioned.
Hope it helps anyway:)
Hi,
I’ve made a simpler example that matches the widths you wanted and you can find it here.
The left and right columns are images on the two outer wrappers.
The layout is in source order as per your original but much simplified.
All the code within the conditional comments is for IE6 only so you can remove it all if you don’t want to support iE6.
Hope it makes more sense for you
Thank you Paul O’B for the wealth of knowledge and advice in your replies. I will use the CSS design you have suggested in lieu of what I am using.
In future, when I post minimal examples in this forum, I will use a unitary css file. Thank you for alerting me to it. I am still trying to find my own css “stye” and am therefore experimenting with various approaches. Unlike python, which I am also learning, there is more flexibility in the way CSS files are organized.
Cheers!