hi guys i am trying to create the following design:

 

 

i have followed the example from 17a here:

 

http://www.wickham43.net/firefoxbackground.php

 

but it is still not working as i need there to be 3 distinct separated columns.

If anyone can help i would really appreciate it.

 

Thanks in advance

Forgive me if this isn't the most efficient way, but I'd accomplish it using the following.

 

You can adjust widths, colours etc. as you wish, I was just picking random values.

 

<style type="text/css">
#holder{
   margin:30px auto 30px auto;
   width:726px;
   padding:0;
   background-color:#f1f1f1;
}
#holder .col{
float:left;
width:190px;
height:260px;
margin:0 5px 0 5px;
padding:20px;
border:1px solid #333;
}
.clear{
   clear:both;
}
#holder h1{
   margin:0;
   padding:0;
}
</style>

<div id="holder">
<div class="col"><h1>Title</h1></div>
<div class="col"><h1>Title2</h1></div>
<div class="col"><h1>Title3</h1></div>
<div class="clear"></div>
</div>

Wouldn't it be easier to do this with absolute positioning?

 

CSS:

#content1
styling and positioning (left: 10%; top: 20%;??)

#content2
styling and positioning (left: 40%; top: 20%;??)

#content3
styling and positioning (left: 70%; top: 20%;??)

 

HTML:

<div id="content1">
First box content
</div>

<div id="content2">
Second box content
</div>

<div id="content2">
Third box content
</div>

 

Note: set the width and height of each of them with %s, then it will cater for each resolution.

 

Sorry if this is not the most efficient way to do this, I'm still learning HTML / CSS myself (just trying getting the hang of the advanced stuff nowadays), but this is how I would do it. There is possibly a better solution, but not to what I know.

andyl's method has fixed column heights, so that would be easier to code and it looks as if that's what you need.

 

My examples have flexible height which makes it more difficult to get all column backgrounds the same when the text height is different.

 

If you have a fixed width but flexible height I would use item 18 here

http://www.wickham43.net/firefoxbackground.php

which is quite easy, you make a background image and repeat it vertically, otherwise you may have to use a more complicated method nesting divs to drag down the backgrounds to the height of the div with most content, which can't be expected to be suitable in all circumstances.

andyl's method has fixed column heights, so that would be easier to code and it looks as if that's what you need.

 

My examples have flexible height which makes it more difficult to get all column backgrounds the same when the text height is different.

 

If you have a fixed width but flexible height I would use item 18 here

http://www.wickham43.net/firefoxbackground.php

which is quite easy, you make a background image and repeat it vertically, otherwise you may have to use a more complicated method nesting divs to drag down the backgrounds to the height of the div with most content, which can't be expected to be suitable in all circumstances.

 

#18 that Wickham has suggested works very well. I use that method often, but it's quite tricky to apply a 'top and bottom' to the columns. If the 'tops and bottoms' aren't important, I'd suggest listening to Wickham over me

sorry i forgot to mention that i need fixed with adjustable height as content will vary.

 

Wickham if i did item 18 how would i get around creating the darker grey boarders that i need?

You can make my method use adjustable heights by using this CSS, but the columns will not level themselves:

 

CSS:

#holder{
   margin:30px auto 30px auto;
   width:726px;
   padding:0;
   background-color:#f1f1f1;
}
#holder .col{
float:left;
width:190px;
margin:0 5px 0 5px;
padding:20px;
border:1px solid #333;
}
.clear{
   clear:both;
}
#holder h1{
   margin:0;
   padding:0;
}

yeah i nee dthem to be all the same height. thanks anyway!

You could use example 18 in my previous link which repeat a background across all three columns down to the bottom of the longest column. Make an image say 5px high (or just 1px but it's difficult to see it properly) and across its width it would be 1px black for the left border, say 260px gray, 1px black, 15px white, 1px black, 260px gray, 1px black, 15px white, 1px black 260px gray and 1px black and use repeat-y on a container and place three divs over the top of it.

 

Make another image 1px high for the top and bottom which would be similar to the one above but have black instead of gray to form the top or bottom border of the columns, or make separate divs with a black top border instead of a wide image across all three columns.

 

The above is a bit time consuming to make the images but fairly easy to code, but any change of widths would mean making new images.

-------------------

This is the best I can do to make the three panels flexible in height and the same height based on item 19 in my previous link. It does validate and works in IE6, IE7, Firefox, Opera and Google.

 

http://www.wickham43.com/forumposts/ben100122.html

 

The three divs are based on item 19 in my link in an earlier post which uses position: absolute divs with a background image as backing to the three divs on top. The position: absolute divs have height: 100% and bottom and side borders while the three divs on top have the top and side borders so they are only the height they need but the position: absolute divs fill in behind to the height of the div with most content.

 

The top and bottom divs for other content needed a background in IE6 to cover the position: absolute background although modern browsers don't need it.

 

I used an image inside the divs 258*180 http://www.wickham43.com/forumposts/images/gray258x180.jpg which has a border.

 

It's complicated and I expect there's a better solution. My other examples that you tried don't work well with borders.

WOW, thanks Wickham, thats fantastic!

 

would it be possible to post the code for this please.

For some reason when i grab it from Firebug it does not display in the same way.

 

Thanks

 

Ben

Use View Source and copy/paste that code. There's no hidden PHP code and no stylesheet. I've just done that and saved a new filename and it showed the same,

still can not get this to work.

 

I tried to adapt what you did to my pages Wickham but i could not get it to work.

 

I have tried to adapt your example 18 but for some reason it will not clear the content.

would you be able to take a quick look please and let me know what i am doing wrong.

 

Thanks

 

http://www.benfaulkner.co.uk/test/indextest.html

Change:

<div class="fullwidth0pxhigh"> </div> 
<!--clearer div--> 

 

To:

<div style="clear:both;"><!--Clear divs--></div> 

 

Or, add this to your style sheet:

.fullwidth0pxhigh {
 clear:both;
}

thanks Andy!

No problem

If you ever have divs which are floating, you will (almost always) need to use a 'clear div' below them

 

Easiest and most common way way to use divs of this kind is;

 

Add this to your CSS file:

.clear{
 clear:both;
}

 

Then after any floating divs, just enter this:

<div class="clear"></div>

You've almost got it right.

 

Apart from adding the style .fullwidth0pxhigh {

clear:both;

}

 

you have two top borders to the columns which shows as a 2px thick line over part of the column top. You have:-

#column-boarder {
background-image: url(images/columns-top.jpg);
background-repeat: no-repeat;
height: 1px;
margin-right: 30px;
margin-left: 30px;
}

 

which is wide enough to cover all three columns so you don't need the background-image in the three columns:-

#column-boarder {
background-image: url(images/columns-top.jpg);
background-repeat: no-repeat;
height: 1px;
margin-right: 30px;
margin-left: 30px;
}
#column-one { 
/*background-image: url(images/columns-top.jpg);
background-repeat: no-repeat;*/
margin-right: 35px;
margin-left: 10px;
float: left;
width: 250px;
}
#column-two { 
/*background-image: url(images/columns-top.jpg);
background-repeat: no-repeat;*/
margin-right: 35px;
float: left;
width: 250px;
}
#column-three { 
/*background-image: url(images/columns-top.jpg);
background-repeat: no-repeat;*/
float: left;
width: 250px;
}
.fullwidth0pxhigh { clear: both; }