Float:right messing up my centered text

Question

When my centered text runs into a float, it uses the edge of the float as its new border instead of the edge of the page.

For example,

<div style="float:right; width:60px; height:60px; background-color:blue"></div>
    <h2 style="text-align:center">Section 1</h2>
        <p>
            Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation.
        </p>
    <h2 style="text-align:center">Section 2</h2>
        <p>
            Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation.
        </p>
</div>

How can I make both h2's line up?

what do u want ......... – Rohit Azad Malik Oct 03 '12 at 06:19 — Rohit Azad Malik, Oct 03 '12 at 06:19

score 1 · Accepted Answer · answered Oct 03 '12 at 06:20

1

<h2 style="text-align:center;margin-left:60px">Section 1</h2>

answered Oct 03 '12 at 06:20

Afshin

4,197
3
25
34

score 0 · Answer 2 · answered Oct 03 '12 at 06:22

0

Now define h2 margin:0;

as like this

h2{
margin:0;
}

Demo

answered Oct 03 '12 at 06:22

Rohit Azad Malik

31,410
17
69
97

score 0 · Answer 3 · answered Oct 03 '12 at 06:25

0

Add a margin-right and margin-left to the h2s that is large enough to make room for the float, see http://jsfiddle.net/3QRcn/1/.

answered Oct 03 '12 at 06:25

tow

569
2
5

Float:right messing up my centered text

3 Answers3

Linked