Skip to content
View in the app

A better way to browse. Learn more.

Web Designer Forum

A full-screen app on your home screen with push notifications, badges and more.

To install this app on iOS and iPadOS
  1. Tap the Share icon in Safari
  2. Scroll the menu and tap Add to Home Screen.
  3. Tap Add in the top-right corner.
To install this app on Android
  1. Tap the 3-dot menu (⋮) in the top-right corner of the browser.
  2. Tap Add to Home screen or Install app.
  3. Confirm by tapping Install.

css layout problem

Featured Replies

Iv just finished building a webpage and all was perfect but somewhere along the line I have accidentaly changed something within the css i think as I cannot get the footer alligned in the page foot. The footer links are perfectly aligned within the page foot and to the right. The sitemap container is supposed to be on the far left hand side of the foot directly opposite the sitemap links. The main footer should sit underneath about centered as much as possible. The settings were all fine untill something changed so i cannot be that far from getting it. Im still new to raw coding so any help would be highly appreciated. Thanks.

 

gallery.css

#wrapper {
width:1024px;
height:1000px;
background-image:url('../images/gallery_theme.jpg');
color:#FFF;
margin:auto;
}

#streamline_affiliate {
float:left;
margin-top:7px;
margin-left:15px;
}

#w3c {
float:left;
margin-top:8px;
margin-left:10px;
}

#w3c-css {
float:left;
margin-top:8px;
margin-left:8px;
}

#header {
width:413px;
height:20px;
margin-top:16px;
float:right;
text-align:center;
font-weight:bolder;
}

#navigation {
margin-top:45px;
margin-left:-235px;
float:left;
}

#adsense {
height: 251px;
width: 301px;
float:right;
margin-right:230px;
margin-top:40px;
}

#content {
height:400px;
width:550px;
background-color:#FF8000;
float:right;
clear:right;
margin-top:45px;
margin-right:84px;
}

#footer_links {
height:29px;
width:300px;
float:right;
clear:both;
margin-right:27px;
margin-top:57px;
text-align:center;
font-weight:bolder;
}

#sitemap_container {
height:28px;
width:129px;
float:left;
clear:left;
margin-left:25px;
text-align:center;
font-weight:bolder;
}

#footer {
height:29px;
width:978px;
margin-left:24px;
margin-top:22px;
clear:both;
font-weight:bolder;
text-align:center;
}

a:link,a:visited,a:active {
color:#FFF;
}

a:hover {
color:#0080FF;
}

 

gallery.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 name="generator" content=
 "HTML Tidy for Linux/x86 (vers 11 February 2007), see www.w3.org" />

 <title>Gallery | Motorcycle & scooter spare parts & accessories
 | Andy's Motorcycles - Stoke-on-Trent</title>
 <meta http-equiv="content-type" content="text/html; charset=us-ascii" />
 <link rel="SHORTCUT ICON" href=
 "http://www.andys-motorcycles.com/favicon.ico" />
 <meta name="description" content=
 "welcome to andys motorcycles gallery page. This is a fun page for customers who want to see motorcycle images and pictures as well as logos that we can help to supply spare parts for. Andys motorcycles realy are the best motorcycle store in stoke-on-trent" />
 <meta name="keywords" content=
 "motorcycle picture, superbike images, buy aprilia parts, scooter spare parts, motorcycle services, pre mot, second hand parts, breakdown recovery, cheapest bike shop, stoke on trent, help with motorcycle / scooter problem" />
 <meta name="robots" content="index, follow" />
 <meta name="copyright" content="Andy's Motorcycles" />
 <meta name="author" content="Lee Mifflin" />
 <meta name="email" content="support@andys-motorcycles.com" />
 <style type="text/css">
/*<![CDATA[*/
  body { 
  background-image:url('images/website_background.png'); 
  background-repeat: repeat; 
  } 
 /*]]>*/
 </style>
 <link rel="stylesheet" href="css/gallery.css" type="text/css" media=
 "screen" />
 <script type="text/javascript">
//<![CDATA[

 var _gaq = _gaq || [];
 _gaq.push(['_setAccount', 'UA-12516005-2']);
 _gaq.push(['_trackPageview']);

 (function() {
   var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
   ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
   var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
 })();

 //]]>
 </script>
