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 5 of 5
  1. #1
    Regular Coder
    Join Date
    Jun 2002
    Location
    Victoria, BC, Canada
    Posts
    962
    Thanks
    0
    Thanked 1 Time in 1 Post

    I'm having trouble with a div layout - advice please

    I've decided to convert my website from using a tabular layout to a div-based layout.

    I'm having some trouble though. I had a simple two column table before, which I'm changing to a left div with links, and a large main div for content.

    Here is the CSS I'm using for the divs:
    Code:
    div#nav {
      width: 10%;
      float: right;
      border: 1px solid #FF0000;
    }
    
    div#content {
      width: 80%;
      float: left;
      border: 1px solid #FF0000;
    }
    And here's the HTML:
    Code:
        <div id="nav">
          <img src="Images/Logo.jpg" width="119" height="57" border="0" alt="Grant Palin" />
          <br />
          <a href="index2.htm" class="nav">Home</a><br />
          <a href="AboutMe.htm" class="nav">About Me</a><br />
          <a href="Resume.htm" class="nav">Resum&eacute;</a><br />
          <a href="DigitalPortfolio.htm" class="nav">Digital Portfolio</a><br />
          <a href="Links.htm" class="nav">Links</a><br />
          <a href="Contact.htm" class="nav">Contact</a><br />
        </div>
    
        <div id="content">
          <h1>Welcome...</h1>
          <hr width="100%" />
          <hr width="80%" />
          <hr width="60%" />
          <br />
    
          <p>Welcome to my personal page.  This page contains (or soon will contain) lots of information about me, my interests, and what I'm doing in school.  Below is a brief description of each of the pages on this site.</p>
    
          <p>About Me- find out about me: school, interests, hobbies, future goals, and so on.</p>
          <p>Resum&eacute;- pretty obvious, isn't it?  View my resum&eacute; online.</p>
          <p>Digital Portfolio- contains a showcase of the work I have done in school.</p>
          <p>Links- contains links to some of my favorite sites.  Find out what I like to visit!</p>
          <p>Contact- you can contact me if you like.</p>
    
          <p>I update this site regularly, so be sure to check back once in a while to see what's new.</p>
          <br />
    
          <center><p>This site and it's contents are copyright &copy; 2002 to Grant Palin.</p></center>
        </div>
    Here's a link to the page I'm working on: link

    When I view the page over the web (Internet Explorer 6, Windows XP, 1024 by 768), I get the nav div on the right, and the content div on the left, when I want it the other way around (just so you know, I added the red border to be able to see where the divs appear).

    Any suggestions?

  • #2
    Senior Coder
    Join Date
    Jun 2002
    Location
    Wichita
    Posts
    3,880
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Swap the "float: right" and the "float: left" properties in the CSS.
    Check out the Forum Search. It's the short path to getting great results from this forum.

  • #3
    Regular Coder
    Join Date
    Jun 2002
    Location
    Victoria, BC, Canada
    Posts
    962
    Thanks
    0
    Thanked 1 Time in 1 Post
    Argghhhhh...I can't believe I did that

    It's right now.

    Thanks!

  • #4
    Senior Coder
    Join Date
    Jun 2002
    Location
    Wichita
    Posts
    3,880
    Thanks
    0
    Thanked 0 Times in 0 Posts
    The obvious is sometimes the hardest thing to see.
    Check out the Forum Search. It's the short path to getting great results from this forum.

  • #5
    Regular Coder
    Join Date
    Jun 2002
    Location
    Victoria, BC, Canada
    Posts
    962
    Thanks
    0
    Thanked 1 Time in 1 Post
    Oh, I know - all to well! It usually takes another pair of eyes to see it.


  •  

    Posting Permissions

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