View Full Version : I'm having trouble with a div layout - advice please

Grant Palin
02-03-2004, 10:57 PM
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:

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:

<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 id="content">
<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>

Here's a link to the page I'm working on: link (http://deepblue.cs.camosun.bc.ca/~cst02039/index2.htm)

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?

Roy Sinclair
02-03-2004, 11:02 PM
Swap the "float: right" and the "float: left" properties in the CSS.

Grant Palin
02-03-2004, 11:18 PM
Argghhhhh...I can't believe I did that:mad:

It's right now.


Roy Sinclair
02-04-2004, 04:02 PM
The obvious is sometimes the hardest thing to see.

Grant Palin
02-04-2004, 06:33 PM
Oh, I know - all to well! It usually takes another pair of eyes to see it.