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 6 of 6
  1. #1
    Regular Coder
    Join Date
    May 2008
    Location
    Michigan
    Posts
    216
    Thanks
    10
    Thanked 1 Time in 1 Post

    Trouble positioning DIVs

    Here's the link to the page I'm having trouble coding: www.candi-coded.com/clients/plc.php

    I'm having trouble positioning the main and nav DIVs into the content DIV. I could easily get it to be the way I wanted which is this...



    ...by using tables, but I'm trying to avoid tables. How can I position my DIVs to look like that? Please & thank you!

  • #2
    Regular Coder
    Join Date
    Apr 2008
    Location
    Manila, Philippines
    Posts
    262
    Thanks
    3
    Thanked 12 Times in 12 Posts
    Code:
    <div id="wrapper">
    <div><img scr="/image"></div>
    <div>
         <div id="content">content</div>
         <div id="navigation">navigation</div>
    </div>
    </div>
    Code:
    #wrapper{width:400px;<--for example only set it to your preferred one..
                 }
    #content{width:200px;<--for example only set it to your preferred one..
                  float:left;
                 }
    #navigation{width:200px;<--for example only set it to your preferred one..
                   }
    note that the sum of the widths of #content and #navigation must be equal to the size of width of the #wrapper..

    and the width of the#wrapper should fit the size of the image..

  • #3
    Regular Coder
    Join Date
    May 2008
    Location
    Michigan
    Posts
    216
    Thanks
    10
    Thanked 1 Time in 1 Post
    Well I got them to position the way I want, but if you view my url now...

    www.candi-coded.com/clients/plc.php

    ...The light background color didn't extend. If you highlight that area, you'll see the text. Can you help me with that? And also, my two DIVs inside that particular DIV can't totally add up to it because I added a 3px padding around the edgings.

  • #4
    Regular Coder
    Join Date
    Apr 2008
    Location
    Manila, Philippines
    Posts
    262
    Thanks
    3
    Thanked 12 Times in 12 Posts
    just clear the divs
    Code:
    <div id="wrapper">
    <div><img scr="/image"></div>
    <div>
         <div id="content">content</div>
         <div id="navigation">navigation</div>
    <div class ="clear"></div><---clear here
    </div>
    </div>

    Code:
    .clear{clear:both;}
    heres a link for you to review.. this will teach you about positioning...
    http://www.positioniseverything.net/.../peekaboo.html

    cute girls.. japanese??

  • #5
    Regular Coder
    Join Date
    May 2008
    Location
    Michigan
    Posts
    216
    Thanks
    10
    Thanked 1 Time in 1 Post
    I believe so. The fansite that I'm doing it for is www.candi-coded.com/lichun if you want to learn more about them.

  • #6
    Regular Coder
    Join Date
    Apr 2008
    Location
    Manila, Philippines
    Posts
    262
    Thanks
    3
    Thanked 12 Times in 12 Posts
    so did it solve your problem??

    just let me know... if you have any...


  •  

    Posting Permissions

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