CSS - Three divs next to each other and 100% height
Im working on a layout for a website and I'm trying to set up my css rules for the layout in the following image:
I want left & right divs to extend to the height of content div, I'm not very familiar with the clear attribute and how to use it. Here's what I've done so far:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-7">
<title>Untitled Document</title>
<style type="text/css">
<!--
html, body
{
height: 100%;
min-height: 100%;
margin: 0;
padding: 0;
}
#header {
background: url(images/header.png) no-repeat;
margin-top: 0px;
margin-right: auto;
margin-bottom: 0px;
margin-left: auto;
clear: both;
padding: 15px;
width: 1013px;
height: 46px;
}
#wrapper {
clear: both;
width: 1043px;
开发者_运维百科 margin-top: 10px;
margin-right: auto;
margin-bottom: 10px;
margin-left: auto;
height: 100%;
min-height: 100%;
}
#content {
background: #F00 url(images/fondo%20light.jpg) repeat;
margin-top: 0px;
margin-right: auto;
margin-bottom: 0px;
margin-left: auto;
color: #333;
z-index: 1;
float: left;
width: 985px;
clear: none;
padding: 0px;
height: 150px;
}
#lines-left {
background: url(images/lines-left.png) no-repeat;
float: left;
width: 17px;
height: 100%;
margin-left: 13px;
}
#lines-right {
background: url(images/lines-right.png) no-repeat;
float: right;
width: 17px;
height: 100%;
padding: 0px;
margin-top: 0px;
margin-right: 11px;
margin-bottom: 0px;
margin-left: 0px;
}
body {
background: url(images/dark-pattern.jpg);
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
font-size: 11px;
color: #FFF;
margin: 0px;
}
#footer {
background: url(images/footer.png) no-repeat;
height: 140px;
margin-top: 0px;
margin-right: auto;
margin-bottom: 0px;
margin-left: auto;
clear: both;
padding: 15px;
width: 1013px;
}
-->
</style>
</head>
<body>
<div id="wrapper">
<div id="header">Content for id "header" Goes Here</div>
<div id="lines-left"> </div>
<div id="content">Content for id "content" Goes Here</div>
<div id="lines-right"> </div>
<div id="footer">Content for id "footer" Goes Here</div>
</div>
</body>
</html>
You might want to have a look at using inline-block instead: http://robertnyman.com/2010/02/24/css-display-inline-block-why-it-rocks-and-why-it-sucks/
Have a look at this site - The Holy Grail 3 column Liquid Layout
Adventures with CSS Fixed Positioning!
http://jsfiddle.net/XTdgP/
Since you want 100% height - which is a pain in the ass most of the time - and all your columns and rows seem to be of a fixed width/height, this becomes really easy with fixed positioning, which allows you to specify how far every edge of every container should be from the sides of the browser page.
This is your answer...
http://matthewjamestaylor.com/blog/equal-height-columns-cross-browser-css-no-hacks
... it explains how to obtain equal heights. Specific to your 2 column question, check out the demo...
http://matthewjamestaylor.com/blog/equal-height-columns-2-column.htm
加载中,请稍侯......
精彩评论