Have been searching the net for the past hours to find a solution to this, but couldn't find it, so here I am.
I need the width of the div
to be 100%
minus the width of the left div
.
So that the div
to the left of it stays the same width (390px) but the other div
adjusts its size depending on the resolution . I have found the solution where it has a fixed width div
on both sides, but just cant figure this out.
It seems like this should be one of the easiest things to understand in CSS. If you want a block-level element to fill any remaining space inside of its parent, then it's simple — just add width: 100% in your CSS declaration for that element, and your problem is solved.
What you could do is set your div to be position: absolute so your div is independent of the rest of the layout. Then say width: 100% to have it fill the screen width. Now just use margin-left: 30px (or whatever px you need) and you should be done.
auto automatically computes the width such that the total width of the div fits the parent, but setting 100% will force the content alone to 100%, meaning the padding etc. will stick out of the div, making it larger than the parent. so setting the 'width' to 'auto' would be better? Yes, but that's the default anyway.
Simple solution:
<div id="content">
<div class="padder">
</div><!-- .padder -->
</div>
<div id="sidebar">
<div class="padder">
</div><!-- .padder -->
</div>
CSS:
div#content {
float: right;
width: 100%;
}
div#content .padder {
margin-left: 330px;
padding: 0 30px 0 0;
}
div#sidebar {
float: left;
width: 300px;
margin-top: -30px;
padding-left: 30px;
margin-right: -330px;
}
This will allow you to have a fixed sidebar width and a full width content area. I have used it many times and it works like a charm.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With