How can the centre column of a css page layout expand rightwards if right-hand column is empty?

Question

I am trying to convert a three-column web-page layout from HTML tables to CSS, but there is one characteristic which I have so far been unable to replicate.

The HTML solution allows a photograph to be placed by php into a column to the right of the main text, but in the absence of a photograph, that column collapses, and the main text content extends up to a final right-hand 'spacing' column to maintain a right-hand margin.

So far, the only way I have found of achieving the three-column array in CSS is to use a container of fixed width, and to use fixed width styles for the div tags defining the columns, together with floats. The basis of the HTML code is:

<div class="container">
<div class="title_strip"><img src="headline_text.png"></div>
<div class="hdr_img_space"><img src="leaf_header.jpg"></div>
<div class="lh_col"><p align="center">ADMINISTRATION<br/>[WEBMASTER]</p></div>
<div class="main_content"><p>This is the location for the main administrative page
content, and will hopefully be able to contain all the necessary text, even if it 
over-runs</p></div>
<div class="rh_image"><img class="rh" src="photo.jpg"></div>
<br style="clear: both"></div>

and the core CSS styling is:

body {
margin: 0px;
padding: 0px;
background-color: #200542;
}
p {color: #CCCCCC; font-family: arial, sans-serif; font-size: 14pt; line-height:1.4em
}
.container {
width: 1000px;
min-height: 600px;
max-height: 2200px;
margin: 8px auto 0 auto;
background: #333333;
padding: 0px;
}
.main_content { 
float: left;
min-height: 600px;
max-height: 2000px;
margin-left: 0px;
width: 516px;
padding-top: 20px;
background: #333333;
}
.lh_col {
float: left;
width: 200px;
min-height: 600px;
max-height: 2000px;
padding-top: 20px;
padding-left: 20px;
padding-right: 24px;
margin: 0;
background: #333333;
}
.rh_image { 
width: 200px;
min-height: 620px;
max-height: 2000px;
float: right;
padding-top 20px;
padding-left: 20px;
padding-right: 20px;
background: #333333;
}
img {
display: block;
}
.rh {
margin-top: 40px;
}

Because the columns are fixed width, the removal of the image tag leaves a wide gap to the right of the main text, and none of the suggestions I have found in web searches shows a satisfactory solution - generally the collapse of the right-hand column leaves the text layout in the centre column unchanged, despite the apparent availability of more space.

I want to avoid solutions which would give problems with browser compatibility - is there any way of achieving what I want in CSS, or shall I have to persist with the now deprecated use of the HTML table tag?

Peter N.

Answer 1

If I understand correctly, what you need is if there is no image in the right column, your main content should be without "gap", or complete layout should look like 2-column page, if so try this:

first thing is to move your

<div class="rh_image"> before <div class="main_content">

next just adjust css like this:

.main_content {
   min-height: 600px;
   max-height: 2000px;
   margin-left: 0px;
   padding-top: 20px;
   background: #333333;
 }

it should do the trick

Sorry I just saw your fiddle

here's the link with the complete code: http://jsfiddle.net/darkosss/3deMj/