Center one <div> and float other right
Possible Duplicate:
Centering one div while another div is floated to the right?
I'm trying to center container1 and float container2 to its right so that it's flowing off of the page slightly:
Example: http://i.imgur.com/JHkfn.jpg
Unfortunately, container2 is hopping below and to the right of container1, as you can see in the site mock-up (link right below.)
SITE MOCK-UP: http://ad313.samrandolphdesign.com/
CSS:
#container1 {
margin: auto;
background-color: #FFF;
width: 80%;
height: 100%;
max-width: 600px;
padding-bottom: 15px;
display: block;
}
#container2 {
background-color: #CC9900;
max-width: 600px;
width: 80%;
height: 100%;
padding-top: 60px;
padding-bottom: 50px;
text-align: center;
float: right;
display: block;
}
Try using absolute positioning instead of floating.
Something like:
#container1 {
margin: auto;
background-color: red;
width: 50%;
height: 100%;
max-width: 600px;
padding-bottom: 15px;
text-align: center;
display: block;
position: absolute;
left: 25%;
}
#container2 {
background-color: #CC9900;
max-width: 600px;
width: 50%;
height: 100%;
padding-top: 60px;
padding-bottom: 50px;
text-align: center;
display: block;
position: absolute;
right: -25%;
}
Here is a jsfiddle EDIT: If you don't want absolute positioning for container1, just add top: 0;
to container2
wrap two divs inside another div. and make container 1 and container 2's display as inline-block.
something like this.
<div style="width: 2000px">
<div id="container1" style="width: 990px; display: inline-block">
</div>
<div id="container2" style="width: 990px; display: inline-block">
</div>
</div>
try this fiddle
First, you need to move #container2
above #container1
in the markup so the floating top will be the top of #container1
instead of after it. Second, you need to give #container2
a negative margin-right to move it off screen.
#container2 {
background-color: #CC9900;
max-width: 600px;
width: 80%;
height: 100%;
padding-top: 60px;
padding-bottom: 50px;
text-align: center;
float: right;
display: inline-block;
margin-right: -300px;
}
链接地址: http://www.djcxy.com/p/64978.html
上一篇: 在C中读/写文件
下一篇: 居中一个<div>并浮动其他权利