Does anybody know how to create such a layout? Fullheight w/transparency.Kinda stuck!

willems · February 12, 2013, 11:48am

as seen in the screenshot is what I like to achieve. the background (white) is transparent. the pink/purple stuff is just there to show that the white is transparant.

i want the page to be minimum the height of the browser window and the footer part should stick to the bottom. In the main content area will be two colums for content. These are seperated with the dotted vertical line.

I tried some layouts myself but i can’t get it right with the dotted vertical. I could show you a page with my attempt, but then the replies would all be based on that layout, and i’m more and more thinking that it should be done completely different. However, i can’t seem to think straight anymore.

Hope it’s clear. If really want i could post a link to my try. I’m really wondering if somebody could show me the right way how to do this. The difficult part for me is getting the dotted vertical to extend. If this line were to be omitted, I would have had a working html.

thanks!

PaulOB · February 12, 2013, 4:27pm

Hi,

You can do something like this for IE8 + (apart from the transparency which would need a transparent png in IE8).


<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
html, body {
	height:100%;
	margin:0;
	padding:0;
}
/* diagonal background gradient added for testing*/
body {
	font-family:Geneva, Arial, Helvetica, sans-serif;
	-moz-background-size: 40px 40px;
	-webkit-background-size: 40px 40px;
	background-size: 40px 40px;
	background-color: #fff;
	background-image: -moz-linear-gradient(right top, transparent, transparent 15%, rgba(255, 220, 220, 0.5) 15%, rgba(255, 220, 220, 0.5) 50%, transparent 50%, transparent 65%, rgba(255, 220, 220, 0.5) 65%, rgba(255, 220, 220, 0.5));
	background-image: -webkit-gradient(linear, 100% 0%, 0% 100%, color-stop(0.15, transparent), color-stop(0.15, rgba(255, 220, 220, 0.5)), color-stop(0.50, rgba(255, 220, 220, 0.5)), color-stop(0.50, transparent), color-stop(0.65, transparent), color-stop(0.65, rgba(255, 220, 220, 0.5)));
	color:red;
}
#outer {
	display:table;
	width:960px;
	margin:auto;
	height:100%;
	table-layout:fixed;
	background:#000;
	background:rgba(0,0,0, 0.4);
	position:relative;
}
.inner {
	width:100%;
	height:100%;
}
.main {
	width:600px;
	float:left;
	padding:20px 0;
}
.sidebar {
	float:right;
	width:359px;
	float:right;
	padding:20px 0;
}
#footer {
	border-top:1px solid red;
	width:100%;
	height:1px;
}
#footer-inner {
	height:125px;
	clear:both;
}
.tc {
	display:table-cell;
	width:100%;
}
.tr {
	display:table-row;
	width:100%;
}
#outer:after {
	content:"";
	position:absolute;
	left:600px;
	top:150px;
	bottom:150px;
	width:1px;
	border-left:1px dotted red;
}
#header {
	height:125px;
	border-bottom:1px solid red;
}
h1 {
	margin:0;
	text-align:center;
	padding:1em 0 0
}
p {
	padding:0 5px;
	margin:0 0 1em
}
</style>
<!--[if lte IE 8]>
<style type="text/css">
.inner{height:auto}
</style>
<![endif]-->
</head>
<body>
<div id="outer">
		<div class="tr">
				<div class="inner tc">
						<div id="header">
								<h1>Header</h1>
						</div>
						<div class="main">
								<p>test</p>
								<p>test</p>
								<p>test</p>
								<p>test</p>
								<p>test</p>
						</div>
						<div class="sidebar">
								<p>test</p>
								<p>test</p>
								<p>test</p>
								<p>test</p>
								<p>test</p>
								<p>test</p>
								<p>test</p>
								<p>test</p>
						</div>
				</div>
		</div>
		<div class=" footer tr">
				<div id="footer" class="tc">
						<div id="footer-inner">
								<p>Footer</p>
								<p>Footer</p>
								<p>Footer</p>
						</div>
				</div>
		</div>
</div>
</body>
</html>

Or something similar for IE6+. The caveat is that the header and footer have to be accounted for in both examples as the dividing line is an absolutely placed element starting at xxpx from the top and xxpx from the bottom.

I thought I could use two display:table-cell elements and use the equal border between the two but that kills the footer cell as there is no colspan in the display table properties (A normal table wouldn’t have this problem as you could merge the bottom cells).

willems · February 13, 2013, 9:34am

Wow thanks! That looks exactly like what i need. Some stuff in there that i never used before like display:table and table-row. It seems to do the trick.

When I want to have multiple columns in the footer, would I need to use the TC class on these? Or can I just create a couple of DIV’s left floated? Of would this break things?

PaulOB · February 13, 2013, 10:47am

If you need a number of equal columns in the footer then you would basically create a nested table structure in the footer but with css. e.g. create an inner display:table element and then a number of table-cell elements - you can omit the css table-row equivalent as the browser will automatically construct those unless you needed extra rows as obviously all cells get put into the one automatic row.

If you don’t need them all to equalise then of course you can just float them in the footer with no problem. Remember though that if you increase the height of the footer or header the dividing line co-ordinates will need to be modified. I tried to find an automatic solution but ran into the footer issue when I used two cells in the middle (but have found a solution for that in the example at the end of this post) .

Display:table properties only work in IE8+ so if you want to support IE7 then you would need to use Conditional comments (or a hack) to give IE7 a not so good floated version.

The CSS display table properties are useful for equal columns or where you don’t want columns to wrap (unlike floats) but do not have the colspan equivalent so the number of cells in each table structure must match to behave correctly. Most of the time I float elements but if I need equal columns then I will use display:table-cell and then float for ie7.

