Positioning div elements

@DougieDa59Jun 03.2008

Hey folks, I am new to css after using tables in the past for layouts ? ..

What I am after is to be able to align the div “content” at the same height, but to the right of div “navigation” (the one with the league table in it).
Here is the page:
~~[url=”http://www.newsantosfc.co.uk/v2/test.php”]~~http://www.newsantosfc.co.uk/v2/test.php[/url]

Here is the concerning code:

~~[quote=html]~~

<div id=”navigation”>
<p>League Table<br /></p>
<?php
include (‘tables.php’);
?>
<p>Podium4Sport<br />
<a href=”http://www.podium4sport.com” target=”_blank”> <img src=”p4s.gif” alt=”Podium 4 Sport.com” border=”0″ /></a></p>
<p>New Santos on Bebo <br /> <a href=”http://newsantos.bebo.com” target=”_blank”><img src=”bebo.jpg” alt=”New Santos on Bebo” border=”0″ /></a></p>
</div>
<div id=”content”>
<table width=”600″ border=”0″>
<tr>
<td background=”back.gif”> <span class=”style2″>_ </span><span class=”style1″>Welcome to the website of New Santos Football Club</span></td>
</tr>
</table>
<br />
<p><span class=”style3″>Latest News </span><i><img src=”bebo.jpg” alt=”bebo” width=”134″ height=”150″ align=”right” /><br />
20/6/2008</i><br />
The Website is redesigned and updated!<br />
<br />
15/4/2008<br />
The clubs’ end of season awards were handed out last night in The Eg bar. The winners of the awards are:<br />
Simon Magee – Top Goalscorer<br />
Martin Cunningham – Clubman of the Year<br />
Martin Magee – Managers Player of the Year<br />
David Dougan – Player of the Year<br />
David Dougan – Young Player of the Year<br />
<br />
<a href=”news.php”>> Visit the News Page for more news.</a></p>
<table width=”608″ border=”0″>
<tr>
<td><img src=”nextmatch.gif” alt=”Next Match” width=”120″ height=”30″ border=”0″ /><br />
<i>19/04/08</i><br />
New Santos 1 – 0 Arydoyne WMC II<br />
<i> League Match 20 </i></td>
<td><img src=”lastmatch.gif” alt=”Last Match” width=”120″ height=”30″ border=”0″ /><br />
<p>Season Finished.</p>
</td>
</tr>
</table>

</div>

[/quote]
~~[quote=css]~~

#navigation {font-family:Arial; font-size:10px; color:#FF0000;margin-left:100px;width:150px;}
#content {position:relative; top:-350px; left:300px; width:600px;}

[/quote]

This code sets the content div too low (i.e. below the div on the left). How do I edit the properties to get it aligned properly? I don’t think I should be using relative positioning but I am not sure what to do next.

I also have a table within the “content” div, but I will make that 2 divs once I know how to align two divs side by side.

Cheers in advance people.

to post a comment

CSS

11 Comments(s) _↴

@shanse3Jun 03.2008 — #Try adding "float: left;" to both the navigation id and the content id. That will position "content" to the right of "navigation". Because it will position them next to each other, you will then need to erase "top: -350px;" and change "left: 300px" to a smaller number as well. It should look like this:

#navigation {font-family: arial; font-size: 10px; color: #FF0000; margin-left: 100px; width: 150px; float: left;}

#content {position:relative; left:300px; width:600px; float: left;}

Good luck. Let me know if that helps.

@DougieDa59authorJun 03.2008 — #I tried that and couldn't get it, thanks for the help.. this is what I have changed myself:
#navigation {float: left;font-family:Arial; font-size:10px; color:#FF0000;width:150px;padding-right: 20px;}

#content {width: 600px; margin-left:200px;background-image:url(back.gif); background-repeat:no-repeat}[/QUOTE]

See it: http://www.newsantosfc.co.uk/v2/test1.php

It works fine in Firefox, but not in IE, anyone any ideas?

Cheers.

@CentauriJun 03.2008 — #IE has a bug where the left margin of #content will not slide in behind the floated #navigation if #content has "HasLayout" triggered, which it has due to the width being specified. Either remove the width setting from #content, allowing it to naturally fill the width, or float it left with a 30px left margin.

@DougieDa59authorJun 04.2008 — #IE has a bug where the left margin of #content will not slide in behind the floated #navigation if #content has "HasLayout" triggered, which it has due to the width being specified. Either remove the width setting from #content, allowing it to naturally fill the width, or float it left with a 30px left margin.[/QUOTE]

I updated my IE to v7 and everything is fine.

@CentauriJun 04.2008 — #I updated my IE to v7 and everything is fine.[/QUOTE]

So anyone still using IE6 don't matter ?

@DougieDa59authorJun 04.2008 — #So anyone still using IE6 don't matter ?[/QUOTE]
Will what you say work then? Just removing the width?

I looked up and I think its 25% of people still use IE6.. so ideally I would want it to work with it, so I will give it a try, its just that I spent nearly of yesterday just trying to align the divs properly. I will give it a try.

@CentauriJun 04.2008 — #Will what you say work then? Just removing the width?
[/QUOTE]

Yes.

@DougieDa59authorJun 09.2008 — #Nearly got the design complete.. I just have 1 more problem..

[url="http://www.newsantosfc.co.uk/v2/test1.php"]http://www.newsantosfc.co.uk/v2/test1.php[/url]

On IE7 its perfect.. everything is fine.

On Firefox however, the navigation div runs into the footer div and I can't get the footer div to be aligned directly underneath the content div with a space between them. Oh, and the 1px dashed border is supposed to be red, but is black in

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>

<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />

<title>New Santos test</title>

<link href="ns.css" rel="stylesheet" type="text/css" />

<script type="text/javascript">

<!--

function MM_swapImgRestore() { //v3.0

var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;

}

function MM_preloadImages() { //v3.0

var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();

var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)

if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}

}

