Glen Hong Glen Hong - 4 months ago 6
HTML Question

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>




Answer

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