Css Layout Problem - Need fix for IE & Chrome

Hi friends,

I 'm working on my html/css layout. I achieved almost what I wanted. But its looks good only in Firefox. IE7 and Chrome making the design real messy.

Can anyone help me how to fix this on other browsers(IE, chrome, etc.,)?

Also my footer is placing in the middle of the page. I tried to put after the contentwrapper div, its not working.

Here is my html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
 <head>
   <title>Content Area</title>
   <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
   <link href="style2.css" rel="stylesheet" type="text/css" />
 </head>
 <body>
  <div id="wrapper">
   <div id="header">
    <div id="logo"> 
      <a href="index.html"><img src="images/logo.gif" width="400" height="135" alt="logo" /></a>
    </div>
      <div id="navigation">
        <ul>
           <li class="button1"><a href="index.html"></a></li>
           <li class="button2"><a href="about.html"></a>
              <ul>
                  <li class="button2a"><a href="overview.html"></a></li>
              </ul>
             </li>
           <li class="button3"><a href="product.html"></a>
              <ul>
                 <li class="button3a"><a href="iptv.html"></a></li>
                 <li class="button3b"><a href="dvb.html"></a></li>
                 <li class="button3c"><a href="sdk.html"></a></li>
                 <li class="button3d"><a href="mpx.html"></a></li>
             </ul>
            </li>
         <li class="button4"><a href="service.html"></a></li> 
         <li class="button5"><a href="contact.html"></a></li>
      </ul>
    </div><!--end of nav div-->
      <div id="featurecontent">
           <img src="images/slideshow.gif" width="960" height="300" />
      </div><!--end of featurecontent div-->
   </div><!--end of header div-->
  <div id="contentwrapper"
    <div id="maincontent">
    <h3>Welcome</h3>
    <p>Sample Text.Sample Text.Sample Text.Sample Text.Sample Text.Sample Text.Sample Text.Sample Text.
       Sample Text.Sample Text.Sample Text.Sample Text.Sample Text.Sample Text.Sample Text.Sample Text.
       Sample Text.Sample Text.Sample Text.Sample Text.Sample Text.Sample Text.Sample Text.Sample Text.
       Sample Text.Sample Text.Sample Text.Sample Text.Sample Text.Sample Text.Sample Text.Sample Text.</p>
    <p>Sample Text.Sample Text.Sample Text.Sample Text.Sample Text.Sample Text.Sample Text.Sample Text.
       Sample Text.Sample Text.Sample Text.Sample Text.Sample Text.Sample Text.Sample Text.Sample Text.
       Sample Text.Sample Text.Sample Text.Sample Text.Sample Text.Sample Text.Sample Text.Sample Text.
       Sample Text.Sample Text.Sample Text.Sample Text.Sample Text.Sample Text.Sample Text.Sample Text.</p>
    <p>Sample Text.Sample Text.Sample Text.Sample Text.Sample Text.Sample Text.Sample Text.Sample Text.
       Sample Text.Sample Text.Sample Text.Sample Text.Sample Text.Sample Text.Sample Text.Sample Text.
       Sample Text.Sample Text.Sample Text.Sample Text.Sample Text.Sample Text.Sample Text.Sample Text.
       Sample Text.Sample Text.Sample Text.Sample Text.Sample Text.Sample Text.Sample Text.Sample Text.</p>
    <p>Sample Text.Sample Text.Sample Text.Sample Text.Sample Text.Sample Text.Sample Text.Sample Text.
       Sample Text.Sample Text.Sample Text.Sample Text.Sample Text.Sample Text.Sample Text.Sample Text.
       Sample Text.Sample Text.Sample Text.Sample Text.Sample Text.Sample Text.Sample Text.Sample Text.
       Sample Text.Sample Text.Sample Text.Sample Text.Sample Text.Sample Text.Sample Text.Sample Text.</p>
    <p>Sample Text.Sample Text.Sample Text.Sample Text.Sample Text.Sample Text.Sample Text.Sample Text.
       Sample Text.Sample Text.Sample Text.Sample Text.Sample Text.Sample Text.Sample Text.Sample Text.
       Sample Text.Sample Text.Sample Text.Sample Text.Sample Text.Sample Text.Sample Text.Sample Text.
       Sample Text.Sample Text.Sample Text.Sample Text.Sample Text.Sample Text.Sample Text.Sample Text.</p>
    p>Sample Text.Sample Text.Sample Text.Sample Text.Sample Text.Sample Text.Sample Text.Sample Text.
       Sample Text.Sample Text.Sample Text.Sample Text.Sample Text.Sample Text.Sample Text.Sample Text.
       Sample Text.Sample Text.Sample Text.Sample Text.Sample Text.Sample Text.Sample Text.Sample Text.
       Sample Text.Sample Text.Sample Text.Sample Text.Sample Text.Sample Text.Sample Text.Sample Text.</p>
    <p>Sample Text.Sample Text.Sample Text.Sample Text.Sample Text.Sample Text.Sample Text.Sample Text.
       Sample Text.Sample Text.Sample Text.Sample Text.Sample Text.Sample Text.Sample Text.Sample Text.
       Sample Text.Sample Text.Sample Text.Sample Text.Sample Text.Sample Text.Sample Text.Sample Text.
       Sample Text.Sample Text.Sample Text.Sample Text.Sample Text.Sample Text.Sample Text.Sample Text.</p>
    <p>Sample Text.Sample Text.Sample Text.Sample Text.Sample Text.Sample Text.Sample Text.Sample Text.
       Sample Text.Sample Text.Sample Text.Sample Text.Sample Text.Sample Text.Sample Text.Sample Text.
       Sample Text.Sample Text.Sample Text.Sample Text.Sample Text.Sample Text.Sample Text.Sample Text.
       Sample Text.Sample Text.Sample Text.Sample Text.Sample Text.Sample Text.Sample Text.Sample Text.</p>
    <p>Sample Text.Sample Text.Sample Text.Sample Text.Sample Text.Sample Text.Sample Text.Sample Text.
       Sample Text.Sample Text.Sample Text.Sample Text.Sample Text.Sample Text.Sample Text.Sample Text.
       Sample Text.Sample Text.Sample Text.Sample Text.Sample Text.Sample Text.Sample Text.Sample Text.
       Sample Text.Sample Text.Sample Text.Sample Text.Sample Text.Sample Text.Sample Text.Sample Text.</p>
    <p>Sample Text.Sample Text.Sample Text.Sample Text.Sample Text.Sample Text.Sample Text.Sample Text.
       Sample Text.Sample Text.Sample Text.Sample Text.Sample Text.Sample Text.Sample Text.Sample Text.
       Sample Text.Sample Text.Sample Text.Sample Text.Sample Text.Sample Text.Sample Text.Sample Text.
       Sample Text.Sample Text.Sample Text.Sample Text.Sample Text.Sample Text.Sample Text.Sample Text.</p>
    p>Sample Text.Sample Text.Sample Text.Sample Text.Sample Text.Sample Text.Sample Text.Sample Text.
       Sample Text.Sample Text.Sample Text.Sample Text.Sample Text.Sample Text.Sample Text.Sample Text.
       Sample Text.Sample Text.Sample Text.Sample Text.Sample Text.Sample Text.Sample Text.Sample Text.
       Sample Text.Sample Text.Sample Text.Sample Text.Sample Text.Sample Text.Sample Text.Sample Text.</p>
    <p>Sample Text.Sample Text.Sample Text.Sample Text.Sample Text.Sample Text.Sample Text.Sample Text.
       Sample Text.Sample Text.Sample Text.Sample Text.Sample Text.Sample Text.Sample Text.Sample Text.
       Sample Text.Sample Text.Sample Text.Sample Text.Sample Text.Sample Text.Sample Text.Sample Text.
       Sample Text.Sample Text.Sample Text.Sample Text.Sample Text.Sample Text.Sample Text.Sample Text.</p>
    <p>Sample Text.Sample Text.Sample Text.Sample Text.Sample Text.Sample Text.Sample Text.Sample Text.
       Sample Text.Sample Text.Sample Text.Sample Text.Sample Text.Sample Text.Sample Text.Sample Text.
       Sample Text.Sample Text.Sample Text.Sample Text.Sample Text.Sample Text.Sample Text.Sample Text.
       Sample Text.Sample Text.Sample Text.Sample Text.Sample Text.Sample Text.Sample Text.Sample Text.</p>
    <p>Sample Text.Sample Text.Sample Text.Sample Text.Sample Text.Sample Text.Sample Text.Sample Text.
       Sample Text.Sample Text.Sample Text.Sample Text.Sample Text.Sample Text.Sample Text.Sample Text.
       Sample Text.Sample Text.Sample Text.Sample Text.Sample Text.Sample Text.Sample Text.Sample Text.
       Sample Text.Sample Text.Sample Text.Sample Text.Sample Text.Sample Text.Sample Text.Sample Text.</p>
    <p>Sample Text.Sample Text.Sample Text.Sample Text.Sample Text.Sample Text.Sample Text.Sample Text.
       Sample Text.Sample Text.Sample Text.Sample Text.Sample Text.Sample Text.Sample Text.Sample Text.
       Sample Text.Sample Text.Sample Text.Sample Text.Sample Text.Sample Text.Sample Text.Sample Text.
       Sample Text.Sample Text.Sample Text.Sample Text.Sample Text.Sample Text.Sample Text.Sample Text.</p>
   </div><!--end of maincontent div-->
      <div id="sidecontenttop">
        <img src="images/events.gif" width="320" height="116" alt="Events" />
         <div id="sidecontenttext1">
           <p class="nudged1">Sample Text.Sample Text.Sample Text.Sample Text.Sample Text.Sample Text.Sample Text.Sample Text.</p>
           <p class="nudged1">Sample Text.Sample Text.Sample Text.Sample Text.Sample Text.Sample Text.Sample Text.Sample Text.</p>
           <p class="nudged1">Sample Text.Sample Text.Sample Text.Sample Text.Sample Text.Sample Text.Sample Text.Sample Text.</p>
           <p class="nudged1">Sample Text.Sample Text.Sample Text.Sample Text.Sample Text.Sample Text.Sample Text.Sample Text.</p>
           <p class="nudged1">Sample Text.Sample Text.Sample Text.Sample Text.Sample Text.Sample Text.Sample Text.Sample Text.</p>
          </div><!--end of sidecontenttext1-->
       </div><!--end of sidecontenttop div-->
      <div id="sidecontentdown">
        <img src="images/news.gif" width="320" height="100" alt="News" /> 
        <div id="sidecontenttext2"> 
        <p class="nudged1">12/10/2010 - 12:48</p>
        <p class="nudged1">Sample Text.Sample Text.Sample Text.Sample Text.Sample Text.Sample Text.Sample Text.Sample Text.
       Sample Text.Sample Text.Sample Text.Sample Text.Sample Text.Sample Text.Sample Text.Sample Text.
       Sample Text.Sample Text.Sample Text.Sample Text.Sample Text.Sample Text.Sample Text.Sample Text.
       Sample Text.Sample Text.Sample Text.Sample Text.Sample Text.Sample Text.Sample Text.Sample Text.</p>
        <p class="nudged1"> Sample Text.Sample Text.Sample Text.Sample Text.Sample Text.Sample Text.Sample Text.Sample Text.</p>
       </div><!--end of sidecontenttext2-->
      </div><!--end of sidecontentdown div-->
  </div><!--end of content wrapper--> 
   <div id="footer">
   <p><img src="images/logo_footer.gif" width="150" height="50" alt="logo"/> Copyright 2010. All Rights Reserved.</P>
   </div><!--end of footer div-->
  </div><!--end of wrapper div-->
  </body>
