CSS Columns - Need Help Please [Archive]

JustinRiney

08-12-2008, 02:45 AM

Hello,
I'm trying set up a very basic one column fixed layout using a CS3 template in Dreamweaver. I want a solid white column with a blue background on both sides, but the one column format won't extend all the way down the page; it allows the background to connect underneath at the bottom. How do I get the column to extend from top to bottom no matter the screen size? You can use a liquid format for the width; there must be a liquid format for the height, right?

For example, pick any fixed column site, such as Apple.com, and you'll notice the page ends after their footer. I'm setting up a temp "Coming Soon" page, so I will not have a footer, but I want the same effect. How does the site determine where to end the page height (not column height; page height)?

Any help would be much appreciated. All I want is a fixed column size that extends from top to bottom. Thanks.

hewligan

08-12-2008, 03:42 AM

Depends. Do you mean a column that extends to the bottom of the page even if the content is less than the height of the page? That's actually quite tricky. On the other hand, if you don't need to worry about the not enough content problem, is this what you mean:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<style type="text/css">

</style>
</head>

<body>
<div id="column">
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec ac nisl ut augue eleifend accumsan. Vivamus feugiat sem ut dui. Curabitur feugiat condimentum diam. Curabitur mollis, leo non tristique commodo, neque sem adipiscing purus, nec molestie est lectus ut purus. Vivamus dignissim dolor eget odio. Integer purus. Mauris tincidunt dictum sem. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Mauris quam. Nulla a augue ac justo pharetra condimentum. Curabitur pharetra tortor quis pede varius porttitor. Proin at nunc sed turpis adipiscing vestibulum. Maecenas faucibus. Nulla facilisi. </p>
<p>Cras pulvinar ipsum porta quam. Etiam elementum. Vestibulum a ligula sed turpis mollis ultrices. Donec ultricies justo vitae justo cursus vestibulum. In aliquam sem a felis malesuada imperdiet. *** sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Maecenas a justo ut sapien semper pellentesque. Ut lorem arcu, aliquam at, pretium ac, ultrices ac, mi. In ipsum felis, bibendum et, vulputate in, laoreet quis, est. Duis tempus viverra purus. Suspendisse potenti. Nam rutrum fringilla felis. Donec mollis felis ac ante. Donec libero. Fusce scelerisque. Nullam commodo justo ut erat. Sed arcu nibh, dictum vel, iaculis eget, condimentum eu, mauris. Fusce ullamcorper. Curabitur lacus risus, semper et, euismod nec, vehicula ac, dui. Nam in tortor. </p>
<p>Aliquam tincidunt urna eget nulla. Suspendisse adipiscing feugiat eros. Sed porttitor nisi ut diam. Suspendisse eleifend, erat et tempor lobortis, pede orci dapibus enim, ac fermentum turpis felis sit amet elit. Aenean varius pede vulputate ante. Pellentesque fermentum enim eu lorem. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Praesent dui justo, congue a, pellentesque quis, auctor et, nibh. Ut ante. Proin quis nulla. </p>
<p>Etiam lacus. Sed auctor neque ut dui. Integer elit nibh, suscipit id, adipiscing id, rhoncus a, arcu. Nullam velit purus, mattis et, egestas sed, viverra ut, nisl. Quisque mauris. Curabitur dapibus magna id odio. Mauris tincidunt. Nullam eget magna. Donec varius fringilla quam. Fusce pellentesque iaculis est. Ut nibh. Curabitur sollicitudin. Maecenas euismod, dui et venenatis tempus, massa massa accumsan risus, id semper mi diam et massa. Vestibulum a ante ac dolor molestie vestibulum. </p>
<p>Aenean lacus arcu, iaculis eu, iaculis id, laoreet at, odio. Etiam at risus eget diam mollis venenatis. Praesent vulputate ante. Aenean pharetra ante eu elit. Etiam risus. Pellentesque ante. Aenean ultricies nunc nec turpis. Cras tortor massa, ullamcorper eu, pulvinar et, lacinia eu, massa. Donec suscipit dui eget eros. Curabitur nunc urna, commodo ut, aliquam id, gravida et, pede. </p>
</div>
</body>
</html>

tZ

08-12-2008, 03:48 AM

You will need to use a faux column technique or javascript.

The problem that your always going to run into is that individual columns determine their height based on the content within. They will not expand to the size of the largest content area. The way to "fake" this is to use an image on the wrapper for all the columns or use javascript change the heights after the browser has rendered the page.

html

<div id="main-wrapper">
<div class="left column"></div>
<div class="right column"></div>
</div>

CSS

.column.left {
width: 180px;
float:left;
}

.column.right {
margin-left: 180px;
}

By default using this example the height of .column.left and .column.right are independent of each other. They determine their height based on the content they contain. However, main-wrapper will determine its height based on its content also. Therefore, you can create an image that is the width of .left.column to create a "fake" column.

CSS

.column.left {
width: 180px;
float:left;
}

.column.right {
margin-left: 180px;
}

#main-wrapper {
background: #FFFFFF url(/img.gif) repeat-y top left;
}

This the simplest method. The other method becomes quit involved and involves javascript.

snaxnz

08-12-2008, 03:53 AM

yeah faux column technique seconded...

might pay to read this too: A List Apart: Articles: Faux Absolute Positioning (http://www.alistapart.com/articles/fauxabsolutepositioning) for more complex layouts, but might help anyway

tZ

08-12-2008, 04:08 AM

Eric Sol's technique is great if you have want to to create a table like structure with divs or a list. However, you would still run into the same problem. That technique doesn't solve this problem. You would still need to use a image in repetition or javascript to create the column.

JustinRiney

08-12-2008, 01:43 PM

You will need to use a faux column technique or javascript.

The problem that your always going to run into is that individual columns determine their height based on the content within. They will not expand to the size of the largest content area. The way to "fake" this is to use an image on the wrapper for all the columns or use javascript change the heights after the browser has rendered the page.

html

<div id="main-wrapper">
<div class="left column"></div>
<div class="right column"></div>
</div>

CSS

.column.left {
width: 180px;
float:left;
}

.column.right {
margin-left: 180px;
}

By default using this example the height of .column.left and .column.right are independent of each other. They determine their height based on the content they contain. However, main-wrapper will determine its height based on its content also. Therefore, you can create an image that is the width of .left.column to create a "fake" column.

CSS

.column.left {
width: 180px;
float:left;
}

.column.right {
margin-left: 180px;
}

#main-wrapper {
background: #FFFFFF url(/img.gif) repeat-y top left;
}

This the simplest method. The other method becomes quit involved and involves javascript.

I'm going to show my experience level here by asking exactly where I should put this code within the document.

I appreciate all your help and support; this is a great resource and is helpful. Please excuse my ignorance on basic topics. Everything is brand new to me, but I'll get it with a little guidance. I've been knee deep in code for a week now and I feel like I'm in the Matrix - someone is just uploading data into my head.

Thanks again.

tZ

08-13-2008, 12:13 AM

The CSS and mark-up posted was to be used more as an example. Without an image or the html and CSS specific to your project there isn't much anyone could do besides provide a generic solution.