</head>

<body>
 <div id="wrapper">
   <div id="streamline_affiliate">
     <a href=
     "http://www.streamline.net/?aff=a85dedfc421d038d930877ff40843b2b"><img src="http://www.streamline.net/graphics/powered_by.gif"
     alt=
     "Streamline.Net - 100,000 sites hosted, join the revolution! - The home of good value web hosting"
     border="0" /></a>
   </div>

   <div id="w3c">
     <a href="http://validator.w3.org/check?uri=referer"><img src=
     "http://www.w3.org/Icons/valid-xhtml10" alt=
     "Valid XHTML 1.0 Transitional" height="31" width="88" border=
     "0" /></a>
   </div>

   <div id="header">
     Tel: 01782 818097 | Email: <a href=
     "mailto:support@andys-motorcycles.com" title=
     "email_andys_motorcycles">support@andys-motorcycles.com</a>
   </div>

   <div id="w3c-css">
     <a href=
     "http://jigsaw.w3.org/css-validator/check/referer"><img style=
     "border:0;width:88px;height:31px" src=
     "http://jigsaw.w3.org/css-validator/images/vcss-blue" alt=
     "Valid CSS!" /></a>
   </div>

   <div id="navigation">
     <script type="text/javascript" src="swfobject.js">
</script>

     <div id="CC6487736">
       Form Object
     </div><script type="text/javascript">
//<![CDATA[
     var so = new SWFObject("nav.swf","", "585", "37", "7,0,0,0", "#ffffff");so.addParam("classid", "clsid:d27cdb6e-ae6d-11cf-96b8-444553540000");so.addParam("quality", "high");so.addParam("scale", "noscale");so.addParam("salign", "lt");so.addParam("wmode", "transparent");so.write("CC6487736");
     //]]>
     </script>
   </div>

   <div id="adsense">
     <script type="text/javascript">
//<![CDATA[
     <!--
     google_ad_client = "pub-5431799335873325";
     /* 336x280, Large Square */
     google_ad_slot = "3601907959";
     google_ad_width = 336;
     google_ad_height = 280;
     //-->
     //]]>
     </script> <script type="text/javascript" src=
     "http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script>
   </div>

   <div id="content">
     <object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width=
     "550" height="400" id="FlashID" title=
     "andys_motorcycles_flash_gallery">
       <param name="movie" value="andys_gallery.swf" />
       <param name="quality" value="high" />
       <param name="wmode" value="opaque" />
       <param name="swfversion" value="6.0.65.0" />
       <param name="expressinstall" value="Scripts/expressInstall.swf" />
       <object type="application/x-shockwave-flash" data=
       "andys_gallery.swf" width="550" height="400">
         <!--<![endif]-->
         <param name="quality" value="high" />
         <param name="wmode" value="opaque" />
         <param name="swfversion" value="6.0.65.0" />
         <param name="expressinstall" value=
         "Scripts/expressInstall.swf" />

         <div>
           <h4>Content on this page requires a newer version of Adobe
           Flash Player.</h4>

           <p><a href="http://www.adobe.com/go/getflashplayer"><img src=
           "http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif"
           alt="Get Adobe Flash player" width="112" height=
           "33" /></a></p>
         </div>
       </object> <!--<![endif]-->
     </object>
   </div>

   <div id="footer_links">
     <a href="index.html" target="_self" title="home_page_link">Home</a>
     | <a href="about.html" target="_self" title=
     "about_us_link">About</a> | <a href="contact.html" target="_self"
     title="contact_us_link">Contact</a> | <a href="store/index.php"
     target="_self" title="online_store_link">Store</a> | <a href=
     "gallery.html" target="_self" title="image_gallery_link">Gallery</a>
   </div>

   <div id="sitemap_container">
     <a href="sitemap/sitemap.html" target="_blank" title=
     "site_map">Sitemap</a>
   </div>

   <div id="footer">
     <a href="index.php" title="home" target=
     "_self">www.andys-motorcycles.com</a> | Andy's Motorcycles. 134
     Waterloo Road, Burslem, Stoke-on-Trent. ST6 3HB. United Kingdom. |
     VAT registered
   </div>
 </div>
