sdaau sdaau - 6 months ago 12
HTML Question

Stacking divs side by side to the right of a container (with another div anchored left)

This is what I want to achieve (montaged pic):

rightfloat-2.png

The red outline is the container, with size calculated relative to the page/browser window. Then, I'd want two divs (green dashed), with width 15% of the container (and height 100% of it), to stick to the right of the container, taking as much space as they need - and finally, I'd like a left aligned div (blue dashed) with height 100% of container, to take up the rest of the remaining width.

Unfortunately, the closest I got to is this:

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>test-rightfloat</title>
<style type="text/css">
body {
width: 100%;
}
.cntr {
width: 60vh; height: 15vh;
border: 2px solid red;
}
.lb {
width: 70%; height: 100%;
border: 2px dashed blue;
display: inline-block;
}
.gr {
width: 15%; height: 100%;
border: 2px dashed green;
float: right;/**/
text-align: center;
vertical-align: middle;
line-height: 5em;
display: inline-block;
margin: 0; padding: 0;
/*margin-right:0;
margin-left:auto;*/
/*position: absolute; right: 0; left: auto;*/
}
</style>
</head>

<body>
<div id="contain" class="cntr">
<div id="leftblue" class="lb"></div>
<div id="greenright1" class="gr">A</div>
<div id="greenright1" class="gr">B</div>
</div>

</body>
</html>


... which produces this (Firefox 43):

rightfloat-1.png

... which is not what I had in mind: the right divs try both to stick to the right edge of the container, and so they do not stand side-by-side, but on top of each-other instead...

Is there anything I could do to get the desired design (preferably in pre-CSS5, and without changing the HTML structure - and no JS)?

Answer

Your problem is due to the border. When adding a border you should consider adding twice the border width to your actual position or delete the borders

<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title>test-rightfloat</title>
    <style type="text/css">
body {
  width: 100%;
}
.cntr {
  width: 60vh; height: 15vh;
  border: 2px solid red;
}
.lb {
  width: 70%; height: 100%;
  /*border: 2px dashed blue;*/   <--- NO BORDER
  display: inline-block;
}
.gr {
  width: 15%; height: 100%;
  /*border: 2px dashed green;*/  <--- NO BORDER
  float: right;/**/
  text-align: center;
  vertical-align: middle;
  line-height: 5em;
  display: inline-block;
  margin: 0; padding: 0;
  /*margin-right:0;
  margin-left:auto;*/
  /*position: absolute; right: 0; left: auto;*/
}
    </style>
  </head>

  <body>
<div id="contain" class="cntr">
  <div id="leftblue" class="lb"></div>
  <div id="greenright1" class="gr">A</div>
  <div id="greenright1" class="gr">B</div>
</div>

  </body>
</html>