www.webdeveloper.com
Results 1 to 5 of 5

Thread: Layout issue...

Threaded View

  1. #1
    Join Date
    Jun 2007
    Posts
    73

    Angry Layout issue...

    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>
    Last edited by vouzamo; 07-23-2009 at 08:15 AM.

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles