Reputation: 7819
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.
Upvotes: 0
Views: 233
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
Reputation: 1468
Thats all you need
.content {
position: relative;
}
.page {
margin-right: 250px;
}
.sidebar {
position: absolute;
top: 0;
right: 0;
width: 200px;
}
Upvotes: 1