</body>
</html>

Hi there,

 

This is my first time posting but here goes....

 

I've popped your footer_links, sitemap_container and footer in another div called footerholder, which I've placed outside the wrapped(not sure of your graphics so might need to go back in, you'll have to see).

 

Either way I think I've got what you wanted:

 

gallery.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 name="generator" content=
 "HTML Tidy for Linux/x86 (vers 11 February 2007), see www.w3.org" />

 <title>Gallery | Motorcycle & scooter spare parts & accessories
 | Andy's Motorcycles - Stoke-on-Trent</title>
 <meta http-equiv="content-type" content="text/html; charset=us-ascii" />
 <link rel="SHORTCUT ICON" href=
 "http://www.andys-motorcycles.com/favicon.ico" />
 <meta name="description" content=
 "welcome to andys motorcycles gallery page. This is a fun page for customers who want to see motorcycle images and pictures as well as logos that we can help to supply spare parts for. Andys motorcycles realy are the best motorcycle store in stoke-on-trent" />
 <meta name="keywords" content=
 "motorcycle picture, superbike images, buy aprilia parts, scooter spare parts, motorcycle services, pre mot, second hand parts, breakdown recovery, cheapest bike shop, stoke on trent, help with motorcycle / scooter problem" />
 <meta name="robots" content="index, follow" />
 <meta name="copyright" content="Andy's Motorcycles" />
 <meta name="author" content="Lee Mifflin" />
 <meta name="email" content="support@andys-motorcycles.com" />
 <style type="text/css">
/*<![CDATA[*/
  body { 
  background-image:url('images/website_background.png'); 
  background-repeat: repeat; 
  } 
 /*]]>*/
 </style>
 <link rel="stylesheet" href="css/gallery.css" type="text/css" media=
 "screen" />
 <script type="text/javascript">
//<![CDATA[

 var _gaq = _gaq || [];
 _gaq.push(['_setAccount', 'UA-12516005-2']);
 _gaq.push(['_trackPageview']);

 (function() {
   var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
   ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
   var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
 })();

 //]]>
 </script>
</head>

<body>
 <div id="wrapper">
   <div id="streamline_affiliate">
     <a href=
     "http://www.streamline.net/?aff=a85dedfc421d038d930877ff40843b2b"><img src="http://www.streamline.net/graphics/powered_by.gif"
     alt=
     "Streamline.Net - 100,000 sites hosted, join the revolution! - The home of good value web hosting"
     border="0" /></a>
   </div>

   <div id="w3c">
     <a href="http://validator.w3.org/check?uri=referer"><img src=
     "http://www.w3.org/Icons/valid-xhtml10" alt=
     "Valid XHTML 1.0 Transitional" height="31" width="88" border=
     "0" /></a>
   </div>

   <div id="header">
     Tel: 01782 818097 | Email: <a href=
     "mailto:support@andys-motorcycles.com" title=
     "email_andys_motorcycles">support@andys-motorcycles.com</a>
   </div>

   <div id="w3c-css">
     <a href=
     "http://jigsaw.w3.org/css-validator/check/referer"><img style=
     "border:0;width:88px;height:31px" src=
     "http://jigsaw.w3.org/css-validator/images/vcss-blue" alt=
     "Valid CSS!" /></a>
   </div>

   <div id="navigation">
     <script type="text/javascript" src="swfobject.js">
</script>

     <div id="CC6487736">
       Form Object
     </div><script type="text/javascript">
//<![CDATA[
     var so = new SWFObject("nav.swf","", "585", "37", "7,0,0,0", "#ffffff");so.addParam("classid", "clsid:d27cdb6e-ae6d-11cf-96b8-444553540000");so.addParam("quality", "high");so.addParam("scale", "noscale");so.addParam("salign", "lt");so.addParam("wmode", "transparent");so.write("CC6487736");
     //]]>
     </script>
   </div>

   <div id="adsense">
     <script type="text/javascript">
//<![CDATA[
     <!--
     google_ad_client = "pub-5431799335873325";
     /* 336x280, Large Square */
     google_ad_slot = "3601907959";
     google_ad_width = 336;
     google_ad_height = 280;
     //-->
     //]]>
     </script> <script type="text/javascript" src=
     "http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script>
   </div>

   <div id="content">
     <object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width=
     "550" height="400" id="FlashID" title=
     "andys_motorcycles_flash_gallery">
       <param name="movie" value="andys_gallery.swf" />
       <param name="quality" value="high" />
       <param name="wmode" value="opaque" />
       <param name="swfversion" value="6.0.65.0" />
       <param name="expressinstall" value="Scripts/expressInstall.swf" />
       <object type="application/x-shockwave-flash" data=
       "andys_gallery.swf" width="550" height="400">
         <!--<![endif]-->
         <param name="quality" value="high" />
         <param name="wmode" value="opaque" />
         <param name="swfversion" value="6.0.65.0" />
         <param name="expressinstall" value=
         "Scripts/expressInstall.swf" />

         <div>
           <h4>Content on this page requires a newer version of Adobe
           Flash Player.</h4>

           <p><a href="http://www.adobe.com/go/getflashplayer"><img src=
           "http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif"
           alt="Get Adobe Flash player" width="112" height=
           "33" /></a></p>
         </div>
       </object> <!--<![endif]-->
     </object>
   </div>
</div>

<div id="footerholder">
   <div id="footer_links">
     <a href="index.html" target="_self" title="home_page_link">Home</a>
     | <a href="about.html" target="_self" title=
     "about_us_link">About</a> | <a href="contact.html" target="_self"
     title="contact_us_link">Contact</a> | <a href="store/index.php"
     target="_self" title="online_store_link">Store</a> | <a href=
     "gallery.html" target="_self" title="image_gallery_link">Gallery</a>
   </div>

   <div id="sitemap_container">
     <a href="sitemap/sitemap.html" target="_blank" title=
     "site_map">Sitemap</a>
   </div>

   <div id="footer">
     <a href="index.php" title="home" target=
     "_self">www.andys-motorcycles.com</a> | Andy's Motorcycles. 134
     Waterloo Road, Burslem, Stoke-on-Trent. ST6 3HB. United Kingdom. |
     VAT registered
   </div>
   </div>

</body>
</html>

 

gallery.css

#wrapper {
width:1024px;
height:1000px;
background-image:url('../images/gallery_theme.jpg');
color:#FFF;
margin:auto;
}

