SitePoint.com

camm · Sep 12, 2004, 12:02

I have (thanks, Paul) a reasonable looking two column page edging closer to completion. It was composed with my display set at 1024x768, but I felt certain my dimensions and centring would accomodate 800x600. I was wrong.
I had recalled that 800 really means 7xx. I aimed for 760, but apparently I should have aimed lower. Now I'm trying to make adjustments, and nothing I've tried seems to work. I have the feeling that it is the combination of absolute units (pixels) and relative units (percentage) in the descending layers, but each combination I've tried yields a bad result. As soon as I fiddle with the percentages for the div#nav and div#main, the main box and all its contents drop down below the left side nav.
Would I welcome some help? Why, yes, thank you ... I most certainly would!!!
As ever, my gratitude...
Cam

Here is the code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">


<head>
<title>Floraworld.ca Trial Run -- Occasions Template</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
"stylesheet" type="text/css"
<style>
body {
background-color: #50519D;
font-size:12px;
font-family:Verdana, Arial, Helvetica, sans-serif;
text-align: center;
}
h1 text-align: center; }
h2 {text-align: center;}
h3 {text-align: center;}
h4 {text-align: center;}
div#outer {
width: 80%;
background-color:#fffae6;
margin-top: 50px;
margin-bottom: 50px;
margin-left: auto;
margin-right: auto;
padding: 0px;
border: thin solid #000000;
text-align: left;
}
div#header {
padding: 15px;
margin-top: 5px;
margin-bottom: 5px;
margin-left: 5px;
margin-right: 5px;
height: 100px;
text-align: center;
}
#header img {
width: 747px;
height: 73px;
border-style: ridge;
border-color: #e6edff;
border-width: 5px;
}
div#buttonA {
margin-top: 15px;
margin-bottom: 30px;
}
div#buttonb, div#buttonc, div#buttond, div#buttone {
float: left;
margin-top: 15px;
margin-left: 2%;
margin-bottom: 30px;
}
div#buttone {
clear: both;
}
div#buttonA ul, div#buttonb ul, div#bottonc ul, div#bottond ul, div#bottone ul, {
margin: 0px;
padding: 0px;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
line-height: 30px;
}
div#buttonA li, div#buttonb li, div#buttonc li, div#buttond li, div#buttone li {
list-style-type: none;
height: 30px;
margin: 5px;
text-align:center;
}
div#buttonA li {
width: 180px;
}
div#buttonb li, div#buttonc li, div#buttond li, div#buttone li {
width: 400px;
}
div#buttonA li a, div#buttonb li a, div#buttonc li a, div#buttond li a, div#buttone li a {
text-decoration: none;
display: block;
background-color: #839dff;
border-style: solid;
border-bottom-color: #717a9f;
border-right-color: #6276bf;
border-left-color: #c1ceff;
border-top-color: #cbebff;
}
div#buttonA li a:link, div#buttonb li a:link, div#buttonc li a:link, div#buttond li a:link, div#buttone li a:link {
color: #000000;
font-weight: bold;
background-color: #839dff;
border-style: solid;
border-bottom-color: #717a9f;
border-right-color: #6276bf;
border-left-color: #c1ceff;
border-top-color: #cbebff;
}
div#buttonA li a:visited, div#buttonb li a:visited, div#buttonc li a:visited, div#buttond li a:visited, div#buttone li a:visited {
color: #000000;
font-weight: normal;
background-color: #839dff;
border-style: solid;
border-bottom-color: #717a9f;
border-right-color: #6276bf;
border-left-color: #c1ceff;
border-top-color: #cbebff;
}
div#buttonA li a:hover, div#buttonb li a:hover, div#buttonc li a:hover, div#buttond li a:hover, div#buttone li a:hover {
font-weight: bold;
color: #FFFFFF;
background-color: #414e80;
border-style: solid;
border-right-color: #c1ceff;
border-bottom-color: #cbebff;
border-top-color: #717a9f;
border-left-color: #6276bf;
}
div#buttonA li a:active, div#buttonb li a:active, div#buttonc li a:active, div#buttonb li d:active, div#buttone li a:active {
font-weight: bold;
color: #FFFFFF;
background-color: #717a9f;
border-style: solid;
border-right-color: #c1ceff;
border-bottom-color: #cbebff;
border-top-color: #717a9f;
border-left-color: #6276bf;
}
.thinline {
line-height: 1.2em;
}
div#nav {
width: 25%;
padding: 5px;
margin-top: 1px;
/*margin-left: 5px;*/
margin-left: 10px;
border-style: solid;
border-color: #50519D; /*#192d19;*/
border-width: 2px;
background-color: #e6edff;
float: left;
display: inline; /*ie fix*/
}
div#nav ul {
margin: 5px;
padding: 0px;
font-family: Arial, Helvetica, sans-serif;
font-size: small;
color: #000;
line-height: 30px;
/*text-align: center;*/
test-align: left;
}
div#nav li {
list-style-type: none;
}
div#nav li a {
text-decoration: none;
padding: 7px 10px;
color: #000;
}
div#nav lia:link {
color: #000:
}
div#nav lia:visited {
color: #CCC;
}
div#nav lia:hover {
font-weight: bold;
color: #000;
background-color: #3366FF;
}
div#main {
margin-left: 30%;
margin-top: 1px;
margin-right: 10px;
border-style: solid;
border-color: #50519D; /*192d19;*/
border-width: 2px;
background-color: #ffe480;
padding: 10px;
}
* html div#main {height:1%}/* ie fix*/

div#main1 {
margin-left: 1px;
margin-top: 1px;
margin-right: 1px;
margin-bottom: 1px;
}
div#main2 {text-align: left;}

