SitePoint Sponsor

User Tag List

Results 1 to 4 of 4

Thread: Margin Problems

  1. #1
    SitePoint Member
    Join Date
    Mar 2010
    Posts
    5
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Margin Problems

    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:
    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. #2
    Ripe Tomatos silver trophybronze trophy Rayzur's Avatar
    Join Date
    Jun 2007
    Location
    Texas
    Posts
    4,174
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    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!

    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&#37; 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

    Code HTML4Strict:
    <!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. #3
    SitePoint Member
    Join Date
    Mar 2010
    Posts
    5
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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. #4
    SitePoint Guru Luki_be's Avatar
    Join Date
    Jun 2008
    Location
    Brazil, Minas Gerais. But i'm from Belgium.
    Posts
    867
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by LKani View Post
    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?
    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.
    SitePoint Guru
    Sitepoint - the ultimate Css well
    As a computer, I find your faith in technology amusing.
    Sitepoint reference, your friend in need


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •