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:
Expand|Select|Wrap|Line Numbers
- <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:
Expand|Select|Wrap|Line Numbers
- .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;
- }
Would really appreciate you advice.