Hi all,
I’m a newbie to CSS. I recently designed my layout in Photoshop using the 960 grid system and now need some help laying out the page in CSS for a FIXED layout. I just need some help getting the document flow going. Can you view my attached graphic? How would you code the banner section and then have the background horizontal color expand to the width of the viewport? Also, how would you code the “3 buckets”? The black tabs for each of those “buckets” will contain title text and the mustard color is going to be a background image. Would those “3 buckets” be 3 columns floated (float:left, float:left, float:right)?
I would suggest you approach the full-width background color as described here: http://pageaffairs.com/code-archive/full-width-bands/floated-columns.html
As for the “buckets”, you don’t actually need to use a bg image for the mustard color. Anyhow, yes, you could float each bucket, all left, or as you describe. Another option is to set them each to display: inline-block.
If you only want modern browsers support you could use the box-shadow trick like this without using extra markup:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Untitled Document</title>
<style type="text/css">
#outer {
width:960px;
margin:auto;
background:#f2f2f2;
}
#header {
background:#f6f8eb;
padding:1em 0;
/* 960px matches the width of the element - it can't be bigger than the element or the shadow moves away */
-webkit-box-shadow: 960px 0px rgba(234, 234, 234, 0.9), -960px 0px 0px rgba(234, 234, 234, 0.9);
-moz-box-shadow: 960px 0px 0px rgba(234, 234, 234, 0.9), -960px 0px 0px rgba(234, 234, 234, 0.9);
box-shadow: 960px 0px 0px rgba(234, 234, 234, 0.9), -960px 0px 0px rgba(234, 234, 234, 0.9);
}
p { margin:1em }
</style>
</head>
<body>
<div id="outer">
<h1>Test IE9+ wide background strip no extra mark up</h1>
<div id="header">
<p>lorem ipsum test lorem ipsum test lorem ipsum test lorem ipsum test lorem ipsum test lorem ipsum test lorem ipsum test lorem ipsum test lorem ipsum test lorem ipsum test lorem ipsum test lorem ipsum test lorem ipsum test lorem ipsum test lorem ipsum test lorem ipsum test lorem ipsum test lorem ipsum test lorem ipsum test lorem ipsum test lorem ipsum test lorem ipsum test lorem ipsum test lorem ipsum test lorem ipsum test </p>
<p>lorem ipsum test lorem ipsum test lorem ipsum test lorem ipsum test lorem ipsum test lorem ipsum test lorem ipsum test lorem ipsum test lorem ipsum test lorem ipsum test lorem ipsum test lorem ipsum test lorem ipsum test lorem ipsum test lorem ipsum test lorem ipsum test lorem ipsum test lorem ipsum test lorem ipsum test lorem ipsum test lorem ipsum test lorem ipsum test lorem ipsum test lorem ipsum test lorem ipsum test </p>
<p>lorem ipsum test lorem ipsum test lorem ipsum test lorem ipsum test lorem ipsum test lorem ipsum test lorem ipsum test lorem ipsum test lorem ipsum test lorem ipsum test lorem ipsum test lorem ipsum test lorem ipsum test lorem ipsum test lorem ipsum test lorem ipsum test lorem ipsum test lorem ipsum test lorem ipsum test lorem ipsum test lorem ipsum test lorem ipsum test lorem ipsum test lorem ipsum test lorem ipsum test </p>
</div>
<p>lorem ipsum test lorem ipsum test lorem ipsum test lorem ipsum test lorem ipsum test lorem ipsum test lorem ipsum test lorem ipsum test lorem ipsum test lorem ipsum test lorem ipsum test lorem ipsum test lorem ipsum test lorem ipsum test lorem ipsum test lorem ipsum test lorem ipsum test lorem ipsum test lorem ipsum test lorem ipsum test lorem ipsum test lorem ipsum test lorem ipsum test lorem ipsum test lorem ipsum test </p>
<p>lorem ipsum test lorem ipsum test lorem ipsum test lorem ipsum test lorem ipsum test lorem ipsum test lorem ipsum test lorem ipsum test lorem ipsum test lorem ipsum test lorem ipsum test lorem ipsum test lorem ipsum test lorem ipsum test lorem ipsum test lorem ipsum test lorem ipsum test lorem ipsum test lorem ipsum test lorem ipsum test lorem ipsum test lorem ipsum test lorem ipsum test lorem ipsum test lorem ipsum test </p>
</div>
</body>
</html>
The shadow can only be as wide as the element it is attached to so in a 960px wide layout you can cover 2880px which should cover most sensible devices.