Div positioning

Mark M · 9 Aug 2010 at 17:01

I cant get a div to align properly on the right. Here is the page

It works fine on my monitor 1152x864 but it moves out of place on a widescreen one.

I thought the absolute position would work but its not for some reason!

Link to css here

Any advice much appreciated

Thanks.

Muel · 9 Aug 2010 at 17:09

There's some bad coding going on there IMO. The footer is abosolutely positioned, so that the content can't stretch the page?

I'll get this up in DW and have a crack at it.

BFCTom · 9 Aug 2010 at 17:10

Float it to the right of the main content rather than using absolute positioning.

Mark M · 9 Aug 2010 at 17:36

Muel said:
There's some bad coding going on there IMO. The footer is abosolutely positioned, so that the content can't stretch the page?

I'll get this up in DW and have a crack at it.

First attempt at anything non table based so go easy on me

I made it all the same width so why would I want the footer to stretch further? If thats what you mean?

BFCTom said:
Float it to the right of the main content rather than using absolute positioning.

Will give that a shot, once I figure out how to float anything haha

Muel · 9 Aug 2010 at 17:46

Considoring it's your first div based layout, a noble effort!

I meant that the height of the page doesn't scale to fit the content, I've made it do it though. Still playing with it, I'll post the source code up once I've done.

Just a comment on the general build, it's 1024px wide, which means that on a monitor running 1024px, it won't fit on the screen properly because of the scrollbar, I try to stick to 960px personally.

Muel · 9 Aug 2010 at 18:30

Just a couple of points, I changed the logo and banner to html images rather than background images, because then they'll still display if someone views the page with CSS disabled, like on a handheld browser.

IMO you should also style the tags more, so instead of adding the font styling to the div, add it to the h1, h2, h3, h4, h5, h6, p, a, pre etc tags.

There is also a downside to the float method I've used. The height of each column will be different, but if this is an issue you could use faux columns to solve it.

There's also a gap between the nav and the logo, but unfortunately I've run out of time so I'll post up what I've got. Feel free to send me a message in trust if you want to discuss anything.

HTML:

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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" type="text/css"  href="style.css" />  
<title>DIV Test</title>
</head>

<body>
<div id="container">
<div id="logo"><img src="http://www.mmassociates.co.uk/images/logo.jpg" alt="MM Associates Logo"/></div>
<div id="navbar">
<ul>
<li><a href="http://www.mmassociates.co.uk">Home</a></li>
<li><a href="http://www.mmassociates.co.uk/services">Services</a></li>
<li><a href="http://www.mmassociates.co.uk/tax">Tax</a></li>
<li><a href="http://www.mmassociates.co.uk/guides">Client Area</a></li>
<li><a href="http://www.mmassociates.co.uk/contact.shtml">Contact Us</a></li>
</ul>
</div>

<div id="banner"><img src="http://www.mmassociates.co.uk/images/banner1.gif" alt="banner image" /></div>

<div id="middle_wrapper">
<div id="main">
<p><img src="http://www.mmassociates.co.uk/images/button6.gif" alt="Button" /><strong> Welcome</strong></p>
<p>MM Associates are a small sized accountancy practice based in Newcastle upon Tyne and specialising in small businesses and individuals. We  work closely with our clients in an attempt to reduce  the accounting burden  small businesses have to face allowing you to spend more time in your business.</p>
<p>We provide positive commercial, financial and fiscal advice, apply innovative skill, find fresh answers to problems and identify risk or opportunity while there is still time to act. </p>
<p>Our client approach is best described as working together and adding value to the business. We provide effective business solutions by applying our experience to clients’ needs.</p>
<p>We are happy to offer our services to clients not only in Newcastle, Gateshead and the wider North East area but can work with clients from all anywhere in the UK with out remote accounts service.</p>
<pre>Our services include:
Accounts
Taxation
Bookkeeping
Payroll
VAT</pre>
<p>Call us on 0191 645 1133 to arrange a FREE  meeting and consultation to discuss your needs further.  Were happy to travel to you anywhere in the North East, including Newcastle, Gateshead, Durham, Sunderland and Northumberland.</p>
</div>

<div id="right">
<p>Test right div here</p>
</div>
</div>

<div id="footer">
<ul>
<li>Accounts</li>
<li>•</li>
<li>Tax</li>
<li>•</li>
<li>VAT</li>
<li>•</li>
<li>Payroll</li>
<li>•</li>
<li>Bookkeeping</li>
<li>•</li>
<li>Training</li>
</ul>
</div>

</div>
</body>
</html>

CSS:

Code:

@charset "utf-8";
/* CSS Document */

body{
	background-image:url('http://www.mmassociates.co.uk/images/background2.jpg');
}
			
a:link{ 
	color:#ffffff;
}

a:visited{ 
	color:#ffffff;
}

#container{
	width:1024px;
	margin:0 auto;
}

#logo{
}

#navbar{
	width:1024px;
	height:35px;
	background-color:#000000;
}

#navbar ul li{
	list-style:none;
	float:left;
	padding:7px 62px;
	font-family:verdana;
	color:#FFFFFF;
	font-size:14px;
	font-weight:bold;
}

#banner{
}

#middle_wrapper{
}

#main{
	width:700px;
	padding:20px;
	float:left;
	background-color:#FFFFFF; 
	font-size:14px;
	font-family:verdana;
	color:#000000;
	line-height:180%;
}

#right{
	width:244px;
	padding:20px;
	float:right;
	background-color:#CCCCCC;
}

#footer{
	width:1024px;
	height:70px;
	background-color:#000000;
	clear:both;
	font-family:verdana;
	font-size:12px;
	color:#FFFFFF;
}

#footer ul li{
	list-style:none;
	float:left;
	padding:27px;
}