Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

CSS: Inline element stretch to fill available horizontal space of container

Tags:

For example I have a 200px div containing three buttons, the text is only minimal so the buttons don't fill the horizontal space available. Is it possible to..

  1. Make the last button stretch to occupy all the remaining space?

  2. The First button to stretch to fill the remaining space pushing the last two buttons along?

  3. The middle button to stretch to fill the remaining space pushing the last button along?

like image 996
ChrisInCambo Avatar asked Jun 13 '09 03:06

ChrisInCambo


People also ask

How do you make a div fill a remaining horizontal space using CSS?

The width property is used to fill a div remaining horizontal space using CSS. By setting the width to 100% it takes the whole width available of its parent.

How do I stretch a div to fit a container?

Method 2: We can make the display attribute of the child container to table-row and display attribute of parent container to table, that will take all the height available from the parent div element. To cover all the width, we can make the width of parent div to 100%.

How do you stretch an element in CSS?

Define the available stretch-able space by using padding on the parent element. Use box-sizing: border-box on the parent element to subtract the padding and border defined when child element sets height 100%. This will cause child elements to use the actual free space of the parent when using height: 100%

How do you make an element occupy full width?

The . header-square is missing width attribute. Therefore you should expand to 100% by doing width: calc(100% / 7); to achieve your desired result.


2 Answers

I've realised that the real issue is buttons won't stretch until you give them an explicit width (ie, width:100%). You still need the table-cells though to constrain that 100% to a 'what will fit' model. You could just set 33% on each button but that won't work if your buttons are being added dynamically (unless you calculate the percentages on the server).

METHOD 1 (doesn't work): Buttons don't expand to fit the row (ie, display:table-cell appears to be ignored).

<div style="display:table;width:200px">
    <div style="display:table-row">
        <button style="display:table-cell">1</button>
        <button style="display:table-cell">2</button>
        <button style="display:table-cell">3</button>
    </div>
</div>

For IE prior to IE8 you'll need to feed a real table or a compatibility script like IE8-js. The basic concept is easy enough though:

<!--[if ie lt 8]>
<script><!--pseudo-code, not real js-->
for (el in getElementsByTagName('button')) {
    if el.style.find('display:table-cell') {
        el.innerHTML = '<td><button>'+el.innerHTML+'</button></td>'
    }
}
</script>
<![endif]-->

METHOD 2 (works): Hmmm.. Well for whatever reason the display:table-cell style does not work on button elements. I was able to do it with some extra markup though.

<div style="display:table;width:500px;">
    <div style="display:table-row">
        <div style="display:table-cell"> <button style="width:100%">1938274</button> </div>
        <div style="display:table-cell"> <button style="width:100%">2</button> </div>
        <div style="display:table-cell"> <button style="width:100%">3</button> </div>
    </div>
</div>

I admit it ain't pretty but it will ensure all of the horizontal space is filled. It can be cleaned up a bit by using classes like in this demo I put together. Still, when combined with IE's shortcomings this is probably a case where I'd say ignore the purists and just use a table:

<style>table button {width:100%}</style>

<table style="width:500px;">
    <tr> <td><button>1938274</button> <td> <button>2</button> <td> <button>3</button> </tr>
</table>
like image 56
SpliFF Avatar answered Oct 04 '22 04:10

SpliFF


Similar to Roberts:

HTML

<div id="container">
    <button id="one">One</button><button id="two">Two</button><button id="three">Three</button>
</div>

CSS

div#container {
    border: solid 1px;
    width: 200px;
}

div#container button {
    width: 33%;
}

div#container button:last-child {
    width: 34%;
}

That doesn't allow for a fluid layout: #container width must be known, then you do the math.

To allow for a fluid layout you need to hop into the world of absolute positioning:

div#container {
    border: solid 1px;
    width: 50%; /* resize your browser window to see results */

    position: relative;
}

div#container button {
    position: absolute;
    width: 50px;
}

button#one {
    top: 0;
    left: 0;
}

button#two {
    top: 0;
    left: 55px;
}

button#three {
    width: auto !important; /* get rid of the 50px width defined earlier */
    top: 0;
    left: 110px;
    right: 0px;
}

Watch out for the height of #container. It's gone since all it's children in this example are absolutely positioned--you can see that from the border.

like image 28
Ryan Florence Avatar answered Oct 04 '22 06:10

Ryan Florence