Having trouble with displaying these div's

[jeddiki]

Hi,

I am having difficulty seeing why my divs will not swap places :confused:

I want to swap the positions of the "Hot News" and the "Todays Bonuese" sections.

Here is how they look now:

And when I try and swap the positions I get this:

This is my code:

<div class="wrapper">
<div class="insidewrapper">
 
<div class="out_box hot_news">
<span class="hot02">Hot News</span>
<div class="hot_news03">
 
<---   THIS IS THE FIRST DIV SECTION --->
 
<div class="hot04">
<p><span style="font-size: 14px;color:darkblue; font-weight: bold;">The five part tutorial series has been completed and they are awesome.</span><br>
 <br>
These will help all new experts to quickly get familiar with the powerful facilities that they have at their fingertips.
<br><br>
The tutorials are under the <b>Free Tuition</b> tab.<br>
1) How to Become a Recognized Expert <br>
2) How to Upload and Use Your Images<br>
3) How to Add Stunning Images to Your Articles<br>
4) How to Build a Great Product Sales Page<br>
5) How to Link From Your Articles to Your Products<br>
<br>
<br><br>
<span style="font-size: 14px; color:darkblue; font-weight: bold;">Three new tools recently added:</span>
<br><br>
<b>CHAOS Submitter</b> This is a industrial strength program made for the more demanding Webmaster. 
If you're looking for the most unique and targeted visitors, the the CHAOS submitter will help you.  
<br><br>
<b>Competitor Google Tool</b> This tool grphically displays the relationship of a website within Google and Yahoo. Compare your website with the competion and see where to improve.
<br><br>
<b>Banner Creator.</b> Very easy to use. Create your own free banners quickly and easily.  
</p>
</div> <!-- End div:hot04 --> 
</div> <!-- End div:hot03 -->
</div> <!-- End div:out_box hot_news -->
 
<---   THIS IS THE SECOND DIV SECTION --->
 
<div class="out_box hot01">
 <span class="hot02">Join Today Bonuses</span>
  <div class="in_box hot03">
     <div class="hot04">
      <div style="margin: 0 0 0 20px;">
       <a href="/im/index1.php">Become a free member today and pick 
       up these introductory gifts:</a>
          <br><br>
         <a href="/im/index1.php">
          <img alt="link building" src="http://www.expert-world.com/sys_images/TA-box.png" height="75px" width="80px" />
         <img alt="gift (15K)" src="http://www.expert-world.com/sys_images/IMs.png" height="75px" width="80px" />
         <img alt="gift (15K)" src="http://www.expert-world.com/sys_images/tool-kit-box.png" height="75px" width="80px" />
         <img alt="gift (15K)" src="http://www.expert-world.com/sys_images/BCT.jpg" height="75px" width="80px" />
         </a>
         </div>
     </div> <!-- End div:hot04 -->
    </div> <!-- End div:hot03 -->
</div> <!-- End div:hot01 -->
 

The relevant css is:

.wrapper {
  width: 950px;
    min-height:100%;
  overflow:hidden;
  border: 1px;
  border-style: solid;
  border-right-color: #ccc;
  border-left-color: #ccc;
  border-top-style: none;
  margin: 0px 0px 0px 150px; 
  padding: 0px 0px 0px 0px;
  border-bottom-style: none;
  text-align: center;
}
 
.insidewrapper {
  width: 900px;
  color :#6385AD;
    color :#000;
  margin: 0px auto 0px auto;
}
 
.out_box{  
  float:left;
    text-align: left;
    margin: 0 0 0 10px;
    display:inline;
 }
 
.hot01{
  width:180px;
}
 
.hot02{
  color :#000;
  font-size: 14px; 
  font-weight: bold; 
    text-align: left;
 }
 
.in_box{
  border: 1px;
  border-style: solid;
  border-color: #ccc;
  float:left;
    text-align: left;
    margin: 10px;
 }
 
.hot03{
  width:150px;
    height:390px;
 }
 
.hot04{
  font-size: 12px; 
     margin: 10px;
}
 
.hot_news{
  width:480px;
}
 
.hot_news03{
  width:480px;
}
 

When I try and swap the divs I just take the first div and out it under the second section. Unfortunately, the "Bonus" box slides over to the right, even though it is floated left - I don't see why :o

Would really appreciate you advice.

[TheServant]

I am presuming you do close your wrapper div?

Anyway, I have used this with your stylesheet and it can switch them around no problem. Don't think I changed anything significant.

<link rel="stylesheet" href="test.css" type="text/css" />
<div class="wrapper"> 
    <div class="insidewrapper"> 
 
    <div class="out_box hot01"> 
        <span class="hot02">Join Today Bonuses</span> 
        <div class="in_box hot03"> 
            <div class="hot04">
                <p>this is bonus</p>
            </div>
        </div>
    </div>
    <div class="out_box hot_news"> 
        <span class="hot02">Hot News</span> 
        <div class="hot_news03">              
            <div class="hot04">
                <p>this is news</p>
            </div>
        </div>
    </div>
</div>

I can't see the rest of your page but you should find out what is filling the space between your left column and the bonuses which is pushing the news below. Simply add a background color to each main div to see which one it is and then deal with that one.