Layout issue...

**vouzamo** · 07-23-2009 08:11 AM

Hi,

I am building a website and want a two column layout so that the columns background color fills the entire column up to the footer div below. It works as it should in IE but not in firefox.

In firefox the background colour ends where the right column content ends rather than continuing down to the footer. Additionally the content in the left column seems to be getting pushed down the page to the point where the right column content ends.

Please can you suggest why this is happening and provide a fix for my css?

The url is: http://www.vouzamo.co.uk/cps/index.html

Code:

Code:

<html>
	<head>
		<style type="text/css">
			body
			{
				background: #000000 url('images/gradient.png') top left repeat-x;
				margin: 0px;
				padding: 0px;
			}
			img
			{
				border: none;
				margin: 0px;
				padding: 0px;
			}
			h1
			{

			}
			h2
			{
				margin: 10px 0px 0px 0px;
				padding: 0px;
				font-family: tahoma;
				font-size: 17px;
				color: #000000;
			}
			p
			{
				font-family: tahoma;
				font-size: 11px;
				color: #000000;
			}
			#container
			{
				position: relative;
				top: 10px;
				left: 50&#37;;
				margin-left: -464px;
				width: 928px;
			}
			#header
			{
				width: 928px;
				height: 100px;
				margin: 0px;
				padding: 0px;
			}
			#logo
			{
				width: 190px;
				height: 100px;
				margin: 0px;
				padding: 0px;
				float: left;
			}
			#leaderboard
			{
				width: 728px;
				height: 100px;
				margin: 0px;
				padding: 0px;
				float: right;
			}
			#navigation
			{
				width: 928px;
				height: 25px;
				background: url('images/navigation.png');
				margin: 0px;
				padding: 0px;
			}
			#links
			{
				width: 708px;
				height: 25px;
				margin: 0px 0px 0px 20px;
				padding: 0px;
				float: left;
			}
			#links a:link
			{
				font-family: tahoma;
				font-size: 11px;
				font-weight: bold;
				text-decoration: none;
				color: #666666;
				margin: 0px 20px 0px 0px;
			}
			#links a:active
			{
				font-family: tahoma;
				font-size: 11px;
				font-weight: bold;
				text-decoration: none;
				color: #666666;
				margin: 0px 20px 0px 0px;
			}
			#links a:visited
			{
				font-family: tahoma;
				font-size: 11px;
				font-weight: bold;
				text-decoration: none;
				color: #666666;
				margin: 0px 20px 0px 0px;
			}
			#links a:hover
			{
				font-family: tahoma;
				font-size: 11px;
				font-weight: bold;
				text-decoration: underline;
				color: #000000;
				margin: 0px 20px 0px 0px;
			}
			#search
			{
				width: 180px;
				height: 25px;
				margin: 0px 20px 0px 0px;
				padding: 0px;
				float: right;
			}
			#search input
			{
				width: 150px;
				height: 18px;
				margin: 3px 0px 3px 0px;
				padding: 1px;
				border: 1px solid #666666;
				float: left;
				font-family: tahoma;
				font-size: 11px;
				color: #666666;
			}
			#search img
			{
				margin: 3px 0px 3px 0px;
				padding: 0px;
				float: right;
			}
			#main
			{
				width: 928px;
				background: #FFFFFF;
				margin: 0px;
				padding: 0px;
			}
			#left
			{
				width: 728px;
				background: inherit;
				margin: 0px;
				padding:0px;
				float: left;
			}
			#content
			{
				width: 708px;
				margin: 10px;
				padding: 0px;
			}
			#feature
			{
				width: 708px;
				height: 80px;
				background: url('images/feature.png');
				margin: 0px;
				padding: 0px;
			}
			#caption
			{
				width: 708px;
				height: 80px;
				background: url('images/caption.png');
				margin: 0px;
				padding: 0px;
			}
			#caption p
			{
				margin: 62px 10px 2px 10px;
				padding: 0px;
				font-family: tahoma;
				font-size: 11px;
				color: #FFFFFF;
			}
			#right
			{
				width: 200px;
				background: inherit;
				margin: 0px;
				padding:0px;
				float: right;
			}
			#interactive
			{
				width: 190px;
				margin: 10px 10px 10px 0px;
				padding: 0px;
			}
			#footer
			{
				width: 928px;
				height: 25px;
				background: url('images/footer.png');
				margin: 0px;
				padding: 0px;
				float: left;
			}
		</style>
	</head>
	<body>
		<div id="container">
			<div id="header">
				<div id="logo">
					<img src="images/logo.png" alt="logo">
				</div>
				<div id="leaderboard">
					<a href="#"><img src="images/leaderboard.png" alt="leaderboard"></a>
				</div>
			</div>
			<div id="navigation">
				<div id="links">
					<a href="#">Home</a>
					<a href="#">About Us</a>
					<a href="#">Services</a>
					<a href="#">Training</a>
					<a href="#">Clients</a>
					<a href="#">Contractors</a>
					<a href="#">Contact Us</a>
				</div>
				<div id="search">
					<div><input type="text" value="Search..." onFocus="search()"><img src="images/search.png"></div>
				</div>
			</div>
			<div id="main">
				<div id="left">
					<div id="content">
						<div id="feature">
							<div id="caption">
								<p>CPS training school in Afghanistan.</p>
							</div>
						</div>
						<h2>Close Protection Services</h2>
						<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas adipiscing urna ut lectus mattis interdum. Aliquam et augue sapien, eu congue lorem. Phasellus vitae eros quis magna scelerisque imperdiet. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Proin purus mauris, vestibulum eget fermentum quis, elementum in dui. Quisque nisi nunc, mattis id luctus et, suscipit ac ipsum. Aliquam gravida ultricies commodo. Curabitur porta massa in erat viverra ut aliquet nulla consequat. Praesent ullamcorper risus sed mauris fermentum varius ut vestibulum mi. Curabitur posuere tincidunt dignissim. Integer tincidunt euismod ornare. Integer ligula diam, euismod ac tincidunt ut, rutrum ac enim. Aliquam laoreet scelerisque vulputate.</p>
						<p>Vestibulum dictum interdum ullamcorper. In vitae turpis ante, a condimentum diam. Vivamus sagittis nibh ac lacus tempus accumsan. Proin urna risus, consequat id tempus eu, porttitor sit amet quam. Pellentesque ligula lacus, dictum ac adipiscing ac, consectetur vel urna. Nunc vitae metus aliquet erat tincidunt sollicitudin non at metus. Fusce congue luctus ligula ac faucibus. Maecenas lacinia aliquet neque eu mattis. Sed at ligula nisi, at vulputate tellus. Nunc vulputate convallis interdum. Nullam posuere ornare blandit. Proin vel lacus eu neque sodales ultrices sed vel turpis. Aliquam ut tellus id mi tristique interdum. Donec iaculis eros quis libero eleifend dictum. In vel erat sed ligula suscipit iaculis.</p>
						<p>Ut dolor enim, tincidunt in lobortis eget, congue non nisi. Donec mi mi, mollis ut auctor vel, tempor in magna. Pellentesque aliquam rutrum dolor, eget malesuada velit egestas et. Donec tempor, ligula sed luctus dignissim, dolor libero auctor elit, quis vehicula nunc odio nec ipsum. Donec mollis ante felis. Nam sed mauris a ipsum pulvinar mattis. Morbi in venenatis est. Etiam sagittis iaculis felis, sed accumsan odio molestie eget. Ut leo sapien, convallis et dignissim sit amet, tincidunt nec nisl. Proin nulla orci, auctor et interdum sed, rhoncus at ante. Donec aliquet dui vel tellus laoreet feugiat. Vivamus vitae libero diam, eget fringilla erat. Nam consectetur nulla et dui rhoncus sollicitudin. Maecenas vitae ornare est. Integer at eros nulla. Nulla facilisi. Donec tortor diam, cursus nec auctor euismod, suscipit eu dui. Nam eget felis eu turpis iaculis porta.</p>
					</div>
				</div>
				<div id="right">
					<div id="interactive">
						blah<br>blah
					</div>
				</div>
			</div>
			<div id="footer">
				blah
			</div>
		</div>
	</body>