</html>

css

body {
      font-family:Verdana, Helvetica, Arial, sans-serif;
      font-size:13px;
      min-width:1000px;
      line-height:125%;
      background-color:#ecebeb;
      padding:0;
      margin:0;
       }

h3,p {
         font-family:Helvetica, "Trebuchet MS", Arial, sans-serif;
         font-size:13px;
         line-height:125%;
          }

h3   {
        font-weight:bold;
        color:black;
         }

img {
      border-style:none;
      }

#wrapper {
           width: 1000px;
           margin-left:auto;
           margin-right: auto;
           background-color: #ecebeb;
           padding: 0;
            }


#header {
          width:1000px;
          height:300px;
          background:url(images/header.jpg) repeat;
          margin:0;
          padding:0;
              }

#logo {
            float:left;
            width:400px;
            height:135px;
            padding:0;
            margin:0;
             }


/*navigation style*/
  
#navigation ul{ 
        float:left;
        width:960px;
        height:45px;
        margin-left:20px; 
        padding:0;
           }

#navigation li {
    position: relative; 
    float: left;
    width: 192px;
    height: 45px;
    list-style: none;
            }

#navigation li ul {
    position: absolute;
    top: 45px;
    left: 0; 
    margin-left: -9999px;
    width: auto;
    height: auto;
    background-color:;
          }

#navigation li:hover ul {
    margin-left: 0;
           }

#navigation li ul li {
    position: relative;
    float: none;
           }

#navigation li a {
    display: block;
    height: 45px;
    background: #ffffff none no-repeat center;
    text-align: center;
    line-height: 45px;
    text-decoration: none;
    color: #000;
            }

#navigation li.button1 a { background-image:url(images/home.gif);}
#navigation li.button1 a:hover { background-image:url(images/home_hover.gif);}
#navigation li.button2 a { background-image:url(images/about.gif);}
#navigation li.button2 a:hover { background-image:url(images/about_hover.gif);}
#navigation li.button2a a { background-image:url(images/overview.gif);}
#navigation li.button2a a:hover { background-image:url(images/overview_hover.gif);}
#navigation li.button3 a { background-image:url(images/product.gif);}
#navigation li.button3 a:hover { background-image:url(images/product_hover.gif);}
#navigation li.button3a a { background-image:url(images/iptv.gif);}
#navigation li.button3a a:hover { background-image:url(images/iptv_hover.gif);}
#navigation li.button3b a { background-image:url(images/dvb.gif);}
#navigation li.button3b a:hover { background-image:url(images/dvb_hover.gif);}
#navigation li.button3c a { background-image:url(images/sdk.gif);}
#navigation li.button3c a:hover { background-image:url(images/sdk_hover.gif);}
#navigation li.button3d a { background-image:url(images/mpx.gif);}
#navigation li.button3d a:hover { background-image:url(images/mpx_hover.gif);}
#navigation li.button4 a { background-image:url(images/service.gif);}
#navigation li.button4 a:hover { background-image:url(images/service_hover.gif);}
#navigation li.button5 a { background-image:url(images/contact.gif);}
#navigation li.button5 a:hover { background-image:url(images/contact_hover.gif);}