function MM_findObj(n, d) { //v4.01

var p,i,x; if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {

d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}

if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];

for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);

if(!x && d.getElementById) x=d.getElementById(n); return x;

}

function MM_swapImage() { //v3.0

var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)

if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}

}

</script>

</head>

<body onload="MM_preloadImages('images/home2.gif','images/history2.gif','images/squad2.gif','images/fixtures2.gif','images/news2.gif','images/extras2.gif','images/contact2.gif','images/league2.gif')">

<div id="container">

<div id ="header">

<img src="header.jpg" alt="header image" /><a href="index.htm" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Home','','images/home2.gif',1)"><br />

<img src="images/home1.gif" name="Home" width="100" height="43" border="0" id="Home" /></a><a href="news.htm" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('News','','images/news2.gif',1)"><img src="images/news1.gif" name="News" width="100" height="43" border="0" id="News" /></a><a href="history.htm" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('History','','images/history2.gif',1)"><img src="images/history1.gif" name="History" width="100" height="43" border="0" id="History" /></a><a href="squad.htm" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Squad','','images/squad2.gif',1)"><img src="images/squad1.gif" name="Squad" width="100" height="43" border="0" id="Squad" /></a><a href="fixtures.htm" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Fixtures','','images/fixtures2.gif',1)"><img src="images/fixtures1.gif" name="Fixtures" width="100" height="43" border="0" id="Fixtures" /></a><a href="league.htm" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('League','','images/league2.gif',1)"><img src="images/league1.gif" name="League" width="100" height="43" border="0" id="League" /></a><a href="extras.htm" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Extras','','images/extras2.gif',1)"><img src="images/extras1.gif" name="Extras" width="100" height="43" border="0" id="Extras" /></a><a href="contact.htm" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Contact','','images/contact2.gif',1)"><img src="images/contact1.gif" name="Contact" width="100" height="43" border="0" id="Contact" /></a><a name="top"></a> </div>

<br />

<div id="navigation">

<p>League Table</p>

<?php

include ('tables.php');

?>

<p>Podium4Sport<br />

<a href="http://www.podium4sport.com" target="_blank"> <img src="p4s.gif" alt="Podium 4 Sport.com" border="0" /></a></p>

<p>New Santos on Bebo <br /> <a href="http://newsantos.bebo.com" target="_blank"><img src="bebo.jpg" alt="New Santos on Bebo" border="0" /></a></p>

</div>

<div id="content"><p class="h1">    Welcome to the website of New Santos F.C.<br />

</p>

<p style="font-weight:bold; color:#FF0000;">Latest News </p><img src="bebo.jpg" alt="bebo" width="134" height="150" align="right" />

<p style="font-style:italic;font-size:11px;">20/6/2008</p>

The Website is redesigned and updated

<p style="font-style:italic; font-size:11px;">15/4/2008</p><p>The clubs' end of season awards were handed out last night in The Eg bar. The winners of the awards are:<br />

Simon Magee - Top Goalscorer<br />

Martin Cunningham - Clubman of the Year<br />

Martin Magee - Managers Player of the Year<br />

David Dougan - Player of the Year<br />

David Dougan - Young Player of the Year<br />

<br />

<a href="news.php">> Visit the News Page for more news.</a>

</p><br />

<div id="lastmatch" style="width:50%;">

<img src="lastmatch.gif" alt="Last Match" />

<p style="font-style:italic">19/Apr/2008, League Match 20, Boucher</p><p>New Santos 1 - 0 Ardoyne WMC III</p></div>

</div><br />

</div><br />

<div id="footer">

