Center one
and float other right

Question

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: https://i.stack.imgur.com/I7nJx.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;
}

user10 · Answer 1 · 2012-10-19T04:45:37.760

2

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

edited Oct 19 '12 at 04:45

answered Oct 19 '12 at 04:23

user10

5,186
8
43
64

if you want accurate answer, fiddle it – user10 Oct 19 '12 at 04:24
This is just throwing container1 all the way to the left and container1 is still placing itself at a weird place near the bottom (but strangely not under container1) – hplodnarmas Oct 19 '12 at 04:32
1

How does this "float container2 to its right so that it's flowing off of the page slightly?" – jimp Oct 19 '12 at 04:32
1

Of course, I love `inline-block` in comparison to the `float` bologne, but the problem arises if IE8 or lower must be supported. These do not support `inline-block`, alas. – Jared Farrish Oct 19 '12 at 04:32
yep!! i usually try everything in latest browsers. that could be the issue. – user10 Oct 19 '12 at 04:36
this answers fiddle working good in > IE7 – user10 Oct 19 '12 at 04:48

score 2 · Accepted Answer · answered Oct 19 '12 at 04:24

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

This is working! Thank you! I send hugs your way. – hplodnarmas Oct 19 '12 at 04:33 — hplodnarmas, Oct 19 '12 at 04:33

score 0 · Answer 3 · answered Oct 19 '12 at 04:26

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;
}

Center one
and float other right

3 Answers3

Linked

Center one and float other right

3 Answers3

Linked

Center one
and float other right