CODEWITHSUNDEEP
css
BBMAN225
BBMAN225

Reputation: 673

What's wrong with my floating side-bar CSS?

It's something new I'm trying to do, a floating side-bar with fixed position on the left, and main stuff on the right. for some reason a lot of my CSS isn't working. Especially the main being the full 750 pixels instead of only 600 like I said. I've highlighted the different parts on my website if you'd like to see the result ( http://brandonc.handcraft.com/sevenmages/prolouge ):

  <style>
    html { margin: 0; padding: 0; }
    body { background-image: url('old-paper-texture.jpg'); margin: 0; padding: 0; }
    #wrap { width: 750px; margin: auto; }
    #header { background: purple; }
    #header h1 { text-align: center; }
    #header h2 { text-align: center; }
    #header h3 { text-align: center; }
    #main { float: right; width: 600; background: blue;}
    #main p { font-family: arial; font-size: 3;  margin: 20 30; text-align: left; text-indent: 30px; }
    #main h1 { font-family: Macondo Swash Caps; text-align: center; }
    #main h2 { font-family: Macondo Swash Caps; text-align: center; }
    #main h3 { text-align: center; }
    #sidebar { position: fixed; margin: 0; padding: 0; text-indent: 0; background: red; float: left; width: 150; }
    #sidebar p { text-align: center; text-indent: 0; }
    #sidebar il { text-align: center; }
    #sidebar ul {  }
    #sidebar a:link { color: #000000; text-decoration: none; font-family: Macondo Swash Caps; font-size: 15; }
    #sidebar a:visited { color: #000000; text-decoration: none; font-family: Macondo Swash Caps; font-size: 15; }
    #sidebar a:hover { color: #000000; text-decoration: none; font-family: Macondo Swash Caps; font-size: 15; }
    #sidebar a:active { color: #000000; text-decoration: none; font-family: Macondo Swash Caps; font-size: 15; }
    #footer { margin: 20 0; text-align: center; background: green; }
  </style>

Note: wrap is all of the div's, basically like a body function.

Upvotes: 0

Views: 96

Answers (2)

Adrift
Adrift

Reputation: 59779

You didn't specify a unit for your #main div width, which is invalid CSS - the browser ignores the width property you have set currently .. just include px after 600 and that should work as expected ..

Also add a px value to the width set on #sidebar

Instead of width: 150; make it width: 150px;

Upvotes: 2

Michal
Michal

Reputation: 2532

You need to include the unit, here 'px'. So change '600' to '600px'. That should take you in the right direction.

Upvotes: 1

Related Questions