6 replies [Last post]
marleneayers
Offline
newbie
Last seen: 16 years 48 weeks ago
Joined: 2003-11-24
Posts: 5
Points: 0

According to the article (Faux Columns at www.alistapart.com) the following technique should produce 2 columns that extend to the bottom of the page by using a vertically tiled background image. I have tried playing with this for 2 days but cannot get it to work. The background square is a 200 pixel wide by 4pixel high light blue background. I cannot post a url because my web host server is having troubles.
<style type="text/css">
<!--
#left {
background: url(backgroundsquare.gif) repeat-y;
position: absolute;
width: 200px;
left: 10px;
top: 10px;
}
#right {
background: url(backgroundsquare.gif) repeat-y;
float: right;
margin: 0px;
width: 200px;
top: 10px;
position: relative;
}
body {
margin: 0px;
padding: 0px;
background: #FFFFCC;
}
-->
</style>
</head>

<body>
<div id="left">
This is the left column
</div>
<div id="right">
This is the right column
</div>
</body>
</html>

Daybreak_0
Offline
Enthusiast
Sydney, Australia
Last seen: 16 years 49 weeks ago
Sydney, Australia
Timezone: GMT+10
Joined: 2003-11-15
Posts: 389
Points: 0

Using vertically tiled background image not working

Marlene

Not having used this I am not sure why it does not work.

I did come across another site that does the same thing
http://www.pixy.cz/blogg/clanky/css-3col-layout/

Compare the different code and see if anything is missing.

Sorry could not be more helpful.

Regards
Day

The only way to learn is to do it yourself

marleneayers
Offline
newbie
Last seen: 16 years 48 weeks ago
Joined: 2003-11-24
Posts: 5
Points: 0

Still not working

Thank you for responding. I actually went to the patsi site yesterday and pasted the code from her source into a brand new HTML document. Although her page looks correct, it did not behave correctly with her code. I just upgraded to Panther and Dreamweaver MX 2004. Could that be a problem (although I also pasted into BBEDIT with the same results)

Daybreak_0
Offline
Enthusiast
Sydney, Australia
Last seen: 16 years 49 weeks ago
Sydney, Australia
Timezone: GMT+10
Joined: 2003-11-15
Posts: 389
Points: 0

Using vertically tiled background image not working

Well if her page is displaying properly then it must be correct.

hmmm from what you are saying you have checked this out with different editors that allow preview, and it sound like none are adding any code.

Have you also checked it out with different browsers? are you using the same doc type? Can you provide us with a link so we can see it?

Regards
Day

Edited: I had another look at the patsy site - it actually is not a good example as it depends on the length of the centre column.

The only way to learn is to do it yourself

Daybreak_0
Offline
Enthusiast
Sydney, Australia
Last seen: 16 years 49 weeks ago
Sydney, Australia
Timezone: GMT+10
Joined: 2003-11-15
Posts: 389
Points: 0

Using vertically tiled background image not working

The only way to learn is to do it yourself

Daybreak_0
Offline
Enthusiast
Sydney, Australia
Last seen: 16 years 49 weeks ago
Sydney, Australia
Timezone: GMT+10
Joined: 2003-11-15
Posts: 389
Points: 0

Using vertically tiled background image not working

Ok your problem is you have no definition of height for the right wrapper to work off.

What I mean is, both patsy and faux fixes rely on another column to be stretched based on content, and then the second column without enough content will also stretch.

In your page, the left sidebar does go all the way to the bottom, but as it is absolutely positioned you have taken it out of the html flow and it will not affect the right hand column.

Note - both fixes are not fixes to make the columns go to the bottom of the page, just to keep them even.

Regards
Day

The only way to learn is to do it yourself

skyrocket
skyrocket's picture
Offline
Enthusiast
Sydney - Australia
Last seen: 16 years 44 weeks ago
Sydney - Australia
Timezone: GMT+10
Joined: 2003-12-18
Posts: 71
Points: 0

Using vertically tiled background image not working

I have struggled with this concept for a long time too. I came to the conclusion that it was my mindset still thinking along the lines of how tables based designs work. You have to be like Apple and think differently with CSS as it has one big 'flaw' in that it can't replicate a tables based layout as you are trying to do (without a whole heap of tiresome hacks). I have briefly read the CSS 3 specs and they are trying their best to fix this. This is why a lot of CSS based sites tend to look the same IMO. Are you using coloured backgrounds for your columns? If not, you can make the columns look the same length using float: left and float: right as long as the centre column has the most content.

PAUL - SkyRocket Design Co
web design sydney northern beaches