3 divs inside of a centered div using percentage
Good morning,
I am attempting to create a centered 3 column layout (h1, h2, h3) inside of a centered container div which has a width of 90%.
h1 and h3 are a fixed width b/c of the width of my background image and h2 should be 100% of the remainder of the space. I'm able to make this work using specified widths but I would like to avoid that in case a user would like to view the page < 800px.
the css:
#home-container {
background-image:url('/images/bg.png');
background-repeat: repeat-x;
text-align: center;
margin-left: auto;
margin-right: auto;
width: 800px;
}
#h1 {
background-image:url('/images/navbar_left.png');
background-repeat: no-repeat;
width: 27px;
}
#h2 {
background-image:url('/images/navspacer.png');
background-position: center top;
background-repeat: repeat-x;
width:746px;
}
#h3 {
background-image:url('/images/navbar_right.png');
background-position: right top;
background-repeat: no-repeat;
width: 27px;
}
#h1, #h2, #h3 {
float:left;
}
the html:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html dir="ltr" lang="en-US" xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>3col test</title>
<meta content="text/html; charset=UTF-8" http-equiv="Content-Type" />
<link rel="stylesheet" type="text/css" href="/stylesheets/main.css" media="all" />
</head>
<body>
<div id="home-container">
<div id="h1">1</div>
<div id="h2">2</div>
<div id="h3">3</div>
开发者_Go百科 </div>
</body>
</html>
There may be easier answers, but here is one way of doing it:
Working solution: http://jsfiddle.net/W8Bwe/1/
Basically, embed h1 and h3 inside h2, floated left and right respectively.
Then just set the margins on h2, to account for space taken up by h1 and h3.
加载中,请稍侯......
精彩评论