2 divs of different sizes centered
I am having an issue with div position. My website for reference is;
http://konzine.com
The issue I am having is tough to explain. I have a wrapper div of 1000px that is divided into two sections; one being 350px and the other being 650px. The wrapper is meant to be centered on the page, and have the left and right side correspond to that center. I would need the divs to stretch the width and length of the page to cover the sides in their corresponding color.
Is this possible?
Quick Edit;
I drew a picture to better illustrate my issue:
http://i.stack.imgur.com/UsRJG.jpg
The red line would repre开发者_如何学Csent the middle of the page, the entire black outline would be the wrapper div and the inner 2 separate colors are the 2 divs inside. I need them to maintain there center position on the page, but also be able to come out to fill the page.
Your reference site simply uses a centered background image repeated vertically which consists of the two colours.
In it's case the image is 3300px wide and so I had to stretch my browser over both monitors to see it's flaw. If you're ok with assuming that most people won't try and stretch it beyond the width of your image (technically you could make it as large as you like) then that might be the simplest way to do it.
The relevant css from the reference site is
html,body {
background-image:url('images/background.gif');
background-repeat: repeat-y;
background-position: center;
background-attachment: fixed;
height: 100%;
width: 100%;
margin: 0px;
}
The rest of the site would just sit in the wrapper as normal.
You can horizontally-center the wrapper by settings its left and right margins to auto. For example, the following would horizontally center a div element with ID as wrapper.
div#wrapper {
margin-left: auto;
margin-right: auto;
}
A complete example:
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>test</title>
<style type="text/css">
div#wrapper {
width: 1000px;
margin-left: auto;
margin-right: auto;
overflow: hidden;
border: 1px solid gray;
}
div#left {
float: left;
width: 50%;
background: #bbccdd;
}
div#right {
float: right;
width: 50%;
background: #ddeeff;
}
</style>
</head>
<body>
<div id="wrapper">
<div id="left">
foo<br />
foo<br />
foo<br />
foo<br />
</div>
<div id="right">
bar<br />
bar<br />
bar<br />
bar<br />
</div>
</div>
</body>
</html>
Note that when you use float in a div element, the containment of the container div breaks. That is fixed with overflow: hidden. This fix works for modern browsers. In case you want to fix this for IE6 as well, there is a clumsy fix which I've documented here: http://notes.susam.in/2011/06/float-containment.html
加载中,请稍侯......
精彩评论