Re: How can I change the position of Left and Right Divs?

[Chris Eppstein]

Not sure what framework you're using here, but it seems like it's using a float-based layout. if this is the case, I'm pretty sure you need to change the source order of your elements so that the one on top comes first. Then, you use margins to change the visual order when they are side-by-side -- most float-based grid frameworks have some pull/push capability to achieve this.

chris

On Monday, May 13, 2013 1:42:14 AM UTC-7, Thomas Wolter wrote:

Hi,

The HTML markup:

<div class="fluid-row">

<div id="left">
        <article>
          <img src="http://placehold.it/450x150/ADADAD/ffffff">
        </article>
       
        <article>
          <img src="http://placehold.it/450x150/ADADAD/ffffff">
        </article>  
    </div>
<!-- End of left -->
   
   
 <div id="right">
        <article>
          <!-- <img src="http://placehold.it/700x338/ADADAD/ffffff"> -->
        </article>  
      </div>
<!-- End of right -->
   
  </div>

The CSS:

.fluid-row { 
  @include container($total-columns, $tablet, $minitablet, $mobilelandscape, $mobileportrait);
  margin: 0 auto;
}

#left {
    @include span-columns(5,12);
}

#right {
    @include span-columns(7 omega,12);
}

// Media Queries -  880px
@include at-breakpoint($tablet)  {
       
        #left {
            @include span-columns(12 omega, 12);
        }

        #right {
            @include span-columns(12 omega, 12);
        }


It works great, also when I resize the browser.

However when I resize the browser, the left divs appear over the right div.
But I want that if I make the browser smaller the right div appears above the left divs.

Dose anybody know how can I do that?

Thanks,

[Eric Meyer]

Chris is right, for vertical stacking you have to change the source order. That won't hurt your layout, because omega still floats to the right.

Also, "@include span-columns(12 omega, 12);" is a messy way to do things. Block elements span the full width by default, but this floats them, and sets the width explicitly, which is just bloating the code.

Best option is mobile-first - you won't need any code for the mobile layout.

If you still want to do desktop-first, all you really want to do is remove the previous layout:

 @include at-breakpoint($tablet)  {

        
        #left, #right { 
            @include reset-columns;

[Capi Etheriel]

Zen grids orders the sidebars/contents regardless of html source order http://zengrids.com/

[Eric Meyer]

No, neither Susy nor Zen can do what Thomas is asking for. He wants to re-arrange how they *stack* in a single-column layout. Both Susy and Zen can re-arrange how they float in a desktop layout.

-e