CODEWITHSUNDEEP
htmlcss
Philip Stratford
Philip Stratford

Reputation: 4753

Prevent DIV height impacting position of DIVs below

Please consider the problem posed by the following code:

<div id='container'>
    <div id='topLeft' style='background-color:red;float:left'>Top Left</div>
    <div id='topRight' style='background-color:green;float:left;font-size:x-large'>Top Right</div>
    <div id='clearDiv' style='clear:both;'></div>
    <div id='bottom' style='background-color: yellow;'>Bottom</div>
</div>

In a fiddle I've created, this produces the following result: enter image description here

The problem with this, as far as the page I'm working on is concerned, is that space above the yellow div labelled bottom, caused by the additional height of the green div (Top Right). I want the yellow div to be right up against the bottom of the red div (Top Left), regardless of the height of the green div.

Now, this is easily enough fixed by using positioning, as follows (fiddle here):

<div id='container' style='position:relative'>
    <div id='topLeft' style='background-color:red;float:left;width:100px'>Top Left</div>
    <div id='topRight' style='background-color:green;float:left;font-size:x-large;position:absolute;left:100px;z-index:-1'>Top Right</div>
    <div id='clearDiv' style='clear:both;'></div>
    <div id='bottom' style='background-color: yellow;'>Bottom</div>
</div>

Which produces the following result: enter image description here

That's exactly what I want. Unfortunately, because the green Top Right div is now positioned absolutely, I now have to specify its left position to ensure that it still appears to the right of the red (Top Left) div.

In the application I'm writing, I'm having to expend a lot of effort to continually position the equivalent of this green div to the right of the red div, when no effort would be required at all if it didn't have the position:absolute attribute. Without that, it'd just naturally appear after the red div, as it did in the result of the first code sample.

So my question is: Is there a way to achieve the same result as I have with my solution - that is, the top of the yellow div being up against the bottom of the red div - without adding position:absolute to the green div?

Update following Ned Rockson's answer, I should add that explicitly setting the height of any of these divs or a wrapper div isn't possible either.

Upvotes: 0

Views: 816

Answers (3)

pleasedesktop
pleasedesktop

Reputation: 1525

#container {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
#topLeft {
  background-color: red;
}
#wrapper {
  position: relative;  
}
#topRight {
  background-color: green;
  font-size: x-large;
  position: absolute;
  left: 100%;
  top: 0;
  width: 5em; /* THIS IS  THE ONLY "MANUAL" SETTING */
}
#bottom {
  background-color: yellow;
  width: 100%;
}
<div id='container'>
  <div id='wrapper'>
    <div id='topLeft'>
      Top Left
    </div>
    <div id='topRight'>
      Top Right
    </div>
  </div>
  <div id='bottom'>
    Bottom
  </div>
</div>

This solution requires you to "manually" set the width of the topRight element, but heights are automatically handled by the CSS.

Upvotes: 1

Johannes
Johannes

Reputation: 67798

If you want the upper two DIVs bottom-aligned despite their different height, you can assign them this instead of floats:

#topLeft, #topRight {
  display: inline-block;
  vertical-align: bottom;
  }

Here is the complete code:

#topLeft, #topRight {
  display: inline-block;
  vertical-align: bottom;
  }
<div id='container'>
    <div id='topLeft' style='background-color:red;'>Top Left
    </div><div id='topRight' style='background-color:green;font-size:x-large'>Top Right</div>
    <div id='clearDiv'></div>
    <div id='bottom' style='background-color: yellow;'>Bottom</div>
</div>

Note that I moved the closing </div> of the .topLeft element into the next line to avoid any spaces and linebreaks in the code.

Alternative solution using flex:

If you need topLeft and topRight to have the same height, you can wrap them in a parent container and assign display: flex to this container:

#wrapTop {
  display: flex;
  }
 <div id='container'>
   <div id="wrapTop">
        <div id='topLeft' style='background-color:red;'>Top Left</div>
        <div id='topRight' style='background-color:green;font-size:x-large'>Top Right</div>
    </div>        <div id='clearDiv'></div>
        <div id='bottom' style='background-color: yellow;'>Bottom</div>
    </div>

Upvotes: 1

Ned Rockson
Ned Rockson

Reputation: 1175

You can wrap the top left and top right divs in a div with height set and overflow set to hidden. It's not a very elegant approach because the outer div's height is set, but it works for this particular problem.

<html>
  <body>
      <div id='container' style='position:relative'>
          <div style='overflow:hidden; height:18px'>
              <div id='topLeft' style='background-color:red;float:left;width:100px'>Top Left</div>
              <div id='topRight' style='background-color:green;float:left;font-size:x-large'>Top Right</div>
          </div>
          <div id='clearDiv' style='clear:both;'></div>
          <div id='bottom' style='background-color: yellow;'>Bottom</div>
      </div>
  </body>
</html>

Upvotes: 1

Related Questions