The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS [Solved] 3-column floated layout w/one column-spanning div…?

  • This topic is empty.
Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
  • #153883

    I’m trying to create a layout that looks like this:

    The problem is getting the div to the far right to align up to the top: (my current dev site)

    Here’s what I have for code so far:

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


    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 {
    .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!


    Is this what you want? I think what you need is just another container…

    Another solution:
    use position: absolute through your webpage…


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

Viewing 4 posts - 1 through 4 (of 4 total)
  • The forum ‘CSS’ is closed to new topics and replies.