Menu
I have a layout that is working, but it has one very annoying problem.. when the content is taller than the screen, the background stops.
This is the desired layout in bad-ASCII-art format:
_____________________ _
| | long |logo| |
| | content | | |
| | | | |
| | | | |
|grad| |grad| | Viewport
| | | | |
| | | | |
| | | | _|
| | | |
| | | |
_____________________
|2em| <-20em->| 2em|
..or with short content..
_____________________ _
| | short |logo| |
| | content | | |
| | | | |
| | | | |
|grad| |grad| | Viewport
| | | | |
| | | | |
| | | | |
| | | | |
_____________________ _|
Basically it looks like a single column, with a glow as a column either side. Over the left-glow is a logo. When the content is short, it is still the full-height.
I have tried using the CSS min-height hack, which fixes the middle column, but then the gradients only extend as far as the content (in the left column, a single , in the right column the logo)
Here is what the layout looks like:
And the problem (when the browser window is shrunk vertically):
Finally, the problem HTML/CSS, http://data.dbrweb.co.uk/tmp/fifestock_layout_problem/
286
Given that you have your gradients in seperate columns to the left and right, you need to implement "faux columns".
If you're after elastic versions, have a look at Elastic Faux Columns and Multi-Column Layouts Climb Out of the Box.
165
Here's what I ended up using, using this technique of high value for padding-bottom, with an equal but inverted value in margin-bottom - then you set overflow:hidden on the div enclosing that huge margin.
It's rather hackish, but it works! I now have a full-height, a single em-defined width, and a full-height background-image down each side! There's not much extra markup (a container div, a div for each of the three columns)
<html>
<head>
<title>Yay</title>
<style type="text/css" media="screen">
body, html{
height:100%;
margin:0;
background:#1d4b76;
}
#contain{
width:40em;
margin-left:auto;
margin-right:auto;
overflow:hidden;
}
#left{
background-image:url("static/grad_left.png");
background-repeat:repeat-y;
background-position:right;
height:100%;
float:left;
width:150px;
padding-bottom:10000px;
margin-bottom:-10000px;
}
#middle{
float:left;
background:#000;
color:#fff;
width:20em;
padding-bottom:100000px;
margin-bottom:-100000px;
}
#right{
float:left;
background-image:url("static/grad_right.png");
background-repeat:repeat-y;
background-position:left;
width:150px;
padding-bottom:100000px;
margin-bottom:-100000px;
}
</style>
</head>
<body>
<div id="contain">
<div id="left">
</div>
<div id="middle">
Put lots of text here
</div>
<div id="right">
<img src="static/logo.png" width="150" height="150" alt="Logo">
</div>
</div>
</body>
</html>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With