Margin Problems

HTML & CSS
1

I’m new to web-design and I’ve been trying to practice by making a mock-up coffee website design. So far I’m only trying to get the layout set up so that it’ll be much easier to put the pictures and information in later (hopefully).

I’ve run into, what I think are margin problems.
When I make the browser window bigger, the (2 and 3) sections of the layout don’t stay consistent, but if I make it smaller to the perfect dimensions, it fixes and looks like how I want it to. I don’t know what the problem would even be called, so my google attempts have been useless.

No matter what size the browser window.

Here’s the code:


<html>
<head> 
<style type="text/css">

body {
background-color: #
background-image: url('images/background.png');
background-repeat: no-repeat;
background-position:center;
}

div.container {
width: 100%;
margin:0px;
border: 1px solid red;
}


div.header {
width: 679px;
height: 241px;
margin: auto;
background-color: grey;
bbackground-image: url('images/images/beancafe_01.gif');
background-position: center;
background-repeat: no-repeat;
clear:left;

text-align: center;
}

div.footer {
width: 679px;
height: 52px;
margin: auto;
background-color: grey;
bbackground-image: url('images/images/beancafe_06.gif');
background-position: center;
background-repeat: no-repeat;
clear:left;

text-align: center;
}

div.two {
float:left;
width:340px;
height: 322px;
margin-left: 370;
background-color: pink;
bbackground-image: url('images/images/beancafe_02.gif');
background-attachment:fixed;
background-repeat: no-repeat;

text-align: center;
color: black;
}

div.three {
width:339px;
height: 322px;
margin-left: 710;
background-color: green;
bbackground-image: url('images/images/beancafe_03.gif');
background-attachment:fixed;
background-repeat: no-repeat;

text-align: center;
}

div.four {
width:679px;
height: 291px;
margin: auto;
background-color: orange;
bbackground-image: url('images/images/beancafe_04.gif');
background-position: center;
background-repeat: no-repeat;

text-align: center;
}
</style>
</head>

<body>
<div class = "header">1</div>
<div class = "two">2</div>
<div class = "three">3</div>
<div class = "four">4</div>
<div class = "footer">5</div>


</body> 
</html>

Thanks, much appreciated.

2

I’ve run into, what I think are margin problems.
When I make the browser window bigger, the (2 and 3) sections of the layout don’t stay consistent, but if I make it smaller to the perfect dimensions,
Hi LKani, Welcome to SitePoint! :slight_smile:

Let’s take the left margins off of your #2 & #3 divs and float them both left. I see you had a container div that was set to 100% width, let’s change that to 679px (the width of your header & footer) and center it with auto margins.

Now the floated #2 & #3 divs will be contained and centered with the rest of the page at all viewport widths. That will also allow you to keep from having to set widths and auto margins on the other divs.

I set your header and footer as ID’s since it is doubtful that you will use them more than once.

Give this a try :wink:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Test</title>

<style type="text/css">
body {
margin:0;
padding:0;
background:#FFF url('images/background.png') no-repeat center;
}
#container {
width:679px;
margin:0 auto;
overflow:hidden;/*contain inner floats*/
text-align: center;
}
#header {
height:241px;
background:#777;
}
.two {
float:left;
width:340px;
height:322px;
background:pink;
}
.three {
float:left;
width:339px;
height:322px;
background:green;
}
.four {
clear:both;/*clear floats above*/
height:291px;
background:orange;
}
#footer {
height:52px;
background:#777;
}
</style>

</head>
<body>
<div id="container">
    <div id="header">1</div>
    <div class="two">2</div>
    <div class="three">3</div>
    <div class="four">4</div>
    <div id="footer">5</div>
</div>

</body>
</html>
3

Wow. Thanks so much for fixing and explaining all the parts. It makes much more sense to do it that way.

What’s the difference between an id and a class though?

4

ID’s are unique:

  • Each element can have only one ID
  • Each page can have only one element with that ID

Classes are not unique:

  • You can use the same class on multiple elements.
  • You can use multiple classes on the same element.

you should only use ID’s once, but you can use classes over and over.