How to get 2nd side by side div only to display bottom border

Question

I just want the 2nd div to display a bottom border. I either get both divs displaying a bottom border or none at all.

.container {
  width: 75%; overflow: hidden;
  border: 0;
}
.container div:nth-child(1) {
  width: auto; float: left; height: 25px;
  padding: 5px 20px;
  background-color: white; 
}
.container div:nth-child(2) {
  margin-left: auto; height: 25px;
  padding: 5px 20px;
  background-color: ghostwhite;    
  border-bottom: 1pt solid black;
}

<div class="container">
  <div>Div Left</div><div>Div Right</div>
</div>

Sorry about the typo - too late to edit... but it gives a border along the whole thing. — Patrick, Dec 21 '16 at 19:29

score 1 · Accepted Answer · answered Dec 21 '16 at 19:30

1

Use display:inline-block, instead of float as float allows the second div to occupy space behind the first.

.container {
  width: 75%;
  overflow: hidden;
  border: 0;
}
.container div:nth-child(1) {
  width: auto;
  height: 25px;
  padding: 5px 20px;
  background-color: white;
  display: inline-block;
}
.container div:nth-child(2) {
  margin-left: auto;
  height: 25px;
  padding: 5px 20px;
  background-color: ghostwhite;
  border-bottom: 1pt solid black;
  display: inline-block;
}

<div class="container">
  <div>Div Left</div>
  <div>Div Right</div>
</div>

answered Dec 21 '16 at 19:30

j08691

204,283
31
260
272

Perfect. Thanks. – Patrick Dec 21 '16 at 19:31
Followup question: how do I keep the 2nd div from collapsing to the content width? – Patrick Dec 21 '16 at 19:35
You may want to use flexbox or see http://stackoverflow.com/questions/5540485/how-to-make-an-inline-block-element-fill-the-remainder-of-the-line – j08691 Dec 21 '16 at 19:37
You are a wealth of knowledge!! Thank you. – Patrick Dec 21 '16 at 19:40

How to get 2nd side by side div only to display bottom border

1 Answers1