div#main2-sample1, #main2-sample2, #main2-sample3 {
float: left;
width: 150px;
height: 205px;
padding-top: 15px;
background-color: #ffffff;
border: 1px solid #000000;
text-align: center;
margin-left: 2%;
margin-bottom: 5px;
display:inline;/*ie fix*/
}
div#main2-sample2 {
background color: #ffc2ff;
}
div#main2-sample3 {
background color: #d6ffff;
}
div#main3 {
margin-left: 1px;
margin-top: 1px;
margin-right: 1px;
margin-bottom: 1px;
}
div#main3 ul {
margin: 5px;
padding: 0px;
font-family: Arial, Helvetica, sans-serif;
font-size: small;
color: #000;
line-height: 30px;
text-align: center;
}
div#main3 li {
list-style-type: none;
display: inline;
}
div#main3 li a {
text-decoration: none;
padding: 7px 10px;
color: #000;
}
div#main3 lia:link {
color: #000:
}
div#main3 lia:visited {
color: #CCC;
}
div#main3 lia:hover {
font-weight: bold;
color: #000;
background-color: #3366FF;
}
div#main4 {
margin-left: 1px;
margin-top: 1px;
margin-right: 1px;
margin-bottom: 1px;
}
div#main5 {
margin-left: 1px;
margin-top: 1px;
margin-right: 1px;
margin-bottom: 1px;
clear: both;
}
div#footer {
padding: 15px;
margin: 5px;
border-top: thin solid #50519D /*#000000;*/
}
img#flowers{
float: right;
width: 200px;
height:280px;
margin:5px;
}
img#ftdlogo{
margin-left: 40px;
margin-right: 15px;
margin-bottom: 30px;
}
img#fpologo{
margin-left: 40px;
margin-right: 15px;
margin-bottom: 30px;
}

img#main2_im1{
width: 100px;
height: 116px;
}
img#main2_im2{
width: 100px;
height: 116px;
}
img#main2_im3{
width: 100px;
height: 116px;
}

</style>
</head>
<body>
<div id="outer">
<div id="header"><img alt="floraworld 1-888-rose-888" src="images/FWca_header.gif" /> </div>

<div id="nav">
<div id="buttonA">
<ul>
<li><a href="link1.html">Order Flowers Now</a></li>
</ul>
</div>
<h4>Useful Flower Facts<br /> & More</h4>
<ul>
<li><a href="link2.html">Flower Care</a></li>
<li><a href="link2.html">Flower Holidays</a></li>
<li class="thinline"><a href="link2.html">Flower, Fruit and <br />&nbsp Gourmet Food Baskets</a></li>
<li><a href="link2.html">Monthly Flower Charts</a></li>
<li><a href="link2.html">Monthly Birth Stones</a></li>
<li><a href="link2.html">Plants & Planter Baskets</a></li>
<li><a href="link2.html">Flower Reminder Service</a></li>
</ul>
<br />
<br />

<img id="ftdlogo" src="images/ftdlogo.jpg" alt="FTD" />
<img id="fpologo" src="images/fpo_logo2.jpg" alt="Flower Promotion Organization" />
<br />
<br />

<h4>Popular Flower Varieties<br /> for Delivery in Canada</h4>
<p>Agapanthus, Alstroemeria, Aster, Bird Of Paradise, Bouvardia, Calla Lilies, Carnations/Mini Carnations, Chrysanthemums/Pompons, Daffodils, Delphinium (aka Larkspur), Freesia, Gerbera Daisies, Gladioli, Godetia, Gypsophila, Iris, Liatris, Lilies, Limonium, Orchids, Ornithogalum, Queen Anne's Lace, Roses, Snapdragons, Statice, Stock, Tulips</p>
<br />
<br />
<br />
<br />
</div>

<div id="main">
<div id="main1">
<h2>Send Anniversary Flowers in Canada</h2>
<h3>Order Online from FloraWorld</h3>
<h4>Have your Anniversary Flowers Delivered by Floraworld</h4>
<img id="flowers" src="images/covermain.jpg" alt="flowers delivered" />

<p>When you can't make a personal delivery,<br />
trust western Canada's home-grown floral delivery service to make it right!</p>
<p>Working with the best local flower shops<br />
(FTD, Teleflora and Grower Direct),<br />
Floraworld offers

/p>
<p>&nbsp &nbsp -- easy, secure online ordering</p>
<p>&nbsp &nbsp -- fast, reliable floral delivery<br />
&nbsp &nbsp &nbsp &nbsp (same day delivery on early orders)</p>
<p>&nbsp &nbsp -- Aeroplan Miles (or CAA Discount)<br />
&nbsp &nbsp &nbsp &nbsp with every order</p>
<p>&nbsp &nbsp -- the freshest roses and other cut flowers<br />
&nbsp &nbsp &nbsp &nbsp in exquisite bouquets and arrangements</p>

