Home/ Questions/Q 6638073
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-25T23:23:29+00:00

I have a two-column layout. I have a #mainContainer div that contains all of

  • 0

I have a two-column layout. I have a #mainContainer div that contains all of the following (except the #footer):

  1. Across the top: a header div (#intro)(contains a small gradient image),
    and a #hero div (contains images)
  2. To contain the two columns: a #content div
  3. Within the #content div on the left: a #mainContent div
  4. Within the #content div on the right: a #sideBar div
  5. Across the bottom (outside the #mainContainer div): a #footer div on the bottom
    (including a gradient image like the header div)

Simple, right? But I’m having trouble getting the #mainContainer div to be at the top of the browser (no spaces or that 6-8px default margin/padding all browsers have at the top) and getting the #footer div to span across the entire bottom of the browser window (not inside any of the Div’s ). (disregard inline styles in footer). Could someone help me out?

UPDATED: ADDED HTML

body {
font-family:Arial, Helvetica, sans-serif;
margin:0;
padding:0;
background:#bbb;
text-align:center;
}



#mainContainer {
width:980px;
margin: 0 auto;
background: #fff url(../i/content-box-header-gray.jpg) repeat-x;
text-align:left;
/*height: 700px;*/

}

#intro {
/*top:0;*/
margin: 0;
text-align:left;

}


#hero {
width:960px;
padding-left:10px;
padding-right:10px

}



#content {
width:960px;
padding-left:10px;
padding-right:10px;
}

#mainContent_left {

float:left;
width:640px;
margin:0;
padding-right: 20px;
background:#ccc;
}



#sideBar {
float:left;
width:300px;
margin:0;
/*padding-right: 20px;*/
background:#ffd;
}


#footer {
width:960px;
clear:both;
background:#cc9;
}

HTML:

<title>Descriptions </title>


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

<body>
<div id="mainContainer">

<div id="intro"><h2>introducing</h2></div>

<div id="Hero">
    <ul>
        <li class="name"></li>
        <li class="textJoin">is a member of </li>
        <li class="name"></li>
    </ul>
</div>

<div id="content">
    <div id="mainContent">

        <h3>First Topic title</h3>
        <p>floated left image and text</p>
        <p>Some content</p>
        <p>Some content</p>

        <h3>Second Topic title</h3>
        <p>Some content</p>        
        <p>Image here</p>

        <h3>Third Topic title</h3>
        <p>(floated left image here) Some text</p>

        <h3>Fourth Topic title</h3>
        <p>(floated left image here) Some text</p>>

        <h3>Fifth Topic title</h3>
        <p>(floated left image here) Some text</p>        
        <p>Image here</p>

        <p>(link to FAQ page)</p>

    </div>


    <div id="sideBar">sidebar content
        <p>&nbsp;</p>
        <p>&nbsp;</p>
        <p>&nbsp;</p>
        <p>&nbsp;</p>
    </div>


    <div id="footer_warranty">footer content
        <div id="wf_logos" style="float:left; padding:0 10px 0 0;"><p>contact info</p>
</div>
        <div id="wf_footerCopy" style="float:left; padding:0 10px 0 0;">
<p>some text</p></div>
        <p style="clear:both;" />
    </div>
</div>
<p style="clear:both;" />
</div>

</body>
</html>
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    I am unable to reproduce your problem. However, I have created a fiddle for you, where I have also added some CSS reset rules which should take care of a problem such as this, cross any and all browsers.

    You should always use a reset CSS when you start a new site. That way, it’s all on your terms and you don’t have to “code away” specific browser behaviour.

    I have also created some placeholder code since you did not provide any.

    I hope the reset fixes your problem.

    http://jsfiddle.net/dekket/eERsK/

    Edit:

    Check this new fiddle. Out to work.
    http://jsfiddle.net/dekket/6bTkZ/

    • 0