5 replies [Last post]
zerohdog
Offline
newbie
Last seen: 17 years 21 weeks ago
Joined: 2004-08-25
Posts: 3
Points: 0

Please take a look at http://www.firehouseservices.com/clear

The 3 little pics on the bottom are supposed to be lining up on the empty space to the right of the text. I've tried what seems to be everything (except the right thing). Here is the CSS sheet:

body {
background-color: #ffffff;
background-image: url(images/mainbg.gif);
background-repeat: repeat;
text-align: center;
margin:0 auto;
}

p {
font-family: Georgia, Times, serif;
font-size: 12px;
color: #000000;
}

#container {
background: #ffffff;
background-image: url(images/bgshaddow.png);
background-repeat: repeat-y;
width: 833px;
height: 100%;
margin-left: auto;
margin-right: auto;
text-align: left;
top: 0px;
}

#header {
position: relative;
background-image: url(headerimages/rotate.php);
height: 166px;
width: 794px;
padding: 0px;
margin-left: 18px;
}

#nav {
text-align: center;
margin-top: 15px;
border: 1px;
margin-left: 30px;
width: 750px;
}
#content {
margin-top: 35px;
margin-left: 32px;
width: 450px;
text-align: left;
background-image: url(images/contentbg.gif);
background-repeat: repeat;
padding-top: 20px;
padding-left: 20px;
padding-bottom: 20px;
}

#rightColumn {

}

Here is the HTML

<body>
<div id="container">
<div id="header"></div>
<div id="nav"></div>
<div id="content">
<p><img src="images/abouttitle.png"</p>
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy
eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam
voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet
clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit
amet. Lorem ipsum dolor sit amet, sample hyperlink elitr, sed diam nonumy
eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam
voluptua.</P>
<p>At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd
gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem
ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod
tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd
gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
<p>Duis autem vel eum iriure dolor in hendrerit in sample hyperlink molestie
consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan
et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue
duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer
adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore
magna aliquam erat volutpat.</p>
<div id="rightColumn">
<p><img src="images/ndcthumb.png" width="224" height="98" /></p>
<p><img src="images/uptownthumb.png" width="224" height="98" /></p>
<p><img src="images/nttathumb.png" width="224" height="98" /></p>
</div>
</div>
</div>

</body>
</html>

now, i am not sure if since the rightColumn div is inside the content div that is messing it up, but i've tried it both ways and prefer for it to be inside the content div (so it shares the background image). I left the CSS div rightColumn blank for now..please help me get this lined up! Thanks!

co2
co2's picture
Offline
Leader
UK
Last seen: 13 years 40 weeks ago
UK
Joined: 2003-09-17
Posts: 721
Points: 0

right column not working

Here you go, try this. I've floated the content div to the left, and moved the right column div outside of the content div.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
	<meta http-equiv="content-type" content="text/html; charset=utf-8" />
	<title>Untitled</title>
	<style type="text/css" media="all">
/* <![CDATA[ */
html,body
	{
	height: 100%;
	}
 body { 
 background: #fff url(http://www.firehouseservices.com/clear/images/mainbg.gif); 
 text-align: center; 
 margin: 0;
 } 

 p { 
 font-family: Georgia, Times, serif; 
 font-size: 12px; 
 color: #000000; 
 } 

 #container { 
 background: #ffffff; 
 background-image: url(http://www.firehouseservices.com/clear/images/bgshaddow.png); 
 background-repeat: repeat-y; 
 width: 833px; 
 height: 100%; 
 margin-left: auto; 
 margin-right: auto; 
 text-align: left; 
 top: 0px; 
 } 

 #header { 
 position: relative; 
 background-image: url(http://www.firehouseservices.com/clear/headerimages/rotate.php); 
 height: 166px; 
 width: 794px; 
 padding: 0px; 
 margin-left: 18px; 
 } 

 #nav { 
 text-align: center; 
 margin-top: 15px; 
 border: 1px; 
 margin-left: 30px; 
 width: 750px; 
 } 
 #content {
 float: left;
 margin: 35px 40px 0 32px; 
 width: 450px; 
 text-align: left; 
 background-image: url(http://www.firehouseservices.com/clear/images/contentbg.gif); 
 background-repeat: repeat; 
 padding-top: 20px; 
 padding-left: 20px; 
 padding-bottom: 20px;
 } 

 #rightColumn
 	{ 
 	margin: 100px 0 0 50px;
 	} 




/* ]]> */
</style>
</head>

 <body> 
 <div id="container"> 
 <div id="header"></div> 
 <div id="nav"></div> 
 <div id="content"> 
 <p><img src="http://www.firehouseservices.com/clear/images/abouttitle.png"</p> 
 <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy 
 eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam 
 voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet 
 clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit 
 amet. Lorem ipsum dolor sit amet, sample hyperlink elitr, sed diam nonumy 
 eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam 
 voluptua.</P> 
 <p>At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd 
 gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem 
 ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod 
 tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. 
 At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd 
 gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p> 
 <p>Duis autem vel eum iriure dolor in hendrerit in sample hyperlink molestie 
 consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan 
 et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue 
 duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer 
 adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore 
 magna aliquam erat volutpat.</p> 
 
 </div>