<br />
<br />
<br />
<br />
</div>
<div id="main2">
<h2>Popular Anniversary Selections</h2>
<div id="main2-sample1"><img id="main2_im1" src="images/tnail_C4-3020.jpg" alt="flowers delivered" />
<p>Image Title</p>
<p>Image Price</p>
</div>
<div id="main2-sample2"><img id="main2_1m2" src="images/tnail_C4-3020.jpg" alt="flowers delivered" />
<p>Image Title</p>
<p>Image Price</p>
</div>
<div id="main2-sample3"><img id="main2_im3" src="images/tnail_C4-3020.jpg" alt="flowers delivered" />
<p>Image Title</p>
<p>Image Price</p>
</div>
</div>
<br />
<div id="buttonb">
<ul>
<li><a href="link1.html">To View the Entire FloraWorld Selection, CLICK HERE</a></li>
</ul>
</div>
<br />
<br />
<div id="main3">
<h2>Favourite Canadian Locations for<br />
Anniversary Flower Delivery</h2>
<h3>Popular Places to Send Flowers in Canada</h3>
<ul>
<li><a href="link1.html">Victoria, British Columbia</a></li>
<li><a href="link2.html">Vancouver BC</a></li>
<li><a href="link3.html">Kelowna BC</a></li>
</ul>
<ul>
<li><a href="link4.html">Edmonton, Alberta</a></li>
<li><a href="link5.html">Calgary, Alberta</a></li>
<li><a href="link6.html">Regina, Saskachewan</a></li>
</ul>
<ul>
<li><a href="link7.html">Saskatoon, Saskatchewan</a></li>
<li><a href="link8.html">Winnipeg, Manitoba</a></li>
<li><a href="link9.html">Toronto, Ontario</a></li>
</ul>
<ul>
<li><a href="link10.html">Ottawa, Ontario</a></li>
<li><a href="link11.html">Montreal, Quebec</a></li>
<li><a href="link12.html">Moncton, New Brunswick</a></li>
</ul>
<ul>
<li><a href="link13.html">Saint John, New Brunswick</a></li>
<li><a href="link14.html">Halifax, Nova Scotia</a></li>
<li><a href="link15.html">Charlottetown, PEI</a></li>
</ul>
<ul>
<li><a href="link16.html">St. Johns, Newfoundland</a></li>
<li><a href="link17.html">Yellowknife, NWT</a></li>
<li><a href="link18.html">Whitehorse, Yukon</a></li>
</ul>

<ul>
<li><a href="link19.html">All Other Canadian Locations</a></li>
</ul>
</div>
<div id="buttonc">
<ul>
<li><a href="link1.html">Order Flowers Now</a></li>
</ul>
</div>

<div id="main4">
<br />
<br />
<h2>U.S.A. Flower Delivery</h2>
</div>
<div id="buttond">
<ul>
<li><a href="link1.html">For Flower Delivery in the USA, CLICK HERE</a></li>
</ul>

</div>
<br />
<br />
<div id="main5">
<h2>International Flower Delivery</h2>
</div>
<div id="buttone">
<ul>
<li><a href="link1.html">To Order Flowers for International Delivery, CLICK HERE</a></li>
</ul>
<br />
<br />
</div>
<br />
<br />
</div>

<div id="footer">
<p>Floraworld 1-888-ROSE-888 (1-888-767-3888) &nbsp &nbsp &nbsp &nbsp  |&nbsp
&nbsp &nbsp &nbsp &nbsp   Site Map &nbsp &nbsp &nbsp &nbsp &nbsp  |&nbsp
&nbsp &nbsp &nbsp &nbsp   Contact Us</p>
</div>
</div>
</body>
</html>

Paul O'B · Sep 12, 2004, 14:35

Hi,

I haven't had time to give this the work it needs but you need to think about whther you want a fixed or a fluid width.

You have used 2 fluid columns but you have put above them a fixed header image that will no go any smaller than 747px plus its margins. This means that the rst of the page will get smallwer but the header will stay where it is and look very strange and different in various browsers.

If you wwant a full length header image then go for a background image so that it doesn't interfere with the page.

Also in your column you have added fix width elements that soon stop them collapsing so again a fixed width column (especially the first one would be easier to code and look better).

I've tidied some things up a bit but may have caused more problems than it solves lol. So don't take it as a full solution as I haven't had a lot of time to work on it.

Code:

 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<!--meta tags to come -->
