View Full Version : Weird indentation with div's[FIXED]

12-23-2005, 05:03 AM
Hi, I'm having trouble with my site template. Here is my XHTML:

<?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">
<title>Site template</title>

<link rel="stylesheet" type="text/css" href="./resources/style.css" />
<div id="navbar">
<li><a href="http://site/">Home</a></li>
<hr />
<li><a href="http://www.google.com/">Google</a></li>
<div id="content-container">
<div id="content-main">
<h1>Page Title</h1>
Lorem Ipsum

<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>

and my CSS (./resources/style.css):

/* 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.

12-23-2005, 01:56 PM
div#content-container {

use mragin-left instead of just left. Since your relative positioning it you need the margin part.

12-23-2005, 08:42 PM
Thank you!