I have been searching forever. Sorry, I am pretty desperate at this point so I thought I would ask here. Below is an HTML sample. When column B is longer than a single page (viewport, sorry I am not sure on the correct terminology here) then A and C are not expanding in height to fill the container div. They fill the entire page but stop at a single page length even if column B is longer than a single page. Any ideas, i have been pulling my hair out. I have been playing around with height and min-height and nothing seems to work.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>Untitled Page</title>
<style type="text/css">
html, body
{
height: 100%;
background-color: gray;
padding: 0;
margin: 0;
}
#container
{
height: 100%;
margin: auto;
padding: 0px;
width: 610px;
}
#a
{
width: 5px;
min-height: 100%;
float: left;
background-color: yellow;
}
#b
{
width: 600px;
background-color: Blue;
float:left;
min-height: 100%;
}
#c
{
width: 5px;
float:left;
min-height: 100%;
background-color: green;
}
</style>
</head>
<body>
<div id="container">
<div id="a"></div>
<div id="b">
<p>more</p>
<p>more</p>
<p>more</p>
<p>more</p>
<p>more</p>
<p>more</p>
<p>more</p>
<p>more</p>
<p>more</p>
<p>more</p>
<p>more</p>
<p>more</p>
<p>more</p>
<p>more</p>
<p>more</p>
<p>more</p>
<p>more</p>
<p>more</p>
<p>more</p>
<p>more</p>
<p>more</p>
<p>more</p>
<p>more</p>
<p>more</p>
<p>more</p>
<p>more</p>
<p>more</p>
<p>more</p>
<p>more</p>
<p>more</p>
<p>more</p>
<p>more</p>
<p>more</p>
<p>more</p>
<p>more</p>
<p>more</p>
</div>
<div id="c"></div>
</div>
</body>
</html>
EDIT: Before I waste someone's time explaining to me about grabbing one pixel horizontally and then tiling is that the designer gave me a vertical gradient. Starting dark at top and ending lighter. That as well as a shadow effect. The shadow runs horizontally. So there is no way to slice this and then use a clever use of tiling as far as I know.
-
By far, the easiest way of doing this is to use a single row table instead of the divs. Table's may not be the uber cool way of doing things, but at the end of the day they just work for a whole lot less code than trying to achieve the same thing with css.
uriDium : I have just got it right using tables myself. I think it is such a hacky way of doing it BUT I am at the point where I am thinking whatever gets the job done. So If no one can get a solution using CSS and divs then I will to choose this as the right answer. -
have you seen the faux columns trick?
uriDium : Yes I have. I would have done this but unfortunately the designer gave me a gradient fill that is vertical, so slicing vertically doesn't work. I have to slice horizontally.dburke : then just don't set a repeat.uriDium : But then I am going to have a large background image. BUT I suppose in today's world of fast internet speeds does it matter if I am downloading two biggish images?Chris Lively : It really depends on your target market. Internal corporate: usually no. Mom and pop running dial up in the middle of kansas: yes. That said, check out this link: for info about high speed penetration rates http://articlet.com/article791.html
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.