CSS Puzzle: I have the answer, just don't know the question!

**pops** · 06-10-2009 05:53 PM

Take a look at this page in FireFox:

Note the position of both sidebars is affected by the top margin of the MainContent div. Even though they are outside of mainContent!

Code:

<body class="thrColFix">
<div id="container">
  <div id="sidebar1"></div>
  <div id="sidebar2"></div>
  <div id="mainContent"></div>
</div>
</body>
</html>

The solution is on this page. By placing a clearing element at the top of container, things work as they should.

Code:

<body class="thrColFix">
<div id="container">
  <br class="clearfloat" />
  <div id="sidebar1"></div>
  <div id="sidebar2"></div>
  <div id="mainContent"></div>
</div>
</body>
</html>

One last bit of weirdness, putting a border around container will fix the problem without using the clearing element.

The CSS for both is

Code:

@charset "UTF-8";
body  {
    background: #2F2C2D;
    margin: 0;
    padding: 0;
    text-align: center;
}
.thrColFix #container {
    width: 960px;
    margin: 0px auto;
    Position: relative;
} 
.thrColFix #sidebar1 {
    left: 0px;
    top: 25px;
    position: absolute;
    height: 330px;
    width: 330px;
    background: #CCC;
}
.thrColFix #sidebar2 {
    float: right;
    width: 180px;
    margin-top: 260px;
    height: 300px;
    background: #999;
}
.thrColFix #mainContent {
    margin: 90px 180px 0px 275px;
    background: #FFF;
    position: relative;
    height: 600px;
}
.clearfloat { 
    clear:both;
    height:0;
    font-size: 1px;
    line-height: 0px;
}

Am I missing something here or is this just your regular everyday CSS insanity.

**chovy** · 06-11-2009 09:55 AM

sounds like a compounding margin.

**pops** · 06-11-2009 12:23 PM

Originally Posted by chovy

sounds like a compounding margin.

Do you have a link to any more information on that?

**chovy** · 06-11-2009 01:19 PM

certain tags compound margins with their parents or siblings.

An example would be two paragraphs in a row, the compounding is necessary so the first paragraph doesn't have less margin than the following paragraph.

<p id="first">...</p>
<p id="second">...</p>

If you took the top margin off both of them, you would still see a margin inbetween first and second, because bottom margin of the first paragraph would still prevail...

A better example is to say that the top margin of a paragraph compounds with the bottom margin of its previous sibling paragraph.

**pops** · 06-12-2009 06:55 PM

sounds like your talking about something similar to what I've seen referred to as margin collapse. None of the examples I've seen fits my situation but the border is one solution and it worked here so maybe…

Thread: CSS Puzzle: I have the answer, just don't know the question!

Thread Tools

Display

CSS Puzzle: I have the answer, just don't know the question!

Bookmarks

Bookmarks

Posting Permissions