<head>
<title>Floraworld.ca Trial Run -- Occasions Template</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/css">
body {
background-color: #50519D;
font-size:12px;
font-family:Verdana, Arial, Helvetica, sans-serif;
text-align: center;
}
h1 {text-align: center; }
h2 {text-align: center;}
h3 {text-align: center;}
h4 {text-align: center;}
div#outer {
width: 80%;
background-color:#fffae6;
margin-top: 50px;
margin-bottom: 50px;
margin-left: auto;
margin-right: auto;
padding: 0px;
border: thin solid #000000;
text-align: left;
}
div#header {
padding: 15px;
margin-top: 5px;
margin-bottom: 5px;
margin-left: 5px;
margin-right: 5px;
height: 100px;
text-align: center;
}
#header img {
width: 747px;
height: 73px;
border-style: ridge;
border-color: #e6edff;
border-width: 5px;
}
div#buttonA {
margin-top: 15px;
margin-bottom: 30px;
margin-left: 2%;
clear:both;
width:96%;
}
div#buttonb, div#buttonc, div#buttond, div#buttone {
margin-top: 15px;
margin-left: 2%;
margin-bottom: 30px;
clear:both;
width:96%;
}
div#buttone {
clear: both;
}
div#buttonA ul, div#buttonb ul, div#bottonc ul, div#bottond ul, div#bottone ul, {
margin: 0px;
padding: 0px;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
line-height: 30px;
}
div#buttonA li, div#buttonb li, div#buttonc li, div#buttond li, div#buttone li {
list-style-type: none;
margin: 5px;
text-align:center;
}
div#buttonA li {
}
div#buttonb li, div#buttonc li, div#buttond li, div#buttone li {
}
div#buttonA li a, div#buttonb li a, div#buttonc li a, div#buttond li a, div#buttone li a {
text-decoration: none;
display: block;
background-color: #839dff;
border-style: solid;
border-bottom-color: #717a9f;
border-right-color: #6276bf;
border-left-color: #c1ceff;
border-top-color: #cbebff;
color: #000000;
font-weight: bold;
}
/* commented backslash mac hiding hack \*/ 
* html div#buttonA li a,* html div#buttonb li a,* html div#buttonc li a,* html div#buttond li a,* html div#buttone li a {
height:1%;position:relative;}
/* end hack */ 
div#buttonA li a:visited, div#buttonb li a:visited, div#buttonc li a:visited, div#buttond li a:visited, div#buttone li a:visited {
font-weight: normal;
}
div#buttonA li a:hover, div#buttonb li a:hover, div#buttonc li a:hover, div#buttond li a:hover, div#buttone li a:hover {
color: #FFFFFF;
background-color: #414e80;
border-style: solid;
border-right-color: #c1ceff;
border-bottom-color: #cbebff;
border-top-color: #717a9f;
border-left-color: #6276bf;
}
div#buttonA li a:active, div#buttonb li a:active, div#buttonc li a:active, div#buttonb li d:active, div#buttone li a:active {
color: #FFFFFF;
background-color: #717a9f;
border-style: solid;
border-right-color: #c1ceff;
border-bottom-color: #cbebff;
border-top-color: #717a9f;
border-left-color: #6276bf;
}
.thinline {
line-height: 1.2em;
}
#navouter {
width: 27%;
margin-top: 1px;
margin-left: 10px;
float: left;
display: inline; /*ie fix*/
}
* html div#navouter {margin-right:-3px;}
div#nav {
padding: 5px;
/*margin-left: 5px;*/
border-style: solid;
border-color: #50519D; /*#192d19;*/
border-width: 2px;
background-color: #e6edff;
}
div#nav ul {
margin: 5px;
padding: 0px;
font-family: Arial, Helvetica, sans-serif;
font-size: small;
color: #000;
line-height: 30px;
/*text-align: center;*/
test-align: left;
}
div#nav li {
list-style-type: none;
}
div#nav li a {
text-decoration: none;
padding: 7px 10px;
color: #000;
}
div#nav lia:link {
color: #000:
}
div#nav lia:visited {
color: #CCC;
}
div#nav lia:hover {
font-weight: bold;
color: #000;
background-color: #3366FF;
}
div#main {
margin-left: 30%;
margin-right:10px;
margin-top: 1px;
border-style: solid;
border-color: #50519D; /*192d19;*/
border-width: 2px;
background-color: #ffe480;
padding: 10px;
}
* html div#main {height:1%;position:relative;}/* ie fix*/
div#main1 {
margin-left: 1px;
margin-top: 1px;
margin-right: 1px;
margin-bottom: 1px;
}
div#main2 {text-align: left;width:99%;}
div#main2-sample1, #main2-sample2, #main2-sample3 {
float: left;
width: 150px;
height: 205px;
padding-top: 15px;
background-color: #ffffff;
border: 1px solid #000000;
text-align: center;
margin-left: 2%;
margin-bottom: 5px;
display:inline;/*ie fix*/
}
div#main2-sample2 {
background color: #ffc2ff;
}
div#main2-sample3 {
background color: #d6ffff;
}
div#main3 {
margin-left: 1px;
margin-top: 1px;
margin-right: 1px;
margin-bottom: 1px;
}
div#main3 ul {
margin: 5px;
padding: 0px;
font-family: Arial, Helvetica, sans-serif;
font-size: small;
color: #000;
line-height: 30px;
text-align: center;
}
div#main3 li {
list-style-type: none;
display: inline;
}
div#main3 li a {
text-decoration: none;
padding: 7px 10px;
color: #000;
}
div#main3 lia:link {
color: #000:
}
div#main3 lia:visited {
color: #CCC;
}
div#main3 lia:hover {
font-weight: bold;
color: #000;
background-color: #3366FF;
}
div#main4 {
margin-left: 1px;
margin-top: 1px;
margin-right: 1px;
margin-bottom: 1px;
}
div#main5 {
margin-left: 1px;
margin-top: 1px;
margin-right: 1px;
margin-bottom: 1px;
clear: both;
}
div#footer {
padding: 15px;
margin: 5px;
border-top: thin solid #50519D /*#000000;*/
}
img#flowers{
float: right;
width: 200px;
height:280px;
margin:5px;
}
img#ftdlogo{
margin-left: 40px;
margin-right: 15px;
margin-bottom: 30px;
}
img#fpologo{
margin-left: 40px;
margin-right: 15px;
margin-bottom: 30px;
}
img#main2_im1{
width: 100px;
height: 116px;
}
img#main2_im2{
width: 100px;
height: 116px;
}
img#main2_im3{
width: 100px;
height: 116px;
}
</style></head>
<body> 
<div id="outer"> 
   <div id="header"><img alt="floraworld 1-888-rose-888" src="images/FWca_header.gif" /> 
  </div>
  <div id="navouter"> 
  <div id="nav"> 
	  <div id="buttonA"> 
	  <ul>
		<li><a href="link1.html">Order Flowers Now</a></li>
	  </ul>
	</div>
	<h4>Useful Flower Facts<br />
	  & More</h4>
	<ul>
	  <li><a href="link2.html">Flower Care</a></li>
	  <li><a href="link2.html">Flower Holidays</a></li>
	  <li class="thinline"><a href="link2.html">Flower, Fruit and <br />
		&nbsp Gourmet Food Baskets</a></li>
	  <li><a href="link2.html">Monthly Flower Charts</a></li>
	  <li><a href="link2.html">Monthly Birth Stones</a></li>
	  <li><a href="link2.html">Plants & Planter Baskets</a></li>
	  <li><a href="link2.html">Flower Reminder Service</a></li>
	</ul>
	<br />
	<br />
	<img id="ftdlogo" src="images/ftdlogo.jpg" alt="FTD" /> <img id="fpologo" src="images/fpo_logo2.jpg" alt="Flower Promo" /> 
	<br />
	<br />
	<h4>Popular Flower Varieties<br />
	  for Delivery in Canada</h4>
	<p>Agapanthus, Alstroemeria, Aster, Bird Of Paradise, Bouvardia, Calla Lilies, 
	  Carnations/Mini Carnations, Chrysanthemums/Pompons, Daffodils, Delphinium 
	  (aka Larkspur), Freesia, Gerbera Daisies, Gladioli, Godetia, Gypsophila, 
	  Iris, Liatris, Lilies, Limonium, Orchids, Ornithogalum, Queen Anne's Lace, 
	  Roses, Snapdragons, Statice, Stock, Tulips</p>
	<br />
	<br />
	<br />
	<br />
  </div>
  </div>
  <div id="main"> 
	  <div id="main1"> 
	  <h2>Send Anniversary Flowers in Canada</h2>
	  <h3>Order Online from FloraWorld</h3>
	  <h4>Have your Anniversary Flowers Delivered by Floraworld</h4>
	  <img id="flowers" src="images/covermain.jpg" alt="flowers delivered" /> 
	  <p>When you can't make a personal delivery,<br />
		trust western Canada's home-grown floral delivery service to make it right!</p>
	  <p>Working with the best local flower shops<br />
		(FTD, Teleflora and Grower Direct),<br />
		Floraworld offers:</p>
	  <p>&nbsp &nbsp -- easy, secure online ordering</p>
	  <p>&nbsp &nbsp -- fast, reliable floral delivery<br />
		&nbsp &nbsp &nbsp &nbsp (same day delivery on early orders)</p>
	  <p>&nbsp &nbsp -- Aeroplan Miles (or CAA Discount)<br />
		&nbsp &nbsp &nbsp &nbsp with every order</p>
	  <p>&nbsp &nbsp -- the freshest roses and other cut flowers<br />
		&nbsp &nbsp &nbsp &nbsp in exquisite bouquets and arrangements</p>
	  <br />
	  <br />
	  <br />
	  <br />
	</div>
	<div id="main2"> 
	  <h2>Popular Anniversary Selections</h2>
	 
   <div id="main2-sample1"><img id="main2_im1" src="images/tnail_C4-3020.jpg" alt="flowers delivered" /> 
		<p>Image Title</p>
		<p>Image Price</p>
	  </div>
	  <div id="main2-sample2"><img id="main2_1m2" src="images/tnail_C4-3020.jpg" alt="flowers delivered" /> 
		<p>Image Title</p>
		<p>Image Price</p>
	  </div>
	  <div id="main2-sample3"><img id="main2_im3" src="images/tnail_C4-3020.jpg" alt="flowers delivered" /> 
		<p>Image Title</p>
		<p>Image Price</p>
	  </div>
	</div>
	<br />
	<div id="buttonb" style="clear:both"> 
	  <ul>
		<li><a href="link1.html">To View the Entire FloraWorld Selection, CLICK 
		  HERE</a></li>
	  </ul>
	</div>
	<br />
	<br />
	<div id="main3"> 
	  <h2>Favourite Canadian Locations for<br />
		Anniversary Flower Delivery</h2>
	  <h3>Popular Places to Send Flowers in Canada</h3>
	  <ul>
		<li><a href="link1.html">Victoria, British Columbia</a></li>
		<li><a href="link2.html">Vancouver BC</a></li>
		<li><a href="link3.html">Kelowna BC</a></li>
	  </ul>
	  <ul>
		<li><a href="link4.html">Edmonton, Alberta</a></li>
		<li><a href="link5.html">Calgary, Alberta</a></li>
		<li><a href="link6.html">Regina, Saskachewan</a></li>
	  </ul>
	  <ul>
		<li><a href="link7.html">Saskatoon, Saskatchewan</a></li>
		<li><a href="link8.html">Winnipeg, Manitoba</a></li>
		<li><a href="link9.html">Toronto, Ontario</a></li>
	  </ul>
	  <ul>
		<li><a href="link10.html">Ottawa, Ontario</a></li>
		<li><a href="link11.html">Montreal, Quebec</a></li>
		<li><a href="link12.html">Moncton, New Brunswick</a></li>
	  </ul>
	  <ul>
		<li><a href="link13.html">Saint John, New Brunswick</a></li>
		<li><a href="link14.html">Halifax, Nova Scotia</a></li>
		<li><a href="link15.html">Charlottetown, PEI</a></li>
	  </ul>
	  <ul>
		<li><a href="link16.html">St. Johns, Newfoundland</a></li>
		<li><a href="link17.html">Yellowknife, NWT</a></li>
		<li><a href="link18.html">Whitehorse, Yukon</a></li>
	  </ul>
	  <ul>
		<li><a href="link19.html">All Other Canadian Locations</a></li>
	  </ul>
	</div>
	<div id="buttonc"> 
	  <ul>
		<li><a href="link1.html">Order Flowers Now</a></li>
	  </ul>
	</div>
	<div id="main4"> <br />
	  <br />
	  <h2>U.S.A. Flower Delivery</h2>
	</div>
	<div id="buttond"> 
	  <ul>
		<li><a href="link1.html">For Flower Delivery in the USA, CLICK HERE</a></li>
	  </ul>
	</div>
	<br />
	<br />
	<div id="main5"> 
	  <h2>International Flower Delivery</h2>
	</div>
	<div id="buttone"> 
	  <ul>
		<li><a href="link1.html">To Order Flowers for International Delivery, 
		  CLICK HERE</a></li>
	  </ul>
	  <br />
	  <br />
	</div>
	<br />
	<br />
  
  </div>
  <div id="footer"> 
	<p>Floraworld 1-888-ROSE-888 (1-888-767-3888) &nbsp &nbsp &nbsp &nbsp &nbsp;|&nbsp 
	  &nbsp &nbsp &nbsp &nbsp &nbsp; Site Map &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp;|&nbsp 
	  &nbsp &nbsp &nbsp &nbsp &nbsp; Contact Us</p>
  </div>