e.g.


.cell{
display:table-cell;
*float:left;/* invalid hack for ie7 and under - the asterisk is invalid as a property character but IE7 ignore it as if it wasn't there and read the rule anyway*/
}

Here’s a slightly more complicated example that allows for automatic height header and footers and uses the two equal cells I mentioned earlier. To overcome the short cell in the header and footer an inner element is dragged right with a negative margin to fill the space.


<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
html, body {
	height:100%;
	margin:0;
	padding:0;
}
/* diagonal background gradient added for testing*/
h1 {
	margin:0;
	text-align:center;
	padding:10px 0;
}
p {
	padding:0 5px;
	margin:0 0 1em
}
.tc {
	display:table-cell;
	width:100%;
	height:100%;
	vertical-align:top;
}
.tr {
	display:table-row;
	width:100%;
}
.top .tc, .bottom .tc { height:1px }/* make sticky footer work */
body {
	font-family:Geneva, Arial, Helvetica, sans-serif;
	-moz-background-size: 40px 40px;
	-webkit-background-size: 40px 40px;
	background-size: 40px 40px;
	background-color: #fff;
	background-image: -moz-linear-gradient(right top, transparent, transparent 15%, rgba(255, 220, 220, 0.5) 15%, rgba(255, 220, 220, 0.5) 50%, transparent 50%, transparent 65%, rgba(255, 220, 220, 0.5) 65%, rgba(255, 220, 220, 0.5));
	background-image: -webkit-gradient(linear, 100% 0%, 0% 100%, color-stop(0.15, transparent), color-stop(0.15, rgba(255, 220, 220, 0.5)), color-stop(0.50, rgba(255, 220, 220, 0.5)), color-stop(0.50, transparent), color-stop(0.65, transparent), color-stop(0.65, rgba(255, 220, 220, 0.5)));
	color:red;
}
#outer {
	display:table;
	width:960px;
	margin:auto;
	height:100%;
	table-layout:fixed;
	background:#000;
	background:rgba(0,0,0, 0.4);
	position:relative;
	border-spacing:10px;
}
.main {
	width:600px;
	padding:20px 0;
}
.sidebar {
	width:359px;
	padding:20px 0;
	border-left:1px dotted red;
}
#footer {
	width:100%;
}
#footer .stretch { border-top:1px solid red; }
#header .stretch { border-bottom:1px solid red; }
.stretch {
	margin:0 -339px 0 0;
	position:relative
}/* drag into right column*/
#header, #footer { width:600px }
</style>
<!--[if lte IE 8]>
<style type="text/css">
.tc{height:auto}
</style>
<![endif]-->
<!--[if lt IE 8]>
<style type="text/css">
.tc{float:left}
.stretch{margin-right:0;border:none}
#header,#footer{height:auto;clear:both}
.main{border-right:1px solid red}
.sidebar{float:left;margin-left:-1px;border-left:1px solid red}
#footer { border-top:1px solid red;width:100% }
#header { border-bottom:1px solid red;width:100% }
</style>
<![endif]-->
</head>
<body>
<div id="outer">
		<div class="tr top">
				<div id="header" class="tc">
						<div class="stretch">
								<h1>Header</h1>
								<p>lorem ipsum dolor sit amet lorem ipsum dolor sit amet lorem ipsum dolor sit amet lorem ipsum dolor sit amet lorem ipsum dolor sit amet lorem ipsum dolor sit amet lorem ipsum dolor sit amet lorem ipsum dolor sit amet lorem ipsum dolor sit amet lorem ipsum dolor sit amet lorem ipsum dolor sit amet lorem ipsum dolor sit amet </p>
						</div>
				</div>
		</div>
		<div class="tr">
				<div class="main tc">
						<p>lorem ipsum dolor sit amet lorem ipsum dolor sit amet lorem ipsum dolor sit amet lorem ipsum dolor sit amet lorem ipsum dolor sit amet lorem ipsum dolor sit amet lorem ipsum dolor sit amet lorem ipsum dolor sit amet lorem ipsum dolor sit amet lorem ipsum dolor sit amet lorem ipsum dolor sit amet lorem ipsum dolor sit amet </p>
						<p>test</p>
				</div>
				<div class="sidebar tc">
						<p>lorem ipsum dolor sit amet lorem ipsum dolor sit amet lorem ipsum dolor sit amet lorem ipsum dolor sit amet lorem ipsum dolor sit amet lorem ipsum dolor sit amet lorem ipsum dolor sit amet lorem ipsum dolor sit amet lorem ipsum dolor sit amet lorem ipsum dolor sit amet lorem ipsum dolor sit amet lorem ipsum dolor sit amet </p>
						<p>test</p>
						<p>test</p>
				</div>
		</div>
		<div class="tr bottom">
				<div id="footer" class="tc">
						<div class="stretch">
								<p>lorem ipsum dolor sit amet lorem ipsum dolor sit amet lorem ipsum dolor sit amet lorem ipsum dolor sit amet lorem ipsum dolor sit amet lorem ipsum dolor sit amet lorem ipsum dolor sit amet lorem ipsum dolor sit amet lorem ipsum dolor sit amet lorem ipsum dolor sit amet lorem ipsum dolor sit amet lorem ipsum dolor sit amet </p>
								<p>Footer</p>
						</div>
				</div>
		</div>
</div>
</body>
</html>

It seems to work well in IE8+ but will need stress testing as I’ve just knocked that idea up

Live example here.

And with fluid width to test if sticky footer really working.