Are Horrible Tables the only option here?

Conrad11

Conrad11

Conrad11

Soldato
Joined
12 Jun 2005
Posts
5,361
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...
 
To be honest, I'm not quite sure what you're trying to acheive here.

You want a DIV to stretch all the way down a page so that it has its own background properties for the data contained within. That it?

If so, then simply contain a DIV within another and I can't really see a problem.

Else, please try and explain it a little more clearly. Maybe a link or something so people can mess with the code and see what you have.

Phil.
 
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>
Click to expand...

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}
Click to expand...

Thanks...
 
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>.
 
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....
 
What do you mean? Wouldn't it be easier for you to make the changes and show me the site so I can see whats wrong.

We're kind of guessing in the dark tbh.
 
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
 
You must log in or register to reply here.
Back
Top Bottom