SitePoint Sponsor

User Tag List

Results 1 to 3 of 3

Thread: CSS problem

  1. #1
    SitePoint Member
    Join Date
    Apr 2004
    Location
    Norway
    Posts
    9
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    CSS problem

    Hello!

    I'm trying to learn CSS, but are having some trouble with something
    that's probably very simple. Unfortunatley I can't figure it out!

    The code:
    Code:
    /* CSS */
    
    div#container {
       border: 1px solid #000000;
       padding: 10px;
       width: 326px;
    }
    
    div#container .box, div#container .lastbox {
       border: 1px solid #000000;
       width: 100px;
       float: left;
       margin-right: 10px;
       margin-bottom: 10px;
       background: #C0C0C0;
       height: 100px;
    }
    
    div#container .lastbox {
       margin-right: 0;
    }
    
    <!-- HTML -->
    
    <div id="container">
       <div class="box">1</div>
       <div class="box">2</div>
       <div class="lastbox">3</div>
       <div class="box">4</div>
       <div class="box">5</div>
       <div class="lastbox">6</div>
    </div>
    And how it's displayed:

    As you can see IE6 adds 10px to the bottom of #container, but I want
    it displayed as it does in Opera. I guess I could write classes for each
    box, but that's seems really unnessesary. Is there another, easier, way I
    could fix this?

    Thanx for any help!

  2. #2
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,352
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    Just change it around a little bi take the padding off the top and put the margin on the top instead.
    Code:
    div#container {
       border: 1px solid #000000;
       padding:0 10px 10px 10px ;
       width: 326px;
    }
    div#container .box, div#container .lastbox {
       border: 1px solid #000000;
       width: 100px;
       float: left;
       margin-right: 10px;
       margin-top: 10px;
       background: #C0C0C0;
       height: 100px;
    }
    div#container .lastbox {
       margin-right: 0;
    }
    You will also need to clear the floats for mozilla.
    Code:
    <div id="container">
       <div class="box">1</div>
       <div class="box">2</div>
       <div class="lastbox">3</div>
       <div class="box">4</div>
       <div class="box">5</div>
       <div class="lastbox">6</div>
    <div style="clear:both"></div>
    </div>
    Hope that helps.

    Paul

  3. #3
    SitePoint Member
    Join Date
    Apr 2004
    Location
    Norway
    Posts
    9
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    OMG! As I said, probably something simple...

    Thanks a lot, Paul! Man, the one who said CSS is easy was drunk! But,
    just browsing the CSS Zen Garden keeps me going! With practice I
    guess...

    Thanks again!


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
  •