#featurecontent {
               float:left;
               margin-top:-15px;
               margin-left:20px;
               width:960px;
               height:250px;
                }

#contentwrapper {
                  position:absolute;
                  top:500px;
                  left:20px;
                  width:960px;
                  background:#e9e9e9;
                  border:2px solid #d5d5d5;
                  padding-bottom:30px;
                  -moz-border-radius:8px;
                  -webkit-border-radius:8px;
                  -opera-border-radius:8px;
                  -khtml-border-radius:8px;
                  border-radius:8px;
                        }

#maincontent {
               float:left;
               margin-top:10px;
               margin-left:15px;
               width:550px;
               text-align: justify;
               clear:left;
                     }

#sidecontenttop {
                  float:right;
                  width:320px;
                  margin-right:25px;
                     }

#sidecontenttext1 {
                  width:320px;
                  background:#ffffff;
                  margin-top:-20px;
                  padding-bottom:30px;
                  text-align: justify;
                    }

.nudged1 {
          margin:10px 20px 10px 20px;
         }

#sidecontentdown {
                  float:right;
                  width:320px;
                  margin-top:25px;
                  margin-right:25px;
                  clear:right;
                       }

#sidecontenttext2 {
                  width:320px;
                  background:#ffffff;
                  margin-top:-20px;
                  padding-bottom:30px;
                  text-align: justify;
                    }

#footer {
          width:1000px;
          height:50px;
          background:#ffffff;
          margin:0;
          padding-bottom:20px;
          clear:both;
              }

I hope someone will help me to stop hitting my head on the wall :slight_smile:

Thanks in advance.

Sam

You should put it online for us to see, because there are images which you didn’t share here. So in order to be able to help, please make it online.

Your wrapper is not properly closed! In your markup it looks like the footer is inside the wrapper, but it’s not. I.o.w. Your missing a closing div tag somewhere.

Hi,

I think the problem is the missing closing bracket here.


    <div id="[B]contentwrapper"[/B]
    
    <div id="maincontent">
        <h3>Welcome</h3>


It should be:


    <div i[B]d="contentwrapper">[/B]
    
    <div id="maincontent">
        <h3>Welcome</h3>



Oops. Didn’t see that one :eek:

I missed it on first look also :slight_smile:

Thank you friends for your efforts to help me.

@hook4free- I don’t have a hosting account. Can I take a screenshot and upload it as .jpg. Is that work?

@donboe - I’ve two wrapper_div. One is holding all the mark up from logo to footer and another one - contentwrapper - holding only the content area.

@Paul O’B - Thanks for pointing out that :slight_smile: But that didn’t change anything :frowning:

Thanks again,

Sam

Hi,

