Top menu without flex, without calc(...) for legacy support

Question

I'm trying to do a top menu with a 1px border. How to have the #mid div use the full middle width (so that the bottom-border goes close to #right) ?

I'm looking for a solution without flex, without width: calc(...), because it's not supported on some devices I did tests on (legacy support needed).

* { margin:0; padding: 0; }
.left { float:left; width: 155px; height: 60px; border-right: 1px solid #dedede; border-bottom: 1px solid #dedede; }
.mid { float:left; height: 60px; border-bottom: 1px solid #dedede; display:inline-block; }
.right { float: right; width: 40%; height: 60px; border-left: 1px solid #dedede; border-bottom: 1px solid #dedede; }

<div>
<div class="left">aa</div>
<div class="mid">aa</div>
<div class="right">bb</div>
</div>

G-Cyrillus · Accepted Answer · 2016-05-14T11:28:31.680

the display:table layout properties can help you to start with : (=>IE8)

table shrinks/expands to hold content. that's why .mid will use as much space avalaible squizing others table-cell elements being less than the 100% width set in CSS. Mind that If content is wider than the tabled container, it will grow over the 100% width.

* { margin:0; padding: 0;box-sizing:border-box; }
.tb {
  display:table;
  width:100%;
  border:solid 1px;
  }
.tb > div {
  display:table-cell;
  border:inherit ;
  }
.mid { width:100%; }

<div class="tb">
<div class="left">aa</div>
<div class="mid">aa</div>
<div class="right">bb</div>
</div>
<hr/>
<div class="tb">
<div class="left">longer</div>
<div class="mid">aa</div>
<div class="right">longer</div>
</div>

or float properties and block formating context :(to include IE6 add zoom:1; aside overflow)

.left and .right are to float and be first in the flow.
middle will come in between, BFC will avoid .mid to lay under floating elements.

div div {
  border:solid 1px ;
  overflow:hidden;/* modify BFC */
  }
.left  {
  float:left;
  }
.right {
  float:right
    }

    <div >
    <div class="left">aa</div>
     <div class="right">bb</div>     
    <div class="mid">mid</div>
    </div>
<hr/><div >
    <div class="left">longer</div>
     <div class="right">longer</div>     
    <div class="mid">mid</div>
    </div>

Thanks a lot @GCyrillus! Your trick of swapping order in the HTML part (`
...
...
`) solved it! But then it seems difficult to do this : http://stackoverflow.com/questions/37228226/swap-div-position-with-media-query Maybe you would have an idea? — Basj, May 14 '16 at 15:05

Top menu without flex, without calc(...) for legacy support

1 Answers1