CODEWITHSUNDEEP
htmlcss
glenho123
glenho123

Reputation: 577

Need to work out CSS

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.

enter image description here 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>

Upvotes: 1

Views: 77

Answers (4)

Cladiuss
Cladiuss

Reputation: 535

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

Upvotes: 0

Paulie_D
Paulie_D

Reputation: 114990

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>

Upvotes: -1

polamoros
polamoros

Reputation: 259

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%;
}

Upvotes: 0

Nick Bull
Nick Bull

Reputation: 9866

.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>

Upvotes: 2

Related Questions