</html>

**vouzamo** · 07-23-2009 08:13 AM

Another issue I forgot to mention was that the caption text is not appearing where it should in Firefox but is is correct on IE. Any help with why this isn't placed correctly would also be appreciated. I am using a pseudo class <p> for this text with a margin to align the text.

**vouzamo** · 07-23-2009 09:04 AM

I have fixed the caption issue by replacing the pseudo class <p> using relative positioning. The only issue that remains now is the background colour of the right column not filling the background all the way to the footer div below.

**WestWeb** · 07-23-2009 01:37 PM

Wow I definitely tried to fix it, but to no avail so I'm going to try and explain what I think is missing.
With your body background set, if you could set it so that the background-color: of the #container would set the color of all its child elements(main, right, left, footer, etc) then you could style the background-color: of all the #container's child elements except for the right column which would be left to inherit the background-color: of the container. This way it would appear that the right column is full length as its background-color: extends to the bottom of the column. You could Check my website's code out at http://www.benhartlenn.com to see an example of this. on line 21 of my style sheet you will see a note that says the .container background-color: is for the sidebar, this is because the sidebar's are the only places that were left to inherit the container's background-color:
I hope this uhm... rather vague description of what you could do makes sense and gets you on the right path to solving your problem. Good Luck!

**Andyram2k** · 07-23-2009 02:44 PM

Hi Vouzamo,
Westweb is correct, you would set the background colour of your container div to be white/whatever colour you need. If you wanted a background image to repeat-y down, you could use the "faux column" method:

http://www.alistapart.com/articles/fauxcolumns/

This basically means that whichever column is taller, it will appear that both are the same height. Hope this helps

Thread: Layout issue...

Thread Tools

Display

Layout issue...

Thread Information

Users Browsing this Thread

Tags for this Thread

Bookmarks

Bookmarks

Posting Permissions