<p>© Copyright 2008-09 New Santos F.C.</p>

<p>Hosted by: <a href="http://www.Podium4Sport.com" class="white" >Podium4Sport</a>    |    

<a href="#top" class="white">Go to Top of Page    |    </a>Design by: <a href="mailto:[email protected]">David Dougan </a><br /><br />

<a href="http://jigsaw.w3.org/css-validator/">

<img style="border:0;width:88px;height:31px"

src="http://jigsaw.w3.org/css-validator/images/vcss"

alt="Valid CSS!"/>

</a></p>

</div>

</div>

</body>

</html>[/quote]

CSS:

@charset "utf-8";

/* CSS Document */

#header {

width: 800px;

}

#navigation {float: left;font-family:Arial; font-size:10px; color:#FF0000;width:150px;padding-right: 20px; padding-bottom:20px; margin-bottom:20px;}

#content {width: 600px; margin-left:200px;background-image:url(back.gif); background-repeat:no-repeat}

body {font-family:Arial, Verdana; font-size:12px; color:#000000; margin: 0 auto; text-align: center; background-image:url(bg.png)}

a { text-decoration:none; color:#FF0000}

a:hover {color:#FF0000; text-decoration:underline}

h1 {color:#FF0000; font-size:12px;}

h2 {font-style:italic; font-size:12px;}

p {margin-bottom:1px; padding-bottom:1px;}

p.h1 {font-size:12px; color:#FFFFFF; font-weight:bold}

#footer {font-size:11px;background-image:url(footer.gif); height:115px; width:800px; color:#FFFFFF; text-align:center; background-repeat:no-repeat; padding-top:5px}

a.white {color:#FFFFFF}

#container {width: 800px; margin: 0 auto; text-align: left; background-color:#FFFFFF; border:#FF0000; border:1px; border-style:dotted}[/quote]

Has anyone any clue as to how to fix this? This has been my first time trying to code a site ?

@CentauriJun 09.2008 — #If you look at the source of the actual page, you will find an extra doctype, head and body tags etc which should not be there :

[CODE]<div id="navigation">
 <p>League Table</p>
 [COLOR="Red"]<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> 
 <html lang="en"> 
 <head> 
 <title>Tables</title> 
 <link href="tables.css" rel="stylesheet" type="text/css">
 </head> 
 
 <body>[/COLOR]
 
 <table width="100%" cellspacing="1" cellpadding="5">[/CODE]

@DougieDa59authorJun 09.2008 — #If you look at the source of the actual page, you will find an extra doctype, head and body tags etc which should not be there :

[CODE]<div id="navigation">
 <p>League Table</p>
 [COLOR="Red"]<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> 
 <html lang="en"> 
 <head> 
 <title>Tables</title> 
 <link href="tables.css" rel="stylesheet" type="text/css">
 </head> 
 
 <body>[/COLOR]
 
 <table width="100%" cellspacing="1" cellpadding="5">[/CODE]

This is an error, and indicates that your "tables.php" file has headers etc - the included file must NOT contain any of this, but should ONLY be the html code WITHOUT any doctype, head, title, link or body tags. Unless the tables file also has php commands within it, it should not be a php file extension either. The tables.css file should also be referenced from the main page, and NOT from the included file.

You also need [COLOR="Blue"]overflow: hidden;[/COLOR] added to the #container css to force the container to enclose floats (which IE gets wrong), and [COLOR="Blue"]margin: 0 auto;[/COLOR] added to the #footer css will centre it.[/QUOTE]
Thanks very much for your help mate. The layout is basically sorted now (eventually).. Any ideas on how to fix the last few validation errors?

http://validator.w3.org/check?uri=http%3A%2F%2Fwww.newsantosfc.co.uk%2Fv2%2Ftest1.php

I removed all the headers etc. from tables.php as well..

@CentauriJun 09.2008 — #The javascript code is within a comment tag

[CODE]<script type="text/javascript">
 [COLOR="Blue"]<!--[/COLOR][/CODE]

but there is no corresponding closing comment tag. Add :

[CODE]function MM_swapImage() { //v3.0
 var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
 if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
 }
 [COLOR="Red"]-->[/COLOR]
 </script>
 </head>[/CODE]

Also in #CSS _↴

CSS Problem? or Javascript?Need Help W/ Positioning Basics Please..Font-Family = Bad???

Success!

Help @DougieDa59 spread the word by sharing this article on Twitter...

Tweet This

Positioning div elements

11 Comments(s) _↴

Also in #CSS _↴

Success!

Social

Version

Positioning div elements

11 Comments(s) ↴

Also in #CSS ↴

Success!

The web is an endless sea of information. Don't miss the boat... Subscribe!

Social

Version

11 Comments(s) _↴

Also in #CSS _↴