CODEWITHSUNDEEP
css
dxc
dxc

Reputation: 63

using CSS to reorganize DIVs

I'm trying to modify an SMF theme DIV1 and DIV2 are organized in the html so that div1 comes first and is displayed above div2. I want to switch their places using css, is this possible? and how can I accomplish it?

Upvotes: 0

Views: 120

Answers (3)

Spudley
Spudley

Reputation: 168655

You could try adding a 100% height margin to the top <div> and a -100% margin to the bottom one. That might get them to swap places. It could have other unintended consequenses, though. You might need to fiddle with additional styles also, such as overflow, as well to get it working.

Using position:relative; might work too. You could then specify top for the two divs to move one up and the other down. Again, this will affect the rest of the layout. If that doesn't work, position:relative; for one of them and position:absolute for the other might work better.

Depending on the layout, using float might do the trick. But that definitely has some interesting quirks if your layout isn't already set up for floated elements.

Worst case, you could use position:absolute; and define a fixed position for everything.

The main trouble you'll have with almost all these options will be keeping the container element the right size. If you can fix the size of that (or if it's already fixed) then your job will be a lot easier.

Hope that helps.

Upvotes: 1

thirtydot
thirtydot

Reputation: 228152

With the sliver of information you've given:

DIV1 and DIV2 are organized in the html so that div1 comes first and is displayed above div2

I'm assuming you have a structure like this:

<div id="container">
    <div id="div1">div1</div>
    <div id="div2">div2</div>
</div>

You can do this using absolute inside relative positioning.

For example: http://jsfiddle.net/BY7v9/1/

You can get a more specific answer if you provide.. more specific details.

Upvotes: 1

Andre Backlund
Andre Backlund

Reputation: 6943

float:right on the left one and float:left on the right one. It could work, but I couldn't possibly know from the little you've said.

You might also need to put this psuedoclass to one of the divs:

:after {
  content: ".";
  display: block;
  height: 0;
  clear: both;
  visibility: hidden;
}

Upvotes: 0

Related Questions