CSS Puzzle: I have the answer, just don't know the question! - Search Engine Optimization Forum

pops · #1 (**permalink**) 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 · #2 (**permalink**) 06-11-2009, 09:55 AM

sounds like a compounding margin.

pops · #3 (**permalink**) 06-11-2009, 12:23 PM

Quote:

Originally Posted by chovy

sounds like a compounding margin.

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

chovy · #4 (**permalink**) 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 · #5 (**permalink**) 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 Tools
Show Printable Version Email this Page
Display Modes
Linear Mode Switch to Hybrid Mode Switch to Threaded Mode