Need to work out CSS

Question

I've re-structured this question as my previous one was too broad. Hopefully, this is refined enough?

I need to reproduce the same as in the image... Ive spent a day trying to produce it but just cant get it to work.

The red box is a div which can be of varying height or width. The checkbox needs to be centered vertically. Both green divs will be parent containers for other inline elements. The first green box will have a set width and the second will take up the remaining space.

If I have asked this incorrectly then please let me know...how best to ask it...?

Here is my markup so far

#profiles-container {
    width: 100%;
    height: 100%;
    background-color: #dedede;
    padding: 20px;
}
.profile-container {
    float: left;
    width: 50%;
    vertical-align: top;
    font-size: 0;
    box-sizing: border-box;
 position: relative;
}
.profile-checkbox {
 position: absolute;
    width: 40px;
 left: 0;
 text-align: center;
 line-height: 100px;
}

.profile-container-inner {
 height: 100px;
    background-color: #fff;
    border-left: solid 1px #bbb;
    border-right: solid 1px #bbb;
    border-radius: 5px;
    font-size: 13px;
 margin-left: 40px;
}
.container1 {
 float: left;
 width: 200px;
 background-color: #ccc;
 height: 100%;
}
.container2 {
 float: left;
 background-color: #ccc;
 height: 100%;
}
.profile-bar-color {
    background-color: #00bfff;
    width: 10px;
 float: left;
 height: 100%;
}

<ul id="profiles-container">
  <li class="profile-container">
    <div class="profile-checkbox"><input type="checkbox"/></div>                                    
    <div class="profile-container-inner">
      <div class="profile-bar-color">&nbsp;</div>
      <div class="container1">
        <h3>Annie Jane</h3>
      </div>
      <div class="container2">Some content</div>
    </div>
  </li>

  <li class="profile-container">
    <div class="profile-checkbox"><input type="checkbox"/></div>                                    
    <div class="profile-container-inner">
      <div class="profile-bar-color"></div>
      <div class="container1">
        <h3>Joe Bloggs</h3>
      </div>
      <div class="container2">Some content</div>
    </div>
  </li>
</ul>

Hate me for it, but you could just stick with the simplest way of using instead of
s. You could set the first table cell for the checkbox, the second for the first green element, both with a fixed width, finally the third td will take the rest of the space. Or you can do this with nasty display:table-cell, display:table hackings trying to mimic what
has right out of the box. (I stopped hating table for styling the webpage, because there is no other proper html element, which does not require a ton of css hack to have proper aligning)

score 2 · Accepted Answer · answered Aug 03 '16 at 09:36

.module {
    height: 100px;
    width: 100%;
}
.checkbox {  
    float: left;
    position: relative;
    top: 50%;
    transform: translateY(-50%);
}
.content {
    position: relative;
    height: 100%;
    margin-left: 25px;
}
.fixed-width {
    float:left;
    height: 100%;
    width:180px;
}
.dynamic-width {
    height: 100%;
    width: 100%;      
}

<div class="module" style="background-color: green">
    <input class="checkbox" type="checkbox">
    <div class="content" style="background-color: orange">
        <div class="fixed-width" style="background-color: yellow">
            <p>Test</p>
        </div>
        <div class="dynamic-width" style="background-color: blue">
            <p>Test</p>
        </div>
    </div>
</div>

Hi thanks for this answer - just a question? Why does the
tag in the floated div have some padding or margin and the other does not? — glenho123, Aug 03 '16 at 23:32

score 0 · Answer 2 · answered Aug 03 '16 at 09:44

Use html tables.

CodePen

 <table id="container">
      <tr>
        <td class="left">
            <input type="checkbox">
        </td>
        <td class="center">Center</td>
        <td class="right">Right</td>
      </tr>
    </table>

#container{
  width:100%;
  height:200px;
  background:red;
  padding:10px;
}
.left{
  background:blue;
  width:50px;
  vertical-align: middle;
  padding:10px;
}
.center{
  background:green;
}
.right{
  background:green;
  width:100%;
}

Seems to be the least messy. – Lajos Mészáros Aug 03 '16 at 10:55 — Lajos Mészáros, Aug 03 '16 at 10:55

score 0 · Answer 3 · edited May 23 '17 at 11:51

Here is a code which matches what you need and also centers the text vertically :

.container {
  height: 200px;
}
.right {
    width:auto;
    height:100%;
    background:red;
    overflow:hidden;
}
.left {
    height:100%;
    width:100px;
    background:blue;
    float:left;
}
.left2 {
    height:100%;
    width:300px;
    background:green;
    float:left;
}
.vert-center {
  position: relative;
  top: 50%;
 -webkit-transform: translateY(-50%);
 -moz-transform: translateY(-50%);
 -ms-transform: translateY(-50%);
 -o-transform: translateY(-50%);
  transform: translateY(-50%);
}
.center {
  text-align: center;
}

<div class="container">
    <div class="left">
      <div class="vert-center center">
        <input type="checkbox" name="name" />
      </div>
    </div>
    <div class="left2">
      <div class="vert-center">
        Here some text
      </div>
    </div>
    <div class="right">
      <div class="vert-center">
        Here some more text
        </div>
    </div>
</div>

Code adapted from the well explained answer of Xanthir, by adding another div and vertical aligns : Expand a div to take the remaining width

Can you explain the downvote so we know why this answer isn't good ? — Cladiuss, Aug 03 '16 at 10:01

score -1 · Answer 4 · answered Aug 03 '16 at 09:46

Flexbox can do the basic layout.

.container {
  height: 100px; /* or any height */
  display: flex;
  border: 1px solid red;
  padding: 1em;
  margin: 1em;
}
.container input {
  align-self: center; /* vertically centered */
  margin-right: 1em;
}
.left,
.right {
  border: 1px solid green;
}
.left {
  width: 150px; /* fixed width */
  background: pink;
}
.right {
  flex: 1; /* remaining width */
  background: #c0ffee;
}

<div class="container">
  <input type="checkbox" />
  <div class="left"></div>
  <div class="right"></div>
</div>

Need to work out CSS

4 Answers4