Css center tests

by Nathan Perry

HTML

<h4>container-position</h4>

<div class="container-position">
    <div class="left">left</div>
    <div class="right">right</div>
    <div class="center">center</div>
</div>
<div class="container-position">
    <div class="left">left</div>
    <div class="right">right</div>
    <div class="center">
        <p>center center center center center center center center center center center center center center center center center center center center center center center center center center center center center center center center center center center center center center</p>
    </div>
</div>

<h4>container-depth-float</h4>

<div class="container-depth-float">
    <div class="left">left</div>
    <div class="center-container">
        <div class="right">right</div>
        <div class="center">center</div>
    </div>
</div>

<h4>container-float</h4>

<div class="container-float">
    <div class="left">left</div>
    <div class="right">right</div>
    <div class="center">center</div>
</div>
<div class="container-float">
    <div class="left">left</div>
    <div class="right">right</div>
    <div class="center">center center center center center center center center center center center center center center center center center center center center center center center center center center center center center center center center center center center center center center</div>
</div>

SCSS

body {
    margin: 5px;
}
div {
    outline: 1px solid gray;
}
.container-position {
    position: relative;
    min-height: 20px;
    .left {
        position: absolute;
        width: 25px;
        left: 0;
    }
    .center {
        position: absolute;
        left: 25px;
        right: 50px;
        p {
            margin: 0;
            padding: 0;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            ____max-height: 1em;
        }
    }
    .right {
        position: absolute;
        width: 50px;
        right: 0;
    }
}
.container-depth-float {
    .left {
        float: left;
        width: 25px;
    }
    .center-container {
        width: 100%;
    }
    .right {
        float: right;
    }
    .center {
        width: 100%;
    }
}
.container-float {
    .left {
        float: left;
        width: 25px;
    }
    .center {
        width: 100%;
    }
    .right {
        float: right;
    }
}