CODEWITHSUNDEEP
htmlcss
kris
kris

Reputation: 117

Adjusting a div box based on screen sizing

When scrolling out, the div scrolls out with it, rather than adjusting to the navbar width. This is the error it shows:

http://sc-cdn.scaleengine.net/i/1aa795a251b9ac3296e29ec216e636b5.png (image)

CSS:

#media-body {
    position:relative;
    float:left;
    border:1px solid;
    width: 90%;
    margin: 10%;
}

.media {
    position:relative;
    float:left;
    width: 30%;
    border: 1px solid;
}

.media-box {
    position:relative;
    float:left;
    width: 30%;
    border: 1px solid;
}

HTML:

<div id="side-bar">
    <div class="side-bar-container">
        <div id="media-body">
            <div class="media">         
                media box           
            </div>
            <div class="media-box">
                yo, another box
            </div>
        </div>
    </div>
</div>

Does it have something to do with the percentages and the position property?

jFiddle

Upvotes: 1

Views: 61

Answers (1)

mikelt21
mikelt21

Reputation: 2768

I think it has to do with your side-bar-container class having position: fixed. I updated it to have position: absolute instead.

Also keep in mind that when you do margin: 10% you're adding 10% margin to both the left and right side of the media-body div (totaling 20% of the width). So I also changed your width of your media-body div to `width: 80%'.

Original fiddle: http://jsfiddle.net/ytwwffab/2/

EDIT:

I made the following changes:

.side-bar-container {
    margin-top: 60px;
    position: relative;
}

#media-body {
    position: absolute;
    float: left;
    border: 1px solid;
    left: 10%;
    right: 10%;
}

Updated fiddle: http://jsfiddle.net/ytwwffab/4/

Upvotes: 2

Related Questions