You have your contentwrapper absolutely positioned which means it is removed from the flow and therefore doesn;t really exist on the page so that’s why the footer is above it.

Just remove the absolute positioning and things should start to fall back into place.
e.g.


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>Content Area</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link href="style2.css" rel="stylesheet" type="text/css" />
<style type="text/css">
body {
    font-family:Verdana, Helvetica, Arial, sans-serif;
    font-size:13px;
    min-width:1000px;
    line-height:125%;
    background-color:#ecebeb;
    padding:0;
    margin:0;
}
h3, p {
    font-family:Helvetica, "Trebuchet MS", Arial, sans-serif;
    font-size:13px;
    line-height:125%;
}
h3 {
    font-weight:bold;
    color:black;
}
img {
    border-style:none;
}
#wrapper {
    width: 1000px;
    margin-left:auto;
    margin-right: auto;
    background-color: #ecebeb;
    padding: 0;
}
#header {
    width:1000px;
    height:300px;
    background:url(images/header.jpg) repeat;
    margin:0;
    padding:0;
}
#logo {
    float:left;
    width:400px;
    height:135px;
    padding:0;
    margin:0;
}
/*navigation style*/
  
#navigation ul {
    float:left;
    width:960px;
    height:45px;
    margin-left:20px;
    padding:0;
}
#navigation li {
    position: relative;
    float: left;
    width: 192px;
    height: 45px;
    list-style: none;
}
#navigation li ul {
    position: absolute;
    top: 45px;
    left: 0;
    margin-left: -9999px;
    width: auto;
    height: auto;
 background-color:;
}
#navigation li:hover ul {
    margin-left: 0;
}
#navigation li ul li {
    position: relative;
    float: none;
}
#navigation li a {
    display: block;
    height: 45px;
    background: #ffffff none no-repeat center;
    text-align: center;
    line-height: 45px;
    text-decoration: none;
    color: #000;
}
#navigation li.button1 a {
    background-image:url(images/home.gif);
}
#navigation li.button1 a:hover {
    background-image:url(images/home_hover.gif);
}
#navigation li.button2 a {
    background-image:url(images/about.gif);
}
#navigation li.button2 a:hover {
    background-image:url(images/about_hover.gif);
}
#navigation li.button2a a {
    background-image:url(images/overview.gif);
}
#navigation li.button2a a:hover {
    background-image:url(images/overview_hover.gif);
}
#navigation li.button3 a {
    background-image:url(images/product.gif);
}
#navigation li.button3 a:hover {
    background-image:url(images/product_hover.gif);
}
#navigation li.button3a a {
    background-image:url(images/iptv.gif);
}
#navigation li.button3a a:hover {
    background-image:url(images/iptv_hover.gif);
}
#navigation li.button3b a {
    background-image:url(images/dvb.gif);
}
#navigation li.button3b a:hover {
    background-image:url(images/dvb_hover.gif);
}
#navigation li.button3c a {
    background-image:url(images/sdk.gif);
}
#navigation li.button3c a:hover {
    background-image:url(images/sdk_hover.gif);
}
#navigation li.button3d a {
    background-image:url(images/mpx.gif);
}
#navigation li.button3d a:hover {
    background-image:url(images/mpx_hover.gif);
}
#navigation li.button4 a {
    background-image:url(images/service.gif);
}
#navigation li.button4 a:hover {
    background-image:url(images/service_hover.gif);
}
#navigation li.button5 a {
    background-image:url(images/contact.gif);
}
#navigation li.button5 a:hover {
    background-image:url(images/contact_hover.gif);
}
#featurecontent {
    float:left;
    margin-top:-15px;
    margin-left:20px;
    width:960px;
    height:250px;
}
#contentwrapper {
[B] clear:both;[/B]
  [B]  width:960px;[/B]
    background:#e9e9e9;
    border:2px solid #d5d5d5;
    padding-bottom:30px;
    -moz-border-radius:8px;
    -webkit-border-radius:8px;
    -opera-border-radius:8px;
    -khtml-border-radius:8px;
    border-radius:8px;
  [B]  overflow:hidden;[/B]
}
#maincontent {
    float:left;
    margin-top:10px;
    margin-left:15px;
    width:550px;
    text-align: justify;
    clear:left;
}
#sidecontenttop {
    float:right;
    width:320px;
    margin-right:25px;
}
#sidecontenttext1 {
    width:320px;
    background:#ffffff;
    margin-top:-20px;
    padding-bottom:30px;
    text-align: justify;
}
.nudged1 {
    margin:10px 20px 10px 20px;
}
#sidecontentdown {
    float:right;
    width:320px;
    margin-top:25px;
    margin-right:25px;
    clear:right;
}
#sidecontenttext2 {
    width:320px;
    background:#ffffff;
    margin-top:-20px;
    padding-bottom:30px;
    text-align: justify;
}
#footer {
    width:1000px;
    height:50px;
    background:#ffffff;
    margin:0;
    padding-bottom:20px;
    clear:both;
}
</style>
</head>
<body>
<div id="wrapper">
    <div id="header">
        <div id="logo"> <a href="index.html"><img src="images/logo.gif" width="400" height="135" alt="logo" /></a> </div>
        <div id="navigation">
            <ul>
                <li class="button1"><a href="index.html"></a></li>
                <li class="button2"><a href="about.html"></a>
                    <ul>
                        <li class="button2a"><a href="overview.html"></a></li>
                    </ul>
                </li>
                <li class="button3"><a href="product.html"></a>
                    <ul>
                        <li class="button3a"><a href="iptv.html"></a></li>
                        <li class="button3b"><a href="dvb.html"></a></li>
                        <li class="button3c"><a href="sdk.html"></a></li>
                        <li class="button3d"><a href="mpx.html"></a></li>
                    </ul>
                </li>
                <li class="button4"><a href="service.html"></a></li>
                <li class="button5"><a href="contact.html"></a></li>
            </ul>
        </div>
        <!--end of nav div-->
        <div id="featurecontent"> <img src="images/slideshow.gif" width="960" height="300" /> </div>
        <!--end of featurecontent div-->
    </div>
    <!--end of header div-->
  [B]  <div id="contentwrapper">[/B]
        <div id="maincontent">
            <h3>Welcome</h3>
            <p>Sample Text.Sample Text.Sample Text.Sample Text.Sample Text.Sample Text.Sample Text.Sample Text.
                Sample Text.Sample Text.Sample Text.Sample Text.Sample Text.Sample Text.Sample Text.Sample Text.
                Sample Text.Sample Text.Sample Text.Sample Text.Sample Text.Sample Text.Sample Text.Sample Text.
                Sample Text.Sample Text.Sample Text.Sample Text.Sample Text.Sample Text.Sample Text.Sample Text.</p>
            <p>Sample Text.Sample Text.Sample Text.Sample Text.Sample Text.Sample Text.Sample Text.Sample Text.
                Sample Text.Sample Text.Sample Text.Sample Text.Sample Text.Sample Text.Sample Text.Sample Text.
                Sample Text.Sample Text.Sample Text.Sample Text.Sample Text.Sample Text.Sample Text.Sample Text.
                Sample Text.Sample Text.Sample Text.Sample Text.Sample Text.Sample Text.Sample Text.Sample Text.</p>
            <p>Sample Text.Sample Text.Sample Text.Sample Text.Sample Text.Sample Text.Sample Text.Sample Text.
                Sample Text.Sample Text.Sample Text.Sample Text.Sample Text.Sample Text.Sample Text.Sample Text.
                Sample Text.Sample Text.Sample Text.Sample Text.Sample Text.Sample Text.Sample Text.Sample Text.
                Sample Text.Sample Text.Sample Text.Sample Text.Sample Text.Sample Text.Sample Text.Sample Text.</p>
            <p>Sample Text.Sample Text.Sample Text.Sample Text.Sample Text.Sample Text.Sample Text.Sample Text.
                Sample Text.Sample Text.Sample Text.Sample Text.Sample Text.Sample Text.Sample Text.Sample Text.
                Sample Text.Sample Text.Sample Text.Sample Text.Sample Text.Sample Text.Sample Text.Sample Text.
                Sample Text.Sample Text.Sample Text.Sample Text.Sample Text.Sample Text.Sample Text.Sample Text.</p>
            <p>Sample Text.Sample Text.Sample Text.Sample Text.Sample Text.Sample Text.Sample Text.Sample Text.
                Sample Text.Sample Text.Sample Text.Sample Text.Sample Text.Sample Text.Sample Text.Sample Text.
                Sample Text.Sample Text.Sample Text.Sample Text.Sample Text.Sample Text.Sample Text.Sample Text.
                Sample Text.Sample Text.Sample Text.Sample Text.Sample Text.Sample Text.Sample Text.Sample Text.</p>
            p>Sample Text.Sample Text.Sample Text.Sample Text.Sample Text.Sample Text.Sample Text.Sample Text.
            Sample Text.Sample Text.Sample Text.Sample Text.Sample Text.Sample Text.Sample Text.Sample Text.
            Sample Text.Sample Text.Sample Text.Sample Text.Sample Text.Sample Text.Sample Text.Sample Text.
            Sample Text.Sample Text.Sample Text.Sample Text.Sample Text.Sample Text.Sample Text.Sample Text.
            </p>
            <p>Sample Text.Sample Text.Sample Text.Sample Text.Sample Text.Sample Text.Sample Text.Sample Text.
                Sample Text.Sample Text.Sample Text.Sample Text.Sample Text.Sample Text.Sample Text.Sample Text.
                Sample Text.Sample Text.Sample Text.Sample Text.Sample Text.Sample Text.Sample Text.Sample Text.
                Sample Text.Sample Text.Sample Text.Sample Text.Sample Text.Sample Text.Sample Text.Sample Text.</p>
            <p>Sample Text.Sample Text.Sample Text.Sample Text.Sample Text.Sample Text.Sample Text.Sample Text.
                Sample Text.Sample Text.Sample Text.Sample Text.Sample Text.Sample Text.Sample Text.Sample Text.
                Sample Text.Sample Text.Sample Text.Sample Text.Sample Text.Sample Text.Sample Text.Sample Text.
                Sample Text.Sample Text.Sample Text.Sample Text.Sample Text.Sample Text.Sample Text.Sample Text.</p>
            <p>Sample Text.Sample Text.Sample Text.Sample Text.Sample Text.Sample Text.Sample Text.Sample Text.
                Sample Text.Sample Text.Sample Text.Sample Text.Sample Text.Sample Text.Sample Text.Sample Text.
                Sample Text.Sample Text.Sample Text.Sample Text.Sample Text.Sample Text.Sample Text.Sample Text.
                Sample Text.Sample Text.Sample Text.Sample Text.Sample Text.Sample Text.Sample Text.Sample Text.</p>
            <p>Sample Text.Sample Text.Sample Text.Sample Text.Sample Text.Sample Text.Sample Text.Sample Text.
                Sample Text.Sample Text.Sample Text.Sample Text.Sample Text.Sample Text.Sample Text.Sample Text.
                Sample Text.Sample Text.Sample Text.Sample Text.Sample Text.Sample Text.Sample Text.Sample Text.
                Sample Text.Sample Text.Sample Text.Sample Text.Sample Text.Sample Text.Sample Text.Sample Text.</p>
            p>Sample Text.Sample Text.Sample Text.Sample Text.Sample Text.Sample Text.Sample Text.Sample Text.
            Sample Text.Sample Text.Sample Text.Sample Text.Sample Text.Sample Text.Sample Text.Sample Text.
            Sample Text.Sample Text.Sample Text.Sample Text.Sample Text.Sample Text.Sample Text.Sample Text.
            Sample Text.Sample Text.Sample Text.Sample Text.Sample Text.Sample Text.Sample Text.Sample Text.
            </p>
            <p>Sample Text.Sample Text.Sample Text.Sample Text.Sample Text.Sample Text.Sample Text.Sample Text.
                Sample Text.Sample Text.Sample Text.Sample Text.Sample Text.Sample Text.Sample Text.Sample Text.
                Sample Text.Sample Text.Sample Text.Sample Text.Sample Text.Sample Text.Sample Text.Sample Text.
                Sample Text.Sample Text.Sample Text.Sample Text.Sample Text.Sample Text.Sample Text.Sample Text.</p>
            <p>Sample Text.Sample Text.Sample Text.Sample Text.Sample Text.Sample Text.Sample Text.Sample Text.
                Sample Text.Sample Text.Sample Text.Sample Text.Sample Text.Sample Text.Sample Text.Sample Text.
                Sample Text.Sample Text.Sample Text.Sample Text.Sample Text.Sample Text.Sample Text.Sample Text.
                Sample Text.Sample Text.Sample Text.Sample Text.Sample Text.Sample Text.Sample Text.Sample Text.</p>
            <p>Sample Text.Sample Text.Sample Text.Sample Text.Sample Text.Sample Text.Sample Text.Sample Text.
                Sample Text.Sample Text.Sample Text.Sample Text.Sample Text.Sample Text.Sample Text.Sample Text.
                Sample Text.Sample Text.Sample Text.Sample Text.Sample Text.Sample Text.Sample Text.Sample Text.
                Sample Text.Sample Text.Sample Text.Sample Text.Sample Text.Sample Text.Sample Text.Sample Text.</p>
            <p>Sample Text.Sample Text.Sample Text.Sample Text.Sample Text.Sample Text.Sample Text.Sample Text.
                Sample Text.Sample Text.Sample Text.Sample Text.Sample Text.Sample Text.Sample Text.Sample Text.
                Sample Text.Sample Text.Sample Text.Sample Text.Sample Text.Sample Text.Sample Text.Sample Text.
                Sample Text.Sample Text.Sample Text.Sample Text.Sample Text.Sample Text.Sample Text.Sample Text.</p>
        </div>
        <!--end of maincontent div-->
        <div id="sidecontenttop"> <img src="images/events.gif" width="320" height="116" alt="Events" />
            <div id="sidecontenttext1">
                <p class="nudged1">Sample Text.Sample Text.Sample Text.Sample Text.Sample Text.Sample Text.Sample Text.Sample Text.</p>
                <p class="nudged1">Sample Text.Sample Text.Sample Text.Sample Text.Sample Text.Sample Text.Sample Text.Sample Text.</p>
                <p class="nudged1">Sample Text.Sample Text.Sample Text.Sample Text.Sample Text.Sample Text.Sample Text.Sample Text.</p>
                <p class="nudged1">Sample Text.Sample Text.Sample Text.Sample Text.Sample Text.Sample Text.Sample Text.Sample Text.</p>
                <p class="nudged1">Sample Text.Sample Text.Sample Text.Sample Text.Sample Text.Sample Text.Sample Text.Sample Text.</p>
            </div>
            <!--end of sidecontenttext1-->
        </div>
        <!--end of sidecontenttop div-->
        <div id="sidecontentdown"> <img src="images/news.gif" width="320" height="100" alt="News" />
            <div id="sidecontenttext2">
                <p class="nudged1">12/10/2010 - 12:48</p>
                <p class="nudged1">Sample Text.Sample Text.Sample Text.Sample Text.Sample Text.Sample Text.Sample Text.Sample Text.
                    Sample Text.Sample Text.Sample Text.Sample Text.Sample Text.Sample Text.Sample Text.Sample Text.
                    Sample Text.Sample Text.Sample Text.Sample Text.Sample Text.Sample Text.Sample Text.Sample Text.
                    Sample Text.Sample Text.Sample Text.Sample Text.Sample Text.Sample Text.Sample Text.Sample Text.</p>
                <p class="nudged1"> Sample Text.Sample Text.Sample Text.Sample Text.Sample Text.Sample Text.Sample Text.Sample Text.</p>
            </div>
            <!--end of sidecontenttext2-->
        </div>
        <!--end of sidecontentdown div-->
    </div>
    <!--end of content wrapper-->
    <div id="footer">
        <p><img src="images/logo_footer.gif" width="150" height="50" alt="logo"/> Copyright 2010. All Rights Reserved.</p>
    </div>
    <!--end of footer div-->
