1

I want to display a number and 2 text areas in a row.

The number should be in a "box" , with the background the height of the row and the number it's self should be vertically and horizontally centered in the "box".

I know I could do something like position: absolute; top: 0, left: 0 on the .number but this brings it out of the document flow. and the text, actual number does not get centered.

* {
  box-sizing: border-box;
}
.container {
  width: 40%;
}
.number {
  background: skyblue;
  /*position: absolute;*/
  top: 0;
  bottom: 0;
  vertical-align: middle;
}
.row > div {
  display: inline-block;
  vertical-align: top;
}
.row {
  background: lightgreen;
  position: relative;
}
<div class="container">
  <div class="row">
    <div class="number">10</div>
    <div class="textArea">
      <div class="companyName">Top title</div>
      <div class="industry">secondary text</div>
    </div>
  </div>
</div>

EDIT 1: You can see in the snippet that the box is not the full height of the container. That is not what I want.

EDIT 2: I guess you could cheat by using gradient but then I would have to make sure that the text area matches up to where the number box end to make the gradient look like the color is for the number "box".

Stickers
  • 75,527
  • 23
  • 147
  • 186
jack blank
  • 5,073
  • 7
  • 41
  • 73

3 Answers3

1

You can use flexbox to achieve that, all modern browsers support it, and with prefixes it also works on IE10.

* {
  box-sizing: border-box;
}
.container {
  width: 40%;
}
.row {
  background: lightgreen;
  display: flex;
}
.number {
  background: skyblue;
  display: flex;
  align-items: center;
}
<div class="container">
  <div class="row">
    <div class="number">10</div>
    <div class="textArea">
      <div class="companyName">Top title</div>
      <div class="industry">secondary text</div>
    </div>
  </div>
</div>

Or, use CSS table making it to work on legacy browsers too.

* {
  box-sizing: border-box;
}
.container {
  width: 40%;
}
.row {
  background: lightgreen;
  display: table;
  width: 100%;
}
.number,
.textArea {
  display: table-cell;
}
.number {
  background: skyblue;
  white-space: nowrap;
  vertical-align: middle;
}
.textArea {
  width: 100%;
}
<div class="container">
  <div class="row">
    <div class="number">10</div>
    <div class="textArea">
      <div class="companyName">Top title</div>
      <div class="industry">secondary text</div>
    </div>
  </div>
</div>
Stickers
  • 75,527
  • 23
  • 147
  • 186
  • do you use flexbox in production websites? do I need any polyfills or something like that. I'm nervous that user will not see the effect of flexbox because they may not have a browser that uses it. it is a newer. technology. any comments on that? – jack blank Jun 20 '16 at 19:06
  • Yes, but it's up to you and your project, with prefixes it works on IE10+, I also suggested a css table layout if you need it to work on older browsers. – Stickers Jun 20 '16 at 19:10
  • @jackblank Many use `flexbox` today in production websites, as it has a [+90% browser coverage](http://caniuse.com/#feat=flexbox), so you shouldn't be too worried ... and it is the recommended way, as it has a much more flexible way to render user friendly layouts – Asons Jun 20 '16 at 20:13
  • Do you use feature detention stuff like modernizr for flexbox? .. should I do something like `.no-flexbox .row{then add tablle cell row method}` – jack blank Jun 22 '16 at 01:33
  • It's your choice, please ask a new question if you need further suggestions. – Stickers Jun 22 '16 at 02:53
1

Use flex display: table-cell

Update 1: show how to create "margin" wíthout using cell padding

Update 2: show a progressive enhancement to use flex when available

*{
  box-sizing: border-box;
}
.container {
  width: 40%;
}
.number{
  background: skyblue;
}
.row > div {
  display: table-cell;
  vertical-align: middle;
}
.row {
  background: lightgreen;
  position: relative;
}

/*  3 ways to create a left margin on textArea  */
.row .textArea.nr1 { border-left: 10px solid transparent; }
.row .textArea.nr2 { position: relative; left: 10px; }
.row .textArea.nr3 { padding-left: 10px; }

/*  feature detect - use flex when available  */
@supports (display: flex) {
  .row > div {
    display: block;
  }
  .row {
    display: flex;
  }
  .row .number {
    display: flex;
    align-items: center;
  }  
}
<div class="container">
  <div class="row">
    <div class="number">10</div>
    <div class="textArea nr1">
      <div class="companyName">Top title</div>
      <div class="industry">secondary text</div>
    </div>
  </div>
</div>

<div class="container">
  <div class="row">
    <div class="number">10</div>
    <div class="textArea nr2">
      <div class="companyName">Top title</div>
      <div class="industry">secondary text</div>
    </div>
  </div>
</div>

<div class="container">
  <div class="row">
    <div class="number">10</div>
    <div class="textArea nr3">
      <div class="companyName">Top title</div>
      <div class="industry">secondary text</div>
    </div>
  </div>
</div>
Asons
  • 84,923
  • 12
  • 110
  • 165
  • looked good but if I want to do margin left on `textArea` it wouldn't work so I looked at http://stackoverflow.com/questions/16398823/why-is-a-div-with-display-table-cell-not-affected-by-margin and it puts a padding effect around the row, which I don't want. How would you make the margin? – jack blank Jun 20 '16 at 19:31
  • @jackblank Updated my answer with 3 "margin" alternatives , `padding-left` included. – Asons Jun 20 '16 at 19:59
  • @jackblank Updated my answer to show how you can use a simple feature detection and get progressive enhancement – Asons Jun 22 '16 at 17:41
0

 *{
  box-sizing: border-box;
}
.container{
  width: 40%;
}
.number{
  background: skyblue;
  /*position: absolute;*/
  top: 0;
  bottom: 0;
  vertical-align: middle;
  height: 40px;
  padding-top: 11px;
}
.row > div{
  display: inline-block;
  vertical-align: top;
}
.row{
  background: lightgreen;
  position: relative;
}
<div class="container">
  <div class="row">
   <div class="number">10</div>
   <div class="textArea">
                            <div class="companyName">Top title</div>
    <div class="industry">secondary text</div>
   </div>
  </div>

 </div>
Hardik Chapla
  • 435
  • 6
  • 26