CODEWITHSUNDEEP
htmlcsscss-float
DevKev
DevKev

Reputation: 6304

How can I stack divs on float?

Site: http://bit.ly/13nL8jV
Demo: http://jsfiddle.net/bBckp/

Brief: I am trying to get the CURRENT PROGRAMS to float under the SIGNATURE PROGRAMS with no luck. All of the columns in the footer have the CSS:

float: left;
width: 29%;

The columns are dynamic so I can't just wrap SIGNATURE and CURRENT in it's own div (I can probably hack it with JS)...CLARRIFICATION - I'm referring to the menus in the FOOTER.

Any thoughts how I can do this with just CSS?

Upvotes: 0

Views: 61

Answers (2)

RbG
RbG

Reputation: 3193

it may help you

html like this way;

<div class="wrapper">
    <div class="SIGNATURE PROGRAMS">
        ..........
    </div>
    <div class="CURRENT PROGRAMS">
        ..........
    </div>
</div>

and css

.wrapper{
  overflow:hidden;
}
.SIGNATURE PROGRAMS{
  float:left;
}
.CURRENT PROGRAMS{
 clear:both;
}

EDIT:: if you cant change your html..then you may try this

.moduletable.current-prog {
  position: relative;
  left: -29%;
  margin-top: 100px;
  }

Upvotes: 0

Diodeus - James MacFarlane
Diodeus - James MacFarlane

Reputation: 114347

You can tweak the element like so. This does leave a hole where it used to be, but that's what relative positioning does.

.item-130 {
   position:relative;
   left:-180px;
   top:25px
}

Alternately you can set the parent UL to position:relative, and use absolute positioning:

.nav-pills {
    position:relative;
}

.item-130 {
   position:absolute;
   left:0px;
   top:25px
}

Upvotes: 1

Related Questions