</div>
</body>
</html>

However I think you may want to reconsider your design and maybe start again. Try not to mix percentage widths and then add pixel padding and expect them to fit. You need to put the padding on inner elements to keep the width constant.

Hope that helps anyway.

Paul

camm · Sep 13, 2004, 14:11

Quote:

Originally Posted by Paul O'B

Hi,
If you wwant a full length header image then go for a background image so that it doesn't interfere with the page.

I don't understand this. Why does a background image not interfere with the page?

Quote:

Originally Posted by Paul O'B

I think you may want to reconsider your design and maybe start again. Try not to mix percentage widths and then add pixel padding and expect them to fit. You need to put the padding on inner elements to keep the width constant.Paul

I'm going to follow your advice and start again, with fixed widths. Hindsight suggests that I may encounter fewer difficulties. I confess that I considered that approach when I was starting this project and decided on floats for no better reason than that it seemed more interesting and more likely to teach me. It's done that alright, but these headaches keep coming back

So.. fixed widths ... if I start with 750px and work my way in, will I be alright at 800x600 in all the main browsers? I thought I'd move the material in the current nav-div over to the right in order to get the main content up higher in the html, allocating 460px to the main container and 210px to the new right side box. I will reduce the size of the header image to about 720px (including border) and reduce the size of the 3 main2-sample divs (which act as containers for sample floral images) from 150px each to 130px each.

