How do I design this?

Discussion in 'CSS' started by peppy, Jan 29, 2010.

0
  1. #1
    I want to have a simple list of links on the left side of my page and my content to the right side.

    BUT, in my HTML code, I would like my content to appear immediately after the <body> and my links to appear after the content. That way Google indexes the content before the links.

    I noticed a few websites like this and was wondering how to do this.

    Thanks
     
    peppy, Jan 29, 2010 IP
  2. s_ruben

    s_ruben Active Member

    Messages:
    735
    Likes Received:
    26
    Best Answers:
    1
    Trophy Points:
    78
    #2
    Use "float: right" like this example

    
<div style="float: right">content</div>
<div>links</div>
    Code (markup):
     
    s_ruben, Jan 29, 2010 IP
  3. peppy

    peppy Active Member

    Messages:
    389
    Likes Received:
    7
    Best Answers:
    0
    Trophy Points:
    95
    #3
    peppy, Jan 30, 2010 IP
  4. BirdOfPrey

    BirdOfPrey Peon

    Messages:
    32
    Likes Received:
    1
    Best Answers:
    0
    Trophy Points:
    0
    #4
    You also have to apply width values to them so that they don't go over the max width of their parent div, pushing them to the bottom. What I would recommend you do is this:

    
.content{ width:50%; float:right; }
.menu{ width: 50%; float:left; }
    Code (markup):
    Of course, you'll have to make sure other attributes are applied to the content and menu div's for text styling and such, but you need to add those two attributes to the code. Also, you can adjust the percent values if you want one area to be larger than the other, but just make sure they add up to 100%.

    Hope I helped.
     
    BirdOfPrey, Jan 30, 2010 IP
  5. peppy

    peppy Active Member

    Messages:
    389
    Likes Received:
    7
    Best Answers:
    0
    Trophy Points:
    95
    #5
    Awesome, this did the trick! Thanks BirdOfPrey
     
    peppy, Jan 30, 2010 IP
  6. BirdOfPrey

    BirdOfPrey Peon

    Messages:
    32
    Likes Received:
    1
    Best Answers:
    0
    Trophy Points:
    0
    #6
    No problem, very glad I could help.

    Also, as an added tip, you could add a 1% padding to the left and right of the content area, then subtract 2% from the width value, to make it look a bit roomier. But that's optional, it looks fine now.

    Have fun :)
     
    BirdOfPrey, Jan 31, 2010 IP