</div>
<!--end of wrapper div-->
</body>
</html>


It’s hard to see what other issues there are without seeing the images in places etc.

Hi Paul O’B,

Thanks a lot for your efforts to help me.

Your correction did help me to make the footer come below the contentwrapper, thanks for that.

Still the whole page looks messy, especially contentwrapper hiding behind the featurecontent area. Let me try to fix by my own, since I don’t have hosting account to upload my site :frowning:

Thank you very much for your help.

Sam

Ok but here’s another clue.


#featurecontent {
    float:left;
    margin-top:-15px;
    margin-left:20px;
    width:960px;
   [B] height:250px;[/B]
}



        <div id="featurecontent"> <img src="images/slideshow.gif" width="960" [B]height="300" [/B]/> </div>


Do you notice the discrepancy?

Browsers can only do what you tell them. If you tell them nonsense you get nonsense :slight_smile:

Hi Paul O’B,

Thanks a lot for the tip. It fixed the most of the issues.

I’ll try to avoid being such a nonsense, though its bit difficult for me :slight_smile:

Thank you very much.

Sam

Sorry, that comment wasn’t really aimed at you but just a general “saying”.:slight_smile:

Glad it helped though.

Sorry, that comment wasn’t really aimed at you but just a general “saying”.

Hey its okey. It didn’t hurts me, I took it in a lighter way :slight_smile:

Thanks again.

Cheers,
Sam