Comments? And any further guidance (to tutorials or discussion threads) about using fixed width layout?
By the way, I intend to take a closer look at the code revisions you suggested above -- who knows, a blinding revelation may occur, obviating the need for a fresh start!! Thanks again, Paul
regards,
Cam

camm · Sep 13, 2004, 14:13

If I'd known that damned thing was going to nod, I wouldn't have used it.
Sorry if it aggravates anyone :/
Cam

Paul O'B · Sep 13, 2004, 15:42

Quote:

don't understand this. Why does a background image not interfere with the page?

Well in your page you have used a header image that is 747px wide. This will hold the page open at 747px while other content decreases around it (depending on browser.

This means you would probably have been better off with a fixed width in the first place as there is not much room for fluidity.

If you put the image in the background of the header and make the header fluid then the page will reduce nicely and you will still see some of the image. You may have to be creative and use an image that works in larger resolutions or can be repeated.

I think you are taking the best route by trying different designs. You will learn so much more and then you can make your own decisions. If I was doing a fluid design I would keep ne column fixed and the other column fluid and probably make the page as wide as possible (or just a small margin around the page). This would give you more room for larger images.

Ie does have a problem with floats and large images and will drop floats below adjacent content even when there is nowhere to go. Thats why I usually try to avoid large images or fixed content next to floats.

A fixed width design doesn't have these problems because nothing reduces. However, you loose the fluidity that other methods provide.

Hesrs a link to all the llayouts you could possibly want

http://css-discuss.incutio.com/?page=FrontPage

(I'm in there somewhere

)

Paul

Thread Tools
Show Printable Version Email this Page
Display Modes
Linear Mode Switch to Hybrid Mode Switch to Threaded Mode

Sep 12, 2004, 12:02	#1
camm SitePoint Enthusiast Join Date: Aug 2004 Location: edmonton, canada Posts: 32	adjusting for browser display size I have (thanks, Paul) a reasonable looking two column page edging closer to completion. It was composed with my display set at 1024x768, but I felt certain my dimensions and centring would accomodate 800x600. I was wrong. I had recalled that 800 really means 7xx. I aimed for 760, but apparently I should have aimed lower. Now I'm trying to make adjustments, and nothing I've tried seems to work. I have the feeling that it is the combination of absolute units (pixels) and relative units (percentage) in the descending layers, but each combination I've tried yields a bad result. As soon as I fiddle with the percentages for the div#nav and div#main, the main box and all its contents drop down below the left side nav. Would I welcome some help? Why, yes, thank you ... I most certainly would!!! As ever, my gratitude... Cam Here is the code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <!--meta tags to come --> <head> <title>Floraworld.ca Trial Run -- Occasions Template</title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> "stylesheet" type="text/css" <style> body { background-color: #50519D; font-size:12px; font-family:Verdana, Arial, Helvetica, sans-serif; text-align: center; } h1 text-align: center; } h2 {text-align: center;} h3 {text-align: center;} h4 {text-align: center;} div#outer { width: 80%; background-color:#fffae6; margin-top: 50px; margin-bottom: 50px; margin-left: auto; margin-right: auto; padding: 0px; border: thin solid #000000; text-align: left; } div#header { padding: 15px; margin-top: 5px; margin-bottom: 5px; margin-left: 5px; margin-right: 5px; height: 100px; text-align: center; } #header img { width: 747px; height: 73px; border-style: ridge; border-color: #e6edff; border-width: 5px; } div#buttonA { margin-top: 15px; margin-bottom: 30px; } div#buttonb, div#buttonc, div#buttond, div#buttone { float: left; margin-top: 15px; margin-left: 2%; margin-bottom: 30px; } div#buttone { clear: both; } div#buttonA ul, div#buttonb ul, div#bottonc ul, div#bottond ul, div#bottone ul, { margin: 0px; padding: 0px; font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 12px; line-height: 30px; } div#buttonA li, div#buttonb li, div#buttonc li, div#buttond li, div#buttone li { list-style-type: none; height: 30px; margin: 5px; text-align:center; } div#buttonA li { width: 180px; } div#buttonb li, div#buttonc li, div#buttond li, div#buttone li { width: 400px; } div#buttonA li a, div#buttonb li a, div#buttonc li a, div#buttond li a, div#buttone li a { text-decoration: none; display: block; background-color: #839dff; border-style: solid; border-bottom-color: #717a9f; border-right-color: #6276bf; border-left-color: #c1ceff; border-top-color: #cbebff; } div#buttonA li a:link, div#buttonb li a:link, div#buttonc li a:link, div#buttond li a:link, div#buttone li a:link { color: #000000; font-weight: bold; background-color: #839dff; border-style: solid; border-bottom-color: #717a9f; border-right-color: #6276bf; border-left-color: #c1ceff; border-top-color: #cbebff; } div#buttonA li a:visited, div#buttonb li a:visited, div#buttonc li a:visited, div#buttond li a:visited, div#buttone li a:visited { color: #000000; font-weight: normal; background-color: #839dff; border-style: solid; border-bottom-color: #717a9f; border-right-color: #6276bf; border-left-color: #c1ceff; border-top-color: #cbebff; } div#buttonA li a:hover, div#buttonb li a:hover, div#buttonc li a:hover, div#buttond li a:hover, div#buttone li a:hover { font-weight: bold; color: #FFFFFF; background-color: #414e80; border-style: solid; border-right-color: #c1ceff; border-bottom-color: #cbebff; border-top-color: #717a9f; border-left-color: #6276bf; } div#buttonA li a:active, div#buttonb li a:active, div#buttonc li a:active, div#buttonb li d:active, div#buttone li a:active { font-weight: bold; color: #FFFFFF; background-color: #717a9f; border-style: solid; border-right-color: #c1ceff; border-bottom-color: #cbebff; border-top-color: #717a9f; border-left-color: #6276bf; } .thinline { line-height: 1.2em; } div#nav { width: 25%; padding: 5px; margin-top: 1px; /margin-left: 5px;/ margin-left: 10px; border-style: solid; border-color: #50519D; /#192d19;/ border-width: 2px; background-color: #e6edff; float: left; display: inline; /ie fix/ } div#nav ul { margin: 5px; padding: 0px; font-family: Arial, Helvetica, sans-serif; font-size: small; color: #000; line-height: 30px; /text-align: center;/ test-align: left; } div#nav li { list-style-type: none; } div#nav li a { text-decoration: none; padding: 7px 10px; color: #000; } div#nav lia:link { color: #000: } div#nav lia:visited { color: #CCC; } div#nav lia:hover { font-weight: bold; color: #000; background-color: #3366FF; } div#main { margin-left: 30%; margin-top: 1px; margin-right: 10px; border-style: solid; border-color: #50519D; /192d19;/ border-width: 2px; background-color: #ffe480; padding: 10px; } * html div#main {height:1%}/* ie fix/ div#main1 { margin-left: 1px; margin-top: 1px; margin-right: 1px; margin-bottom: 1px; } div#main2 {text-align: left;} div#main2-sample1, #main2-sample2, #main2-sample3 { float: left; width: 150px; height: 205px; padding-top: 15px; background-color: #ffffff; border: 1px solid #000000; text-align: center; margin-left: 2%; margin-bottom: 5px; display:inline;/ie fix/ } div#main2-sample2 { background color: #ffc2ff; } div#main2-sample3 { background color: #d6ffff; } div#main3 { margin-left: 1px; margin-top: 1px; margin-right: 1px; margin-bottom: 1px; } div#main3 ul { margin: 5px; padding: 0px; font-family: Arial, Helvetica, sans-serif; font-size: small; color: #000; line-height: 30px; text-align: center; } div#main3 li { list-style-type: none; display: inline; } div#main3 li a { text-decoration: none; padding: 7px 10px; color: #000; } div#main3 lia:link { color: #000: } div#main3 lia:visited { color: #CCC; } div#main3 lia:hover { font-weight: bold; color: #000; background-color: #3366FF; } div#main4 { margin-left: 1px; margin-top: 1px; margin-right: 1px; margin-bottom: 1px; } div#main5 { margin-left: 1px; margin-top: 1px; margin-right: 1px; margin-bottom: 1px; clear: both; } div#footer { padding: 15px; margin: 5px; border-top: thin solid #50519D /#000000;*/ } img#flowers{ float: right; width: 200px; height:280px; margin:5px; } img#ftdlogo{ margin-left: 40px; margin-right: 15px; margin-bottom: 30px; } img#fpologo{ margin-left: 40px; margin-right: 15px; margin-bottom: 30px; } img#main2_im1{ width: 100px; height: 116px; } img#main2_im2{ width: 100px; height: 116px; } img#main2_im3{ width: 100px; height: 116px; } </style> </head> <body> <div id="outer"> <div id="header"><img alt="floraworld 1-888-rose-888" src="images/FWca_header.gif" /> </div> <div id="nav"> <div id="buttonA"> <ul> <li><a href="link1.html">Order Flowers Now</a></li> </ul> </div> <h4>Useful Flower Facts<br /> & More</h4> <ul> <li><a href="link2.html">Flower Care</a></li> <li><a href="link2.html">Flower Holidays</a></li> <li class="thinline"><a href="link2.html">Flower, Fruit and <br />&nbsp Gourmet Food Baskets</a></li> <li><a href="link2.html">Monthly Flower Charts</a></li> <li><a href="link2.html">Monthly Birth Stones</a></li> <li><a href="link2.html">Plants & Planter Baskets</a></li> <li><a href="link2.html">Flower Reminder Service</a></li> </ul> <br /> <br /> <img id="ftdlogo" src="images/ftdlogo.jpg" alt="FTD" /> <img id="fpologo" src="images/fpo_logo2.jpg" alt="Flower Promotion Organization" /> <br /> <br /> <h4>Popular Flower Varieties<br /> for Delivery in Canada</h4> <p>Agapanthus, Alstroemeria, Aster, Bird Of Paradise, Bouvardia, Calla Lilies, Carnations/Mini Carnations, Chrysanthemums/Pompons, Daffodils, Delphinium (aka Larkspur), Freesia, Gerbera Daisies, Gladioli, Godetia, Gypsophila, Iris, Liatris, Lilies, Limonium, Orchids, Ornithogalum, Queen Anne's Lace, Roses, Snapdragons, Statice, Stock, Tulips</p> <br /> <br /> <br /> <br /> </div> <div id="main"> <div id="main1"> <h2>Send Anniversary Flowers in Canada</h2> <h3>Order Online from FloraWorld</h3> <h4>Have your Anniversary Flowers Delivered by Floraworld</h4> <img id="flowers" src="images/covermain.jpg" alt="flowers delivered" /> <p>When you can't make a personal delivery,<br /> trust western Canada's home-grown floral delivery service to make it right!</p> <p>Working with the best local flower shops<br /> (FTD, Teleflora and Grower Direct),<br /> Floraworld offers/p> <p>&nbsp &nbsp -- easy, secure online ordering</p> <p>&nbsp &nbsp -- fast, reliable floral delivery<br /> &nbsp &nbsp &nbsp &nbsp (same day delivery on early orders)</p> <p>&nbsp &nbsp -- Aeroplan Miles (or CAA Discount)<br /> &nbsp &nbsp &nbsp &nbsp with every order</p> <p>&nbsp &nbsp -- the freshest roses and other cut flowers<br /> &nbsp &nbsp &nbsp &nbsp in exquisite bouquets and arrangements</p> <br /> <br /> <br /> <br /> </div> <div id="main2"> <h2>Popular Anniversary Selections</h2> <div id="main2-sample1"><img id="main2_im1" src="images/tnail_C4-3020.jpg" alt="flowers delivered" /> <p>Image Title</p> <p>Image Price</p> </div> <div id="main2-sample2"><img id="main2_1m2" src="images/tnail_C4-3020.jpg" alt="flowers delivered" /> <p>Image Title</p> <p>Image Price</p> </div> <div id="main2-sample3"><img id="main2_im3" src="images/tnail_C4-3020.jpg" alt="flowers delivered" /> <p>Image Title</p> <p>Image Price</p> </div> </div> <br /> <div id="buttonb"> <ul> <li><a href="link1.html">To View the Entire FloraWorld Selection, CLICK HERE</a></li> </ul> </div> <br /> <br /> <div id="main3"> <h2>Favourite Canadian Locations for<br /> Anniversary Flower Delivery</h2> <h3>Popular Places to Send Flowers in Canada</h3> <ul> <li><a href="link1.html">Victoria, British Columbia</a></li> <li><a href="link2.html">Vancouver BC</a></li> <li><a href="link3.html">Kelowna BC</a></li> </ul> <ul> <li><a href="link4.html">Edmonton, Alberta</a></li> <li><a href="link5.html">Calgary, Alberta</a></li> <li><a href="link6.html">Regina, Saskachewan</a></li> </ul> <ul> <li><a href="link7.html">Saskatoon, Saskatchewan</a></li> <li><a href="link8.html">Winnipeg, Manitoba</a></li> <li><a href="link9.html">Toronto, Ontario</a></li> </ul> <ul> <li><a href="link10.html">Ottawa, Ontario</a></li> <li><a href="link11.html">Montreal, Quebec</a></li> <li><a href="link12.html">Moncton, New Brunswick</a></li> </ul> <ul> <li><a href="link13.html">Saint John, New Brunswick</a></li> <li><a href="link14.html">Halifax, Nova Scotia</a></li> <li><a href="link15.html">Charlottetown, PEI</a></li> </ul> <ul> <li><a href="link16.html">St. Johns, Newfoundland</a></li> <li><a href="link17.html">Yellowknife, NWT</a></li> <li><a href="link18.html">Whitehorse, Yukon</a></li> </ul> <ul> <li><a href="link19.html">All Other Canadian Locations</a></li> </ul> </div> <div id="buttonc"> <ul> <li><a href="link1.html">Order Flowers Now</a></li> </ul> </div> <div id="main4"> <br /> <br /> <h2>U.S.A. Flower Delivery</h2> </div> <div id="buttond"> <ul> <li><a href="link1.html">For Flower Delivery in the USA, CLICK HERE</a></li> </ul> </div> <br /> <br /> <div id="main5"> <h2>International Flower Delivery</h2> </div> <div id="buttone"> <ul> <li><a href="link1.html">To Order Flowers for International Delivery, CLICK HERE</a></li> </ul> <br /> <br /> </div> <br /> <br /> </div> <div id="footer"> <p>Floraworld 1-888-ROSE-888 (1-888-767-3888) &nbsp &nbsp &nbsp &nbsp  \|&nbsp &nbsp &nbsp &nbsp &nbsp   Site Map &nbsp &nbsp &nbsp &nbsp &nbsp  \|&nbsp &nbsp &nbsp &nbsp &nbsp   Contact Us</p> </div> </div> </body> </html>

Sep 13, 2004, 14:13	#4
camm SitePoint Enthusiast Join Date: Aug 2004 Location: edmonton, canada Posts: 32	If I'd known that damned thing was going to nod, I wouldn't have used it. Sorry if it aggravates anyone :/ Cam