CODEWITHSUNDEEP
htmlcss
May Sun
May Sun

Reputation: 99

separator by not using width hack

I often do the width hack 49% and border 1px to do seperator for 2 column. It worked, just like the below demo. But is there any better way of doing it? I want to avoid this 49% hack, because when the viewport shrink to a larger or smaller size, it's obvious and the design will break.

body{
    margin:0;
}
.left {
    background: #eee;
    float: left;
    width: 49%;
    border-right:1px solid #333;
}
.right {
    background: #eee;
    float: right;
    width: 50%;
}
img {
    margin: 0 auto;
    display: block;
    width: 44px;
    padding: 5px 0;
}
<div class="navigate" style="width: 170px;">
    <div class="left">
        <img src="https://cdn0.iconfinder.com/data/icons/arrow-set/512/previous_arrow_point_flat-128.png">
    </div>
    <div class="right">
        <img src="https://cdn0.iconfinder.com/data/icons/arrow-set/512/next_arrow_point_flat-128.png">
    </div>
</div>

Upvotes: 0

Views: 54

Answers (1)

Lu&#237;s P. A.
Lu&#237;s P. A.

Reputation: 9739

You can use box-sizing

CSS

body {
    margin:0;
}
.left {
    background: #eee;
    float: left;
    width: 50%;
    border-right:1px solid #333;
    box-sizing:border-box;
}
.right {
    background: #eee;
    float: right;
    width: 50%;
}
img {
    margin: 0 auto;
    display: block;
    width: 44px;
    padding: 5px 0;
}

HTML

<div class="navigate" style="width: 170px;">
    <div class="left">
        <img src="https://cdn0.iconfinder.com/data/icons/arrow-set/512/previous_arrow_point_flat-128.png">
    </div>
    <div class="right">
        <img src="https://cdn0.iconfinder.com/data/icons/arrow-set/512/next_arrow_point_flat-128.png">
    </div>
</div>

DEMO HERE

Upvotes: 2

Related Questions