#streamline_affiliate {
float:left;
margin-top:7px;
margin-left:15px;
}

#w3c {
float:left;
margin-top:8px;
margin-left:10px;
}

#w3c-css {
float:left;
margin-top:8px;
margin-left:8px;
}

#header {
width:413px;
height:20px;
margin-top:16px;
float:right;
text-align:center;
font-weight:bolder;
}

#navigation {
margin-top:45px;
margin-left:-235px;
float:left;
}

#adsense {
height: 251px;
width: 301px;
float:right;
margin-right:230px;
margin-top:40px;
}

#content {
height:400px;
width:550px;
background-color:#FF8000;
float:right;
clear:right;
margin-top:45px;
margin-right:84px;
}

#footer_links {
height:29px;
width:300px;
float:right;
clear:both;
text-align:center;
font-weight:bolder;
}

#sitemap_container {
height:28px;
width:129px;
float:left;
clear:left;
text-align:center;
font-weight:bold;
}

#footer {
height:29px;
width:978px;
margin-left:auto;
margin-right:auto;
margin-top:22px;
clear:both;
font-weight:bolder;
text-align:center;
}

a:link,a:visited,a:active {
color:#FFF;
}

a:hover {
color:#0080FF;
}

#footerholder
{
width:978px;
margin-left:auto;
margin-right:auto;
}

 

hope this is what you wanted, let me know if i'm way off!

 

Ciao!

 

Digital Parsnip!

ok, I tried to load up your pages on my notepad and view them, but it is late, and i can't follow what you are saying, exactly.

 

My trick with getting the footer to always stay separate and at the bottom of the page is to put this inbetween the main content and the footer:

 

<div style="clear:both"></div>

 

And then you can margin it to the center of your page no matter what size the browser by adding:

 

margin:0 auto;

 

into your footer css.

 

I could be totally wrong here! Sorry, I'm off to bed and I'll check up here tomorrow to see if you came right with this.

