Are Horrible Tables the only option here?

Conrad11 · 12 Apr 2006 at 02:23

Hi there,

Basically, I have 2 colums, which need to extended right to the base of the page so you see the background colour of the divs (colums) rather than the background colour of the page. I can't use, or i think i cant use, the faux coloums technique, or something along the lines of that name due to the page havent a percentage width so it fills *** whole of the users screen. So what do i do?

I am thinking and i cant think of an alternative, are tables the only option in my situation?

Thanks...

Conrad11 · 12 Apr 2006 at 02:39

Hi there,

OK, I have nowhere to host so i will just provide the code. As you can see from the code there are two main colums. They both have background colours which i would like to stretch all the way to the bottom of the page, even if they dont have content in them.

index.html said:
<!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" xml:lang="en" lang="en">

<head>
<link rel="stylesheet" type="text/css" href="style.css" media="all" />
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252" />
<title>Title | description</title>
<link rel="shortcut icon" href="" />
</head>

<body>
<div id="container">
<div id="header">
header
</div>
<div id="nav">
nav
</div>
<div id="main">
<div id="content">
<div class="test">1</div>
</div>
<div id="bar">
<div id="left">
<div class="test">1</div>
</div>
<div id="right">
<div class="test">1</div>
</div>
</div>
</div>
</div>
</body>

</html>

style.css said:
body{
margin:0
}

#header{
width:100%;
height:125px;
background:url('images/header.jpg')
}

#nav{
width:100%;
height:30px;
border-style:solid;
border-color:#336596;
border-width:5px 0 5px 0
}

#container{border-color:#333333;}

#content{
width:60%;
background-color:#D4DDE2;
float:left
}

#bar{
width:40%;
background-color:#C0F5CB;
float:right
}

#left{float:left}

#right{float:right}

Thanks...

Conrad11 · 12 Apr 2006 at 13:08

iCraig said:
Try adding

Code:

height: 100%;

to the DIV you want to stretch to the bottom, make sure you put the same height property on its parent. Sometimes this is the <body>.

That doesn't work.

Scarylion said:
why not use faux columns?

http://www.alistapart.com/articles/fauxcolumns/

Because the width of the DIV can be expanded and contracted.....

Conrad11 · 12 Apr 2006 at 17:19

Hi there,

I still have no idea how to do it properly, but i have a temp solution for those who care.

What I have done it just put loads of lines in the columns by using:

Code:

<br />

and then to stop the scroll bars coming up set in the css:

Code:

html, body {
overflow: hidden;
}

Of course, this poses the problem that if there is more content on the page that can fit, then the user will not be able to scroll down.

As this will most definatly be the case in this site, i need a proper solution? Can anyone think of one?

Thanks....

Conrad11 · 12 Apr 2006 at 17:33

Could you show me please?

Conrad11 · 12 Apr 2006 at 18:04

Hi there,

Ok, i have just uploaded ot beansprouts uploader.

This is what I want it to look like: Click Here

This is what it currently looks like: Click Here

Thanks...

Conrad11 · 12 Apr 2006 at 23:05

I guess I'm using tables?

Conrad11 · 13 Apr 2006 at 13:29

I did a search on google, it didn't come up with anything, apart from the overflow:hidden technique. How was i supposed to know that I should look for Faux Colums for "Liquid Layouts" when I didn't even know what a liquid layout was until now

Thank anyways