<div id="rightColumn"> 
 <p><img src="http://www.firehouseservices.com/clear/images/ndcthumb.png" width="224" height="98" /></p> 
 <p><img src="http://www.firehouseservices.com/clear/images/uptownthumb.png" width="224" height="98" /></p> 
 <p><img src="http://www.firehouseservices.com/clear/images/nttathumb.png" width="224" height="98" /></p> 
 </div> 
 </div> 

 </body> 
 </html> 

The next sentence is true. The previous sentence is false. Discuss...

zerohdog
Offline
newbie
Last seen: 17 years 21 weeks ago
Joined: 2004-08-25
Posts: 3
Points: 0

co2 you are all that and more!! thanks

Your solution is perfect, I added some padding and voila...smooth as butter! Thanks for a quick response. I owe you one! Cool

co2
co2's picture
Offline
Leader
UK
Last seen: 13 years 40 weeks ago
UK
Joined: 2003-09-17
Posts: 721
Points: 0

right column not working

No problem. Wink

Forgot to mention. Not sure if you've come across the little trick or not, but the:

html,body
{
height: 100%;
}

...allows you to make a div stretch the full height of the page with height: 100%; where normally it can't. (The div takes on 100% height of its parent, where the parent is the body tag.)

The next sentence is true. The previous sentence is false. Discuss...

zerohdog
Offline
newbie
Last seen: 17 years 21 weeks ago
Joined: 2004-08-25
Posts: 3
Points: 0

right column not working

Okay, one more thing? about the height 100% ?? I added the code you suggested but it only pulls 100% of the main container in IE, not in Firebird. Whats up with that? Can you take a look again and see what is wrong. Link is still http://www.firehouseservices.com/clear and here is the newest updated CSS

html {
	height: 100%;
}
body {
 background-color: #ffffff;
 background-image: url(images/mainbg.gif);
 background-repeat: repeat;
 text-align: center;
 margin:0 auto;
 height: 100%
}

p {
	font-family: Georgia, Times, serif;
	font-size: 12px;
	color: #000000;
}
 
 #container {
 	background: #ffffff;
   background-image: url(images/bgshaddow.png);
	background-repeat: repeat-y;
	width: 833px;
	height: 100%;
	margin-left: auto;
	margin-right: auto;
	text-align: left;
	top: 0px;
	height: 100%;
 }
 
#header {
 position: relative;
 background-image: url(headerimages/rotate.php);
 height: 166px;
 width: 794px;
 padding: 0px;
 margin-left: 18px;
}

#nav {
 text-align: center;
 margin-top: 15px;
 border: 1px;
 margin-left: 30px;
 width: 750px;
}

#content {
 float: left;
 margin-top: 35px;
 margin-left: 32px;
 width: 425px;
 text-align: left;
 background-image: url(images/contentbg.gif);
 background-repeat: repeat;
 padding-top: 20px;
 padding-left: 20px;
 padding-bottom: 20px;
 padding-right: 25px;
}

#rightColumn {
  margin: 100px 0 0 50px; 
}

#copyright {
	font-size: 12px;
	color: #666666;
	text-align: left:
}

#footer {
	
}

And here is the code for the HTML

<!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" xml:lang="en" lang="en">
<head>
	<title>Firehouse Services - Home</title>
	<link rel="stylesheet" type="text/css" href="clear.css" />
</head>

<body>
<div id="container">
<div id="header"></div>
<div id="nav"></div>
<div id="content">
    <p><img src="images/abouttitle.png"</p>
	 <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy 
      eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam 
      voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet 
      clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit 
      amet. Lorem ipsum dolor sit amet, sample hyperlink elitr, sed diam nonumy 
      eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam 
      voluptua.</P>
    <p>At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd 
      gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem 
      ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod 
      tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. 
      At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd 
      gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
    <p>Duis autem vel eum iriure dolor in hendrerit in sample hyperlink molestie 
      consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan 
      et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue 
      duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer 
      adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore 
      magna aliquam erat volutpat.</p>
		<p><div id="copyright">Copyright Firehouse Services 2004</div></p>
		</div>
		<div id="rightColumn">
      <p><img src="images/ndcthumb.png" width="224" height="98" /></p>
      <p><img src="images/uptownthumb.png" width="224" height="98" /></p>
      <p><img src="images/nttathumb.png" width="224" height="98" /></p>
      </div>
</div></body></html>

Thanks for you help thus far!

co2
co2's picture
Offline
Leader
UK
Last seen: 13 years 40 weeks ago
UK
Joined: 2003-09-17
Posts: 721
Points: 0

right column not working

Here's the QuirksMode site lowdown on the trick: http://www.quirksmode.org/css/100percheight.html

Smile

The next sentence is true. The previous sentence is false. Discuss...