Hi Again,

 

Yeah you're right with both.

 

The only thing you missed in your original code was the auto value for your margin-right.

 

I've attached some more code showing the foot_links and sitemap divs inside the wrapper, but this time their margins have been adjusted to bring them inline with the footer.

 

gallery.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 name="generator" content=
 "HTML Tidy for Linux/x86 (vers 11 February 2007), see www.w3.org" />

 <title>Gallery | Motorcycle & scooter spare parts & accessories
 | Andy's Motorcycles - Stoke-on-Trent</title>
 <meta http-equiv="content-type" content="text/html; charset=us-ascii" />
 <link rel="SHORTCUT ICON" href=
 "http://www.andys-motorcycles.com/favicon.ico" />
 <meta name="description" content=
 "welcome to andys motorcycles gallery page. This is a fun page for customers who want to see motorcycle images and pictures as well as logos that we can help to supply spare parts for. Andys motorcycles realy are the best motorcycle store in stoke-on-trent" />
 <meta name="keywords" content=
 "motorcycle picture, superbike images, buy aprilia parts, scooter spare parts, motorcycle services, pre mot, second hand parts, breakdown recovery, cheapest bike shop, stoke on trent, help with motorcycle / scooter problem" />
 <meta name="robots" content="index, follow" />
 <meta name="copyright" content="Andy's Motorcycles" />
 <meta name="author" content="Lee Mifflin" />
 <meta name="email" content="support@andys-motorcycles.com" />
 <style type="text/css">
/*<![CDATA[*/
  body { 
  background-image:url('images/website_background.png'); 
  background-repeat: repeat; 
  } 
 /*]]>*/
 </style>
 <link rel="stylesheet" href="css/gallery.css" type="text/css" media=
 "screen" />
 <script type="text/javascript">
//<![CDATA[

 var _gaq = _gaq || [];
 _gaq.push(['_setAccount', 'UA-12516005-2']);
 _gaq.push(['_trackPageview']);

 (function() {
   var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
   ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
   var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
 })();

 //]]>
 </script>
</head>

<body>
 <div id="wrapper">
   <div id="streamline_affiliate">
     <a href=
     "http://www.streamline.net/?aff=a85dedfc421d038d930877ff40843b2b"><img src="http://www.streamline.net/graphics/powered_by.gif"
     alt=
     "Streamline.Net - 100,000 sites hosted, join the revolution! - The home of good value web hosting"
     border="0" /></a>
   </div>

   <div id="w3c">
     <a href="http://validator.w3.org/check?uri=referer"><img src=
     "http://www.w3.org/Icons/valid-xhtml10" alt=
     "Valid XHTML 1.0 Transitional" height="31" width="88" border=
     "0" /></a>
   </div>

   <div id="header">
     Tel: 01782 818097 | Email: <a href=
     "mailto:support@andys-motorcycles.com" title=
     "email_andys_motorcycles">support@andys-motorcycles.com</a>
   </div>

   <div id="w3c-css">
     <a href=
     "http://jigsaw.w3.org/css-validator/check/referer"><img style=
     "border:0;width:88px;height:31px" src=
     "http://jigsaw.w3.org/css-validator/images/vcss-blue" alt=
     "Valid CSS!" /></a>
   </div>

   <div id="navigation">
     <script type="text/javascript" src="swfobject.js">
</script>

     <div id="CC6487736">
       Form Object
     </div><script type="text/javascript">
//<![CDATA[
     var so = new SWFObject("nav.swf","", "585", "37", "7,0,0,0", "#ffffff");so.addParam("classid", "clsid:d27cdb6e-ae6d-11cf-96b8-444553540000");so.addParam("quality", "high");so.addParam("scale", "noscale");so.addParam("salign", "lt");so.addParam("wmode", "transparent");so.write("CC6487736");
     //]]>
     </script>
   </div>

   <div id="adsense">
     <script type="text/javascript">
