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 3 of 3
  1. #1
    New Coder
    Join Date
    Sep 2005
    Posts
    54
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Weird indentation with div's[FIXED]

    Hi, I'm having trouble with my site template. Here is my XHTML:
    Code:
    <?xml version="1.0" encoding="us-ascii"?>
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en-ca">
    <head>
      <title>Site template</title>
      
      <link rel="stylesheet" type="text/css" href="./resources/style.css" />
    </head>
    <body>
    <div id="navbar">
    <h1>Links</h1>
    <ul>
      <li><a href="http://site/">Home</a></li>
    </ul>
    <hr />
    <h2>Other</h2>
    <ul>
      <li><a href="http://www.google.com/">Google</a></li>
    </ul>
    </div>
    <div id="content-container">
    <div id="content-main">
    <h1>Page Title</h1>
    <h2>Subject</h2>
    <p>
    Foobar
    </p>
    <h2>Subject</h2>
    <p>
    Lorem Ipsum
    </p>
    </div>
    
    <div id="icons">
        <a href="http://validator.w3.org/check?uri=referer"><img src="http://www.w3.org/Icons/valid-xhtml11" alt="Valid XHTML 1.1" height="31" width="88" /></a>
    
    </div>
    </div>
    </body>
    </html>
    and my CSS (./resources/style.css):
    Code:
    /* General Styles */
    
    * {margin:0%;padding:0%;font-family:'Trebuchet MS',sans-serif;}
    
    html,body {height:100%;width:100%;}
    
    img {border-style:none;}
    
    div#content-container {width:80%;height:100%;position:relative;left:20%;}
    
    /* Navbar styles */
    div#navbar {float:left;height:100%;width:20%;padding-left:0.5%;border-right:medium outset #eec;}
    
    div#navbar h1 {font-size:130%;}
    div#navbar h2 {font-size:110%;}
    
    div#navbar ul {padding-left:10%;list-style-type:none;}
    div#navbar ul li a {text-decoration:none;color:#36f;}
    div#navbar ul li a:hover {font-weight:800;color:#ff8c00;opacity:0.7;}
    
    /* Content-main styles */
    
    div#content-main {padding:1%;}
    
    /* Icon styles */
    
    div#icons {padding:1%;}
    For some reason, all the text in content-container is getting shifted to the left (approximately 2 tabspaces). I need the relative positioning so that it go all the way to the right, instead of occupying some of navbar's space and word-wrapping prematurely. The document is being served as application/xhtml+xml.

    I have tried floating content-container to the right instead of using relative positioning, but that pushed it down past the bottom of the screen.

    I would like the solution to work in Firefox and Opera, preferably Safari as well.
    Last edited by darkmage784; 12-23-2005 at 08:42 PM.

  • #2
    Senior Coder
    Join Date
    Jan 2005
    Location
    Memphis, TN
    Posts
    1,801
    Thanks
    8
    Thanked 131 Times in 129 Posts
    Code:
    div#content-container {
        width:80%;
        height:100%;
        position:relative;
        margin-left:20%;
    }
    use mragin-left instead of just left. Since your relative positioning it you need the margin part.
    Stop making things so hard on yourself.
    i is tugbucket :: help raise tugburg :: Whitehaven Kiwanis

  • #3
    New Coder
    Join Date
    Sep 2005
    Posts
    54
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Thank you!


  •  

    Posting Permissions

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