Three divs in a row CSS

Question

<div id="firstRow">
    <div id="one">AAA</div>
    <div id="two"><input style="width: 100%" type="search"></div>
    <div id="three">AAAAAA</div>
</div>

I have three divs.

I want to float div with id one to the left. The width of div one will depend on its content.
I want to float div three to the right with auto width depending also in its contents.
I want the div with id two to be in the taking up all remaining space.

I have made it with table but I want it with divs

<table>
    <tr>
        <td id="one">AAAAAAAAAAAAAAAAAAAAA</td>
        <td id="two"><input style="width: 100%" type="search"></td>
        <td id="three">AAAAAA</td>
    </tr>
</table>

table {
    width: 100%;
}

#one 
    width: auto;
    height: 20px;
    background-color: red;
}

#two{
    width: 100%;
    height: 20px;
    background-color: orange;
}

#three {
    width: auto;
    height: 20px;
    background-color: green;
}

related: http://stackoverflow.com/q/2603700/3597276 – Michael Benjamin Jan 18 '16 at 02:21 — Michael Benjamin, Jan 18 '16 at 02:21
In my opinion Nenad's flexbox answer is the way to go. – Lee Saxon Jan 18 '16 at 03:00 — Lee Saxon, Jan 18 '16 at 03:00

Nenad Vracar · Answer 1 · 2016-01-18T03:14:56.797

4

You can do this with Flexbox

#firstRow {
  display: -webkit-box; 
  display: -ms-flexbox; 
  display: -webkit-flex;
  display: flex; 
}

#one {
  background-color: red;  
}

#two {
  -webkit-flex: 1;      
  -ms-flex: 1;       
   flex: 1; 
}  
  
#three {
  background-color: green;
}

<div id="firstRow">
  <div id="one">AAA</div>
  <div id="two"><input style="width: 100%" type="search"></div>
  <div id="three">AAAAAA</div>
</div>

edited Jan 18 '16 at 03:14

answered Jan 18 '16 at 01:17

Nenad Vracar

118,580
15
151
176

1

@Ouroborus, All modern browsers support flexbox. Only the fading IE 8 & 9 don't. If it's a good answer, you should upvote, cause browser support isn't an issue (unless OP requires IE 8 & 9 support in question). – Michael Benjamin Jan 18 '16 at 02:19
1

I disagree with Ouroborus, you have to look back fairly far to see a lack of flexbox support (unless you refuse to use vendor tags). However, I would suggest the answer would be even more helpful with the vendor tags for IE10 and Safari 8 (which includes Chrome on iOS 8, otherwise I wouldn't bother). I don't think it's necessary to add the older vendor tags, almost no one is going to need those. – Lee Saxon Jan 18 '16 at 03:14
@Michael_B If by "support" you mean: requires vendor prefix, uses an older syntax, and has a number of bugs. This all applies to IE11, btw. (Although I'm kind of surprised. I would've thought with all the effort MS put into IE11, this wouldn't be an issue.) – Ouroborus Jan 18 '16 at 05:43
@Ouroborus, IE11 is based on the current flexbox spec. IE10 uses the older syntax. I'm also a bit surprised by the flex bugs in IE11. – Michael Benjamin Jan 18 '16 at 13:03

Ouroborus · Answer 2 · 2016-01-18T01:40:52.417

1

There's usually not a point to this because, well, you have tables.

.table {
    display:table;
    width:100%;
    border-spacing:2px;
}
.row {
    display:table-row;
}
.cell {
    display:table-cell;
    padding:1px;
}
.cell,td {
    white-space:nowrap;
}

<div class="table">
    <div class="row">
        <div class="cell" style="background-color:#f88;">cell 1</div>
        <div class="cell" style="background-color:#8f8;width:100%;"><input style="width: 100%" type="search" placeholder="Search box"></div>
        <div class="cell" style="background-color:#88f;">cell 3</div>
    </div>
</div>
<table style="width:100%;">
    <tr>
        <td style="background-color:#f88;">cell 1</td>
        <td style="background-color:#8f8;width:100%;"><input style="width: 100%" type="search" placeholder="Search box"></td>
        <td style="background-color:#88f;">cell 3</td>
    </tr>
</table>

edited Jan 18 '16 at 01:40

answered Jan 18 '16 at 01:33

Ouroborus

16,237
4
39
62

In 1998, the guy who first thought of using tables for layout wrote an article called, "The web is ruined and I ruined it", lamenting his horrible decision to do such a thing. Since then, using tables for layout is a widely known obscenity no knowledgeable developer would ever do considering the multltude of far better methods than that. In addition, the CSS table properties do not make a HTML element a table. – Rob Jan 18 '16 at 02:36
1

@Rob The only significant difference is implied context. Slap a `role="presentation"` on the table and the difference is removed. But I agree, only a monster would do that. (OP's original question was basically "How do I make a table without using ``?" It's migrated from that.)
– Ouroborus Jan 18 '16 at 07:00
Adding an attribute to a HTML element does not change the structure, the outline, of the HTML document; especially the role attribute which does not exist in the standard. – Rob Jan 18 '16 at 14:14
@Rob It's an ARIA thing and a way to change context for readers that pay attention to context when rendering (for the blind, etc.). If you're only worried about structure, and not semantics, then what does it matter which you use? The key difference between HTML tables and CSS tables is implied context. HTML tables imply an actual table of data along with a table-like layout. CSS tables are also a table-like layout but without making implications about the content. If there's a meaningful distinction beyond that, I've missed it. – Ouroborus Jan 18 '16 at 18:26
My whole point is that you should not use tables for layout. Then you said adding an ARIA attribute would solve the question, but it doesn't. And when you, earlier, said using CSS table display would make it a table, it doesn't do that either. Those are my issues. – Rob Jan 19 '16 at 14:22

Three divs in a row CSS

2 Answers2