Expanding DIVS that are inline

Question

I am trying to get 2 divs to sit side by side, with one of the divs expanding to fill empty space.

The site I am working on has a link, with a colour block beside it. The colour block should remaining width of the div, depending on how much space the link text takes up.

Originally, I tried floating Divs side by side but this didn't work when lowering the screen size. I have also tried inline-block but this didn't work either.

Finally, I tried the resolution here, again this did not work. Where am I am going wrong?

My code is:

<div class="link-wrapper">

    <div class="block yellow">
    </div><!--/ Block -->

    <div class="link">
        <p><a href="#</a></p>
    </div><!--/ Link -->

</div>

CSS is:

.link-wrapper{
    width:100%;
    overflow:hidden;}

.block{
    overflow:hidden;
    height:15px;}

.link{
    float:right;}

Questions seeking debugging help ("why isn't this code working?") must include the desired behavior, a specific problem or error and the shortest code necessary to reproduce it **in the question itself**. See [**How to create a Minimal, Complete, and Verifiable example**](http://stackoverflow.com/help/mcve) — Paulie_D, Jul 17 '15 at 15:30
The section I am working on is towards the bottom - there are three columns with a link in each one. — CharlyAnderson, Jul 17 '15 at 15:42

robjez · Accepted Answer · 2015-07-17T16:13:29.670

I'll be guessing here - my crystal ball told me that you need this :)

HTML:

<div class="link-wrapper">
     <div class="block yellow">
          <div class="link">
               <p><a href="#">Look Book '15</a> &gt; &gt;</p>
          </div><!--/ Link -->
     </div><!--/ Block -->   
</div>

CSS:

.block {
  overflow: hidden;
  height: 21px;
}
.link {
  float: right;
  background: #F1F1F1;
  padding-left: 10px;
}

So basically - I don't think you can set both divs, to sit next to each other, without explicitly fixing the width of at least one of them, and then using calc() function to do necessary calculation. Above code mimicks this look, but with slightly different html structure, where link is a child of colourful parent div element.

EDIT:

As per comment there is an option to use a flex box, to avoid changing html:

/* Flexbox way */

.link-wrapper {
  width: 100%;
  overflow: hidden;
  display: flex;
  justify-content: space-between;
}
.block {
  overflow: hidden;
  height: 21px;
  flex-grow: 2;
}
.link {
  float: right;
  padding-left: 10px;
}

Where flex-grow is important bit which does the job here - "it defines the ability for a flex item to grow if necessary".

So you have pretty good choice here:
1 - to modify markup, and nest link inside parent div, or
2 - if you don't worry about too extensive browser support, you could use flex- box without need of touching your html

This actually works perfectly, not sure why I didn't think of it myself! Thank you so much for your help. — CharlyAnderson, Jul 17 '15 at 15:53
No problem - while I think about it now, you could actually tried to work it out with [flexbox](http://www.w3.org/TR/css-flexbox-1/), and this would allow you to keep your previous html structure - but everything depends on browsers you need to support, as [flex support is not universal](http://caniuse.com/#feat=flexbox) — robjez, Jul 17 '15 at 16:01

Expanding DIVS that are inline

1 Answers1