Take the 2-minute tour ×
Web Applications Stack Exchange is a question and answer site for power users of web applications. It's 100% free, no registration required.

I am being trying move the right side bar to the top using float. I research already online but I can't find a specific answer for this problem. Any help would be appreciated. Thanks

http://memboi.com/hacx.html

enter image description here

Here is the CSS File:

       body
 {
  background-color:yellow;
  color:green;
  width:1300px;
  height:7000px;
  border-style:solid;
       margin:auto;
    }
     .mainwrap{

      background-color:red;
    width:1080px;
    height:100%;
    clear:both;
    border-style:solid;
    margin:auto;

     }
      header
     {
      background-color:white;
      width:1080px;
      height:100px;
      border-style:solid;
      margin:auto;
     }

     nav
     {
width: 1080px;
      height: 44px;
font-size: 16px;
      font-family: Tahoma, Geneva, sans-serif;
font-weight: bold;


text-shadow: 3px 2px 3px #333333;
background-color: #8AD9FF;
    border-radius: 8px;
    margin:auto;
}
     nav ul
     {

height: auto;
padding: 8px 0px;
margin: 0px;
}

      nav li { 
      display: inline; 
     padding: 20px; 
     }

main
{
margin:auto;
width:700px;

background-color:gray;
float:left;
 border-style:solid;
     }

  aside {
  margin-top: 1.83em;
  width: 320px;
float:right;
    background-color:blue;
   border-style:solid;

}

 HTML File:


<!DOCTYPE html>
 <html>

 <head>Title</head>
 <link rel="stylesheet" type="text/css" href="hacx.css">
 <body>
<div class="mainwrap">

 <header>

Header
 </header>
<nav class="nav">
    <ul>

        <ul>
            <li><a href="index.html">Home</a></li>
            <li><a href="aboutus.html">About Us</a></li>
            <li><a href="services.html">Services</a></li>
            <li><a href="contactus.html">Contact Us</a></li>
        </ul>


      </nav>






 <main>

        <h1>My article</h1>
        <p>Content</p>
    </main>
  <main>

        <h1>My article</h1>
        <p>Content</p>
    </main>


    <aside>
        <p>More information1</p>
    </aside>
    <aside>
    <p>More information</p>
    </aside>


 </div>





</body>


</html>
share|improve this question

closed as off-topic by Jacob Jan Tuinstra, Alex, Al E., Vidar S. Ramdal, jonsca Apr 3 at 14:43

This question appears to be off-topic. The users who voted to close gave this specific reason:

  • "It is a question about creating/developing a web application." – Jacob Jan Tuinstra, Al E., Vidar S. Ramdal, jonsca
If this question can be reworded to fit the rules in the help center, please edit the question.

    
Have you checked the Tour? You're not supposed to ask quesion about development here on Web Apps. Ask on Stackoverflow instead. –  Punchlinern Apr 1 at 21:11
add comment

1 Answer 1

up vote 1 down vote accepted

You have to give it float:left and removing margin-top will fix this

http://fiddle.jshell.net/4VEfk/3/

http://fiddle.jshell.net/4VEfk/3/show

instead of:

aside { margin-top: 1.83em; width: 320px; float:right; background-color:blue; border-style:solid; } use this:

`aside {
    background-color: #0000FF;
    border-style: solid;
    float: left;
    margin-left: 0.83em;
    width: 320px;
}`
share|improve this answer
    
Thanks for the help! But when I increase the width of the aside. I keep getting this results. jsfiddle.net/9C5Xk/embedded/result –  user2984143 Apr 1 at 20:01
    
fiddle.jshell.net/9C5Xk –  user2984143 Apr 1 at 20:02
    
you can do this fiddle.jshell.net/9C5Xk/1 add them to a div and give them float left :) –  Tarun Apr 1 at 20:11
    
Thanks Tarun, you save me a lot headaches. –  user2984143 Apr 1 at 20:31
    
you welcome just accept the answer so i get few reputation, then i can comment anywhere :p –  Tarun Apr 1 at 21:21
add comment

Not the answer you're looking for? Browse other questions tagged or ask your own question.