Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 4 of 4
  1. #1
    New to the CF scene
    Join Date
    Jul 2010
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    CSS DIV positioning question

    Hello all,

    I am new to this forum and also new to CSS. I have a site that was built totally with tables and now i am slowly trying to build my site in CSS. Things are looking OK, except for a few little issues...

    I have attached an image of what my site looks like now. As you can see the links on the left are not aligned properly with the gallery (main content area). Someone suggested i float the links to the left and the gallery to the right and then clear both. That didnt seem to work. Can someone help me out?

    Thanks in advance!
    Attached Thumbnails Attached Thumbnails CSS DIV positioning question-image.jpg  

  • #2
    Senior Coder
    Join Date
    Feb 2009
    Location
    Ilkley, West Yorkshire, UK
    Posts
    2,956
    Thanks
    9
    Thanked 727 Times in 721 Posts
    Got a link to your page? Otherwise we're just guessing...

  • #3
    New to the CF scene
    Join Date
    Jul 2010
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

  • #4
    Senior Coder
    Join Date
    Feb 2009
    Location
    Ilkley, West Yorkshire, UK
    Posts
    2,956
    Thanks
    9
    Thanked 727 Times in 721 Posts
    You have #sidebar1 floated, with a width of 180px, and then #maincontent next to it with css:

    Code:
    #maincontent {
    clear:both;
    float:right;
    margin:-120px 0 0 195px;
    }
    clear:both means the div will come below any content floated on either side as this says that floated elements are not allowed on either (both) side of the div. You're compensating for this with the negative top margin. Finally, there's no need to float this div as you have allowed space for #sidebar1 with your 195px left margin. So, have a try with:

    Code:
    #maincontent {
    margin-left:195px;
    }
    Have a look here for some info on floats and here for some layouts.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •