[Solved] 3-column floated layout w/one column-spanning div...? - CSS-Tricks

This topic is empty.

Viewing 4 posts - 1 through 4 (of 4 total)

Author

Posts
October 23, 2013 at 2:49 pm #153883

dmoz
Participant

I’m trying to create a layout that looks like this: http://imgur.com/WnQD2bU

The problem is getting the div to the far right to align up to the top: http://imgur.com/mC1UWZO (my current dev site)

Here’s what I have for code so far: http://codepen.io/dmoz/pen/JtuHd

I’ve tried reordering the divs (spanning-div 3rd or 4th), but this is the closest I’ve gotten. Anyone do this successfully?

October 23, 2013 at 3:14 pm #153885
bcintegrity1
Participant
Hey dmoz.

What I did was move the 3rd widget to last place in HTML, and change the code to this. The tall widget rose to the top!, but the wide one dropped down. I added a negative-top margin to raise it.
```
.full-width {
  margin:0;
  padding:0;
}

.wrap {
  width: 1024px;
}

.widget {
  background: rgba(0, 0, 0, 1);
  float: left;
  margin: 0px 15px 15px 0px;
  width: 32%;
  height: 200px;
}

.widget:nth-child(3) {
  height: 314px;
  margin: 0;
}

.widget:last-child {
  height: 100px;
  width: 65.4%;
  margin: -100px 0px 0px 0px;
}
```
Hope this helps!
October 23, 2013 at 7:40 pm #153901

lrelia
Participant

Is this what you want? I think what you need is just another container…http://codepen.io/lrelia/pen/FEefh

Another solution:
use position: absolute through your webpage…

October 23, 2013 at 8:00 pm #153903

dmoz
Participant

I ended up trying @bcintegrity1’s solution and it worked perfect for my page, but thanks to you both for looking into it!
Author

Posts

Viewing 4 posts - 1 through 4 (of 4 total)

The forum ‘CSS’ is closed to new topics and replies.