CODEWITHSUNDEEP
htmlcss
Denis Steinman
Denis Steinman

Reputation: 7819

Cannot understand why div doesn't fill parent div?

I have the next html:

<div class="content">
        <div class="page">
        </div>
        <div class="sidebar">
        </div>
</div>

And css:

.content {
    position: relative;
    width: 90%;
    margin: 100px auto 30px auto;
}

.page {
    float: right;
    border-color: orange;
    border-style: double;
    border-width: 40px;
    border-image: url("images/bg_paper.png") 42 fill repeat;
    padding: 10px;
    margin-right: 250px;
}

.sidebar {
    position: absolute;
    right: 0;
    background-color: red;
    width: 200px;
    min-height: 70px;
}

div with page class wraps by content but I need to it fills parent width except sidebar width. Maybe it easy but Imma noobie in CSS.
P.S. Sorry for my English.
Screenshot

Upvotes: 0

Views: 233

Answers (2)

Jesse W.
Jesse W.

Reputation: 44

In your code you say content width = 90%. Of this 90 percent, you want your .page div to float right, what means that its left bound starts at 50% of 90%. You should delete the float:right and set the width of the sidebar to your wishes. Your code would look like the following:

.content {
position: relative;
width: 90%;
margin: 100px auto 30px auto;
}

.page {
    border-color: orange;
    border-style: double;
    border-width: 40px;
    border-image: url("images/bg_paper.png") 42 fill repeat;
    padding: 10px;
    margin-right: 250px;
}

.sidebar {
    position: absolute;
    right: 0;
    background-color: red;
    width: 200px;
    min-height: 70px;
}

This should do.

Upvotes: 1

markoffden
markoffden

Reputation: 1468

Thats all you need

.content {
    position: relative;
}

.page {
    margin-right: 250px;
}

.sidebar {
    position: absolute;
    top: 0;
    right: 0;
    width: 200px;
}

Upvotes: 1

Related Questions