Question

Hi is this even possible? i’ve tried everything I need to get that orange box up and under the other orange box? here is my code, I’m going mad!!

<div id="container">

    <div id="nav1"></div>
    <div id="nav2"></div>

    <div id="box3"></div>
    <div id="box4"></div>
    <div id="box5"></div>
    <div id="box5"></div>
    <div id="box3"></div>

</div>

CSS

#box3
{ 
  width:250px;
  height:200px; 
  background-color:#F30; float:left; 
} 
#box4
{ 
  width:500px;
  height:400px; 
  background-color:#F00; 
  float:left; 
} 
#box5
{ 
  width:250px;
  height:200px; 
  background-color:#C00; 
  float:left; 
} 

Jsfiddle

Answer 1

JSfiddle: http://jsfiddle.net/W5uE3/

html:

<div id="container">

    <div id="nav1"></div>
    <div id="nav2"></div>

    <div id = 'cont1'>    
        <div class="box3"></div>
        <div class="box3"></div>
    </div>
    <div id="box4"></div>
    <div class="box5"></div>
    <div class="box5"></div>
</div>​​​​​​​​​​​​​​​​​

css:

#container { 
    width: 1000px; 
}
.box3{ 
    width:250px; 
    height:200px; 
    background-color:#F30; 
    float:left; 
} 
#box4{ 
    width:500px; 
    height:400px; 
    background-color:#F00; 
    float:left; 
} 
.box5{ 
    width:250px; 
    height:200px; 
    background-color:#C00; 
    float:left; 
}
#cont1 {
    float: left;
    width: 250px;
}

You don’t need to use z-index, just an extra container. And to change the multiple ids to classes.