CODEWITHSUNDEEP
javascripthtmlcss
rnk
rnk

Reputation: 2204

css width in percent not working

I'm trying to implement two column layout page by body width 100% and one column width as 30% and other as 70%. But the second column [width: 70%] is not working.

HTML:

<!DOCTYPE HTML>
<html lang="en-US">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
    <div class="offer-details">aaaaaaaaaaaaaaaaaaaaaaaaa</div>
    <div class="offer-map">bbbbbbbbbbbbbbbbbbbbbbbbbbbb</div>
</body>
</html>​

CSS

html {
    height: 100%;
}

body {
    background-color: #F3F3F3;
    width: 100%;
    height: 100%;
    font-family: 'Helvetica Neue', helvetica, Arial, sans-serif;
    overflow: hidden;
}

* {
    margin: 0;
    padding: 0;
}

.offer-details {
    float: left;
    width: 30%;
    height: 100%;
    background-color: inherit;
    text-align: justify;
    overflow: auto;
}

.offer-map {
    float: left;
    width: 70%;
    height: 100%;
    background-position: center center;
    background-size: cover;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    -webkit-transition: opacity 1s cubic-bezier(0.770, 0.000, 0.175, 1.000);
    border-left: 5px solid #E1E1E1;
    overflow: auto;
    background-color: white;
}​

jQuery

$(function () {
        var width = $(document).width()+"px";
        var height = $(document).height()+"px";
        $('body').css({'width': width, 'height': height});
    })​

Here is the jsfiddle. When I tried 69% for the second column it is displaying but it's not covering the screen. How can I make both the columns 30% and 70% to cover the screen?.

Fullscreen jsfiddle: http://jsfiddle.net/yBNEr/2/embedded/result/

Thanks!

Upvotes: 0

Views: 3350

Answers (2)

tomaroo
tomaroo

Reputation: 2534

Simply put, the issue stems from the fact that .offer-map has a border-left of 5px.

Here's a solution that simply uses a containing div to achieve the desired effect.

jsfiddle

Upvotes: 1

Phil
Phil

Reputation: 164768

It is because of the 5px left border on .offer-map. Due to the box-model, this makes the actual width of .offer-map 70% + 5px.

One solution is to change the box sizing to border-box, eg

.offer-map {
    box-sizing: border-box;
}

though browser support differs. See http://jsfiddle.net/yBNEr/3/

Another option is to offset that left border with a negative right-margin, eg

.offer-map {
    margin-right: -5px;
}

See http://jsfiddle.net/yBNEr/5/

Upvotes: 5

Related Questions