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>
Sparky
  • 98,165
  • 25
  • 199
  • 285
Chris22
  • 1,973
  • 8
  • 37
  • 55
  • Could you maybe create a simple demo @ http://jsfiddle.net/ ? It would help a lot to better understand what exactly you want to achieve. – r0skar Oct 03 '11 at 13:21
  • How much spacing is left? Some browsers add a border to the body tag. – krs1 Oct 03 '11 at 13:22
  • Andrej, I don't know how to use jsfiddle.net. I added the HTML. – Chris22 Oct 03 '11 at 14:11
  • You're question is very broad covering too many little issues at once. Using jsFiddle is pretty simple. I cut & pasted your code into one here... simply review it to learn how it's done. [http://jsfiddle.net/tjfJF/](http://jsfiddle.net/tjfJF/). – Sparky Oct 03 '11 at 14:57

4 Answers4

1

Try importing Meyer's reset stylesheet: http://meyerweb.com/eric/tools/css/reset/

Michiel
  • 956
  • 2
  • 7
  • 19
1

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/

InanisAtheos
  • 603
  • 1
  • 7
  • 18
  • Thanks, Patrik, I just added the HTML. I can't use a reset as there is already a reset stylesheet on the site. I will check out your code. I think I found an answer in dreamweaver templates for 2-column fixed layout. – Chris22 Oct 03 '11 at 14:14
  • I totally disagree with _"You should always use a reset CSS when you start a new site"_. It's unnecessary and redundant. _Unnecessary_ to reset elements you're not using and _redundant_ to reset elements when you would simply overwrite the reset later. Why would you need this if you know how to write proper CSS on all the elements you've used? – Sparky Oct 03 '11 at 14:49
  • 1
    @Sparky672 It's not about "writing proper CSS", as all browsers render sites differently by their default. I can agree that there's no need to reset the "dt" tag for instance, if you don't use it. However, you never know if you will be using it later on. Personally, I can find uses for almost all non-deprecated tags. But, that's just me I guess. Another thing to keep in mind: You don't know what the next-gen browser will have as default, so simply "coding it enough" might not be enough, eventually. I hope this clarifies my standpoint on the matter :) – InanisAtheos Oct 03 '11 at 17:56
  • CSS doing what you want **while also** resetting the browser's default is what I consider proper: `#myDiv p {margin:0 0 10px 2px; padding:0 5px; /* etc. etc. */ }` is over-riding the browser's default and a _master_ reset is **not** needed. I'm not anti-reset... I'm anti-redundancy. – Sparky Oct 03 '11 at 18:17
  • @Sparky672, Yes you could do it like that, but I'm used to dealing with sites that have thousands upon thousands of lines of CSS code, ll shorthand. So, keeping track of where and how the browser's rules were reset, is impossible. I'm sure we can discuss this in a forum somewhere, not in the comments section of a Question :) – InanisAtheos Oct 04 '11 at 06:44
0

try adding float:left and overflow:hidden to your #mainContainer

huMpty duMpty
  • 14,346
  • 14
  • 60
  • 99
0

you need to set the html and body css margin and padding properties to 0.

use the following in your css file

html, body {
margin: 0;
padding: 0;
}
Michael
  • 4,282
  • 9
  • 55
  • 89
  • Mike, body element is set already. writing a rule for the html element will be overwritten by reset file. – Chris22 Oct 03 '11 at 14:58
  • well of course it would. if however you didn't have the need for the entire css reset file or if you wanted to know which elements were affected directly then my solution is for you. – Michael Oct 03 '11 at 15:23