CODEWITHSUNDEEP
htmlcss
alwaysLearning
alwaysLearning

Reputation: 15

Overflow children element if outside grandparent?

At the beggining I'd like to explain my problem, well I've got main container body where width is auto and min-width is 960px(width of screen can be bigger than children width), there's child container where margin is auto and width 960px, inside child container I've got element (map) that has position absolute and it's always outside parent but not always outside body, when I'm resizing window, widht of body changes and then element is outside body and outside its parent like always, I tried to clip it if it's outside body, because it makes my layout white gap on the right side but don't know how, can some body explain me how can I do that?

http://jsfiddle.net/8hbynzfb/

<div id="content">
    <div class="container">
        <div id="info">
            Test
        </div>
        <div id="map">
        </div>
    </div>
</div>


* {
    padding: 0;
    margin: 0;
}

body {
    border: 2px solid black;
    min-width: 960px;
}

.container {
    position: relative;
    width: 960px;
    margin:0 auto;
    outline: 1px solid red;
    font-size: 0;
}

.container .col-left {
    position: relative;
    display: inline-block;
    margin-right: 41px;
    width: 293px;
    outline: 1px solid green;
}

.container .col-center {
    position: relative;
    display: inline-block;
    margin-right: 41px;
    width: 293px;
    outline: 1px solid blue;
}

.container .col-right {
    position: relative;
    display: inline-block;
    width: 292px;
    outline: 1px solid yellow;
}

.container > div {
    vertical-align: top;
    font-size: initial;
}

#info {
    display: block;
    height: 84px;
    margin-left: 900px;
}

#map {
    display: block;
    height: 256px;
    position: absolute;
    background-image: url('http://gis.meridenct.gov/meriden/images/i_map.png') no-repaet;
    width: 256px;
    right: -128px;
    top: 0px;
    outline: 1px solid yellow;
}

Upvotes: 1

Views: 278

Answers (1)

Paul
Paul

Reputation: 9022

Just add a overflow attribute to your body:

body {
    border: 2px solid black;
    min-width: 960px;
    overflow: hidden; /* this is new */
}

updated jsfiddle example

EDIT: to still have scrollbars, add the overflow rule to #content instead.

body {
    border: 2px solid black;
    min-width: 960px;
}
#content {
    min-width: 960px;
    overflow: hidden;
}

updated jsfiddle example

Upvotes: 1

Related Questions