Home/ Questions/Q 7718341
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-01T03:08:42+00:00

How can I remove the unwanted whitespace in following example? Note 1. that there

  • 0

How can I remove the unwanted whitespace in following example?

Note 1. that there should not be any red color, because #red is parent of two other #green and #blue.

Note 3. both #green and #blue have unknown height.

Note 2. #blue have an extera “top: -10px” css property, so it comes 10px up, but the parent element(#red) will not resize verticaly to fit new positions

<html>
<head>
<style>
    #red{width: 500px;background: red;height: auto;}
    #green{width: 500px;background: green;position: relative;float: left;}
    #blue{width: 500px;background: blue;top:-7px;position: relative;float: left;}
    .clear{clear: both;}
</style>
</head>
<body>
    <div id="red">
        <div id="green">Green<br>Green<br>Green<br>Green<br>Green</div>
        <div id="blue">Blue<br>Blue<br>Blue<br>Blue<br>Blue</div>
        <div class="clear"></div>
    </div>
</body>
</html>
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    I don’t understand why you are floating things which are the same width as the parent. Also, using position: relative here is not at all necessary. Here’s a much simpler way to achieve exactly what you are talking about:

    <div id="red">
    <div id="green">
        Green<br>Green<br>Green<br>Green<br>Green
    </div>
    <div id="blue">
        Blue<br>Blue<br>Blue<br>Blue<br>Blue
    </div>
</div>​

    #red{
    width: 500px;
    background: red;
    height: auto;
}
#green{
    background: green;
}
#blue{
    background: blue;
    margin-top: -7px;
    /* Necessary so the text in #green doesn't appear over the blue background */
    position: relative;
    z-index: 100;
}

    View the jsFiddle.

    • 0