//<![CDATA[
     <!--
     google_ad_client = "pub-5431799335873325";
     /* 336x280, Large Square */
     google_ad_slot = "3601907959";
     google_ad_width = 336;
     google_ad_height = 280;
     //-->
     //]]>
     </script> <script type="text/javascript" src=
     "http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script>
   </div>

   <div id="content">
     <object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width=
     "550" height="400" id="FlashID" title=
     "andys_motorcycles_flash_gallery">
       <param name="movie" value="andys_gallery.swf" />
       <param name="quality" value="high" />
       <param name="wmode" value="opaque" />
       <param name="swfversion" value="6.0.65.0" />
       <param name="expressinstall" value="Scripts/expressInstall.swf" />
       <object type="application/x-shockwave-flash" data=
       "andys_gallery.swf" width="550" height="400">
         <!--<![endif]-->
         <param name="quality" value="high" />
         <param name="wmode" value="opaque" />
         <param name="swfversion" value="6.0.65.0" />
         <param name="expressinstall" value=
         "Scripts/expressInstall.swf" />

         <div>
           <h4>Content on this page requires a newer version of Adobe
           Flash Player.</h4>

           <p><a href="http://www.adobe.com/go/getflashplayer"><img src=
           "http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif"
           alt="Get Adobe Flash player" width="112" height=
           "33" /></a></p>
         </div>
       </object> <!--<![endif]-->
     </object>
   </div>


   <div id="footer_links">
     <a href="index.html" target="_self" title="home_page_link">Home</a>
     | <a href="about.html" target="_self" title=
     "about_us_link">About</a> | <a href="contact.html" target="_self"
     title="contact_us_link">Contact</a> | <a href="store/index.php"
     target="_self" title="online_store_link">Store</a> | <a href=
     "gallery.html" target="_self" title="image_gallery_link">Gallery</a>
   </div>

   <div id="sitemap_container">
     <a href="sitemap/sitemap.html" target="_blank" title=
     "site_map">Sitemap</a>
   </div>

   <div id="footer">
     <a href="index.php" title="home" target=
     "_self">www.andys-motorcycles.com</a> | Andy's Motorcycles. 134
     Waterloo Road, Burslem, Stoke-on-Trent. ST6 3HB. United Kingdom. |
     VAT registered
   </div>
   </div>

</body>
</html>

 

gallery.css

#wrapper {
width:1024px;
height:auto;
background-image:url('../images/gallery_theme.jpg');
color:#FFF;
margin:auto;
}

#streamline_affiliate {
float:left;
margin-top:7px;
margin-left:15px;
}

#w3c {
float:left;
margin-top:8px;
margin-left:10px;
}

#w3c-css {
float:left;
margin-top:8px;
margin-left:8px;
}

#header {
width:413px;
height:20px;
margin-top:16px;
float:right;
text-align:center;
font-weight:bolder;
}

#navigation {
margin-top:45px;
margin-left:-235px;
float:left;
}

#adsense {
height: 251px;
width: 301px;
float:right;
margin-right:230px;
margin-top:40px;
}

#content {
height:400px;
width:550px;
background-color:#FF8000;
float:right;
clear:right;
margin-top:45px;
margin-right:84px;
}

#footer_links {
height:29px;
width:300px;
float:right;
clear:both;
text-align:center;
font-weight:bolder;
margin-right:23px;
}

#sitemap_container {
height:29px;
width:129px;
float:left;
clear:left;
text-align:center;
font-weight:bold;
margin-left:23px;
}

#footer {
height:29px;
width:978px;
margin-left:auto;
margin-right:auto;
margin-top:22px;
clear:both;
font-weight:bolder;
text-align:center;
}

a:link,a:visited,a:active {
color:#FFF;
}

a:hover {
color:#0080FF;
}

 

I've expanded your margin idea to make it simpler to see what I've done, but you can replace:

margin-left:auto;
margin-right:auto;
margin-top:0;
margin-bottom:0;

 

with:

margin:0 auto;

 

If fact it's considered much better practice.

 

Cheers,

 

Digital Parsnip

Create an account or sign in to comment

Account

Navigation

Search

Search

Configure browser push notifications

Chrome (Android)
  1. Tap the lock icon next to the address bar.
  2. Tap Permissions → Notifications.
  3. Adjust your preference.
Chrome (Desktop)
  1. Click the padlock icon in the address bar.
  2. Select Site settings.
  3. Find Notifications and adjust your preference.