Grant Palin
02-03-2004, 09: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é</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é- pretty obvious, isn't it? View my resumé 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 © 2002 to Grant Palin.</p></center>
</div>
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?
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é</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é- pretty obvious, isn't it? View my resumé 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 © 2002 to Grant Palin.</p></center>
</div>
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?