CSS problem

Get Started
1

Hi guys,

I’m new to the boards and looking for help to a simple problem. I seems like I have a padding on the left and right of my 2 grey Headers. One is labeled as #header1 and the other
#header2 in my CSS file. I can’t figure out while the 2 headers aren’t stretch to the length of the browser.

Below is my CSS file. I’ve attached the html as a text file if needed. I am looking forward to being a part of this community.

Thanks for the help!

#header1 {
    float:left;
	height:40px;
	min-width:100%;	
    background-color: #808080;
}

#header2 {
    float:left;
	height:150px;
	min-width:100%;	
    background-color: #666666;
}

body {
	background-image: url(linenbackground-repeat.jpg);
}


#container {
  margin: 0 auto;
  width: 900px;
  height: 1400px;
  text-align: left;
  background-color: #FFFFFF;
  }

footer {
	float:left;
	padding:70px 0;
	min-width:100%;
	background-color: #F4E97D;
}
2

Hi yamski. Welcome to the forums! :slight_smile:

The problem is that browsers apply some default styles to a page that you need to remove if you don’t want them. For example, browsers place a default margin around the <body> element to keep text away from the edges (which is your current issue). To get rid of that, you need to add

body {
  margin: 0;
}

Often, people start their style sheets with a browser “reset”, which gets rid of browser default settings. A basic one that I use is this:


html, body,
h1, h2, h3, h4, h5, h6, p, a, blockquote, pre, code, hr, img,
form, fieldset, legend, label, textarea, 
span, em, strong, sub, sup, cite,
table, tbody, td, tfoot, th, thead, tr, tt,
dl, dt, dd, ol, ul, li {
    margin: 0;
    padding: 0;
}

That can save you a lot of confusion.

By the way, be careful using elements like <header> and <footer>. These elements don’t actually exist yet in HTML! They are HTML5 elements, which are still on the drawing board, so browsers don’t recognize them yet. You have to use some CSS/JS workarounds to get them to function in current browsers*. You’d be better off replacing them with simple <divs>s for now. :slight_smile:

* It’s a bit like flying cars. They don’t exist yet, so if you want one, you have to hoist your car with a mobile crane and drive it like that, with cardboard wings that don’t work … which would be a pretty silly thing to do. For some reason, a lot of people are doing this with HTML5 at the moment. :shifty:

3

Ralph,

Thanks for the quick reply! I look forward to getting more involved with web design. I’ve been a print designer for a while, and this is all fairly new to me. Really excited!
I appreciate all the help!

4

Ralph.m is right on this. Some people just use a wildcard selector (*) and set the margin and padding to 0.

* {
  margin: 0;
  padding: 0;
}

One of the most common CSS resets is the Meyer reset, which comes close to covering all of the most popular browsers.

5

Well, you’ve come to a good place, because we love to answer questions here. I also remember being very excited when I first started to tinker with HTML and CSS, and I still love it. :slight_smile:

It’s generally recommended not to use that now, as it has some unintended consequences.

6

Using the * selector to reset certain properties is not a good practice because it is slower. That’s why Eric Meyer lists every single element one by one :wink:

The gurus do things in a certain way for good reasons :smiley: