Stretch content to 100% of container width, minus the width of a floated sibling element

Question

I want to position a dynamic logo (width variable/unknown) next to some content, inside a container (see attached mockup - logo is on the right hand side in green, content is in blue). I specifically want the content div to stretch to the full remaining width of the page as shown in the mockup:

But when I try to float the content to the left and the logo to the right (jsfiddle), the logo gets positioned below the content unless I set the content width to less that 100% (and I can't know the content width because the logo width can vary).

HTML:

<div id="container">
  <div id="content"></div>
  <div id="logo"></div>
</div>

CSS:

#content {
  border: 1px solid green;
  height: 300px;
  width: 100%;
  float: left;
}

#logo {
  border: 1px solid red;
  width: 50px; /*unknown width*/
  height: 50px;
  float: right;
}

How do I stretch the content div to the full container width, minus the width of the logo?

since both have unfixed width, then you should go with JavaScript solution, do you need a JS solution (with this you will be able to use the full width available on the window)? — Rohit Kumar, Sep 11 '15 at 11:00
Can be done with SASS/SCSS... Where you can minus the logo's width from DIV. There you can do the calculation. But here you are using CSS, so the best way to use JS. — Saswata Sundar, Sep 11 '15 at 11:03

score 9 · Answer 1 · answered Sep 11 '15 at 11:53

9

Depending on your broswer support requirements, flexbox can do that

.container {
  display: flex;
  margin-bottom: 1em;
}
.content {
  background: green;
  height: 100px;
  flex: 1;
}
.logo {
  background: red;
  width: 50px;
  height: 50px;
}
.large {
  width: 100px;
}

<div class="container">
  <div class="content"></div>
  <div class="logo "></div>
</div>

<div class="container">
  <div class="content"></div>
  <div class="logo large"></div>
</div>

answered Sep 11 '15 at 11:53

Paulie_D

107,962
13
142
161

I don't think you need to worry about browser support., unless you still develop for ancient browsers . Check here http://caniuse.com/#feat=flexbox – Roumelis George Sep 11 '15 at 11:56
2

Support is always worth **mentioning** when dealing with *unknown* requirements on Stack Overflow. – Paulie_D Sep 11 '15 at 11:58

score 0 · Answer 2 · edited May 23 '17 at 11:54

This is a possible approach using jQuery:

jsFiddle demo

jQuery:

$(document).ready(function() {

    var logoWidth = $('#logo').width();
    var docWidth = $(document).width();
    $('#content').width(docWidth-logoWidth);

});

CSS:

html, body {
    margin:0;
    padding:0;
}
#content {
  background-color: lightblue;
  height: 200px;
  width: 100%;
  float: left;
}
#logo {
  background-color: green;
  width: 50px; /*unknown width*/
  height: 50px;
  float: right;
}

HTML:

<div id="container">
    <div id="content"></div>
    <div id="logo"></div>
</div>

Source

EDIT: Upon the CSS you provided, I added margin:0; and padding:0 to html,body to be sure the document width represents the actual available space for both DIVs. In the case that body or html or the container you use do have margin, padding or border, you can use this code instead of the previous one:

jsFiddle demo

jQuery:

$(document).ready(function () {

    var logoWidth = $('#logo').width(),
      docWidth = $(document).width(),
      marginB = $('body').outerWidth(true) - $('body').outerWidth(),
      paddingB = $('body').innerWidth() - $('body').width(),
      borderB = $('body').outerWidth() - $('body').innerWidth();

    $('#content').width(docWidth - logoWidth - marginB - paddingB - borderB);

});

Source

Stretch content to 100% of container width, minus the width of a floated sibling element

2 Answers2