I have some code currently:

<div class="container">
  <div class="benefits">Blah, Blah</div>
  <div class="info">Blah, Blah</div>
</div>

The benefits class has a float: right assigned to it. This all works perfectly. However - I'd like to reverse the order of the two inner DIVs in the source and still achieve the same effect - how can I do that?

See - http://www.twitpic.com/3igoj for the desired outcome

13 answers

Alex Holt 341
3
points

Short answer: You can't do it.

Because you want the contento wrap around it, it needs to be left in the flow of the page. Any relative positioning or negative margins will just make it cover up the content information.

Answered over 9 years ago by Alex Holt
1
point

@Matt Sephton, the content of the benefints container would hide behind the info container.

As I understand the problem, the content of the benefits-container should float around the info-container. Position:absolute would take it out of the flow; not the desired behaviour.

Answered over 9 years ago by Martin Gausby
1
point

Your best bet is probably something like this:

<div class="info">
    <div class="benefits">Blah blah blah</div>
        Blah blah blah
    </div>
</div>

Then you can float left the .info and float right the .info

Hope this holds the answer for you.

Answered over 9 years ago by James MacLeod
0
points

Could you not set .container position:relative and then set .info position:absolute?

edit: I can't post any more replies with my negative rep, so I'll just say that my answer came before the new image showing how the content should flow. The timeline of answers really needs clarifying.

Answered over 9 years ago by Matt Sephton
adrinux 33
0
points

I was about to suggest floating right with negative margin, but that afaik requires fixed width on both containers, so no wrap of info around benefits. I think what you're asking may currently be impossible, at least reliably.

Float benefits right with negative top margin to pull it up where you want it? I can just see that breaking in certain browsers.

Answered over 9 years ago by adrinux
0
points

@James MacLeod - your HTML contains too many

s - but if I understand correctly it doesn't solve the problem in that the "content" of the info needs to be before the "content" of the benefits. In that sense your solution is no better than what I have now?

@Martin Gausby - correct - the contents of "Info" should flow around the benefits, not be obscured by it.

Answered over 9 years ago by Lee Willis
0
points

Can you update the image that you posted with the names of the divs so I can understand what you are aiming for and can you repost the source that you want to have, not what you have currently. That might make things easier.

Answered over 9 years ago by James MacLeod
0
points

Updated picture

The important things are that: - "content content content" must appear before "benefits benefits - The content must flow around the benefits when rendered

benefits" in the source

Answered over 9 years ago by Lee Willis
0
points

Update image here: http://www.twitpic.com/dlmu9

Answered over 9 years ago by Lee Willis
0
points

@adrinux negative top margin might work in theory, but as the info is variable height I think that's a non-starter?

Answered over 9 years ago by Lee Willis
0
points

Are you trying to create a pull out box or a right column?

It depends on whether you want copy to flow round it or making a 2 column layout.

Answered over 9 years ago by Mark Sayers
0
points

@Mark Sayers - A pull out box as per http://www.twitpic.com/dlmu9

@Matt Sephton - I agree - I get lost as to what came in what order - needs a look at I think!

Answered over 9 years ago by Lee Willis
0
points

Unfortunately this isn't possible with the markup in its present order. You need to move the right-hand div in the markup. There is no other solution.

Answered over 9 years ago by James MacLeod