Make div fill remaining space dynamically

Question

I can't think of an easy way to explain this, so I'll do it with an image:

And here is a rough fiddle of what I have so far: https://jsfiddle.net/a9gnx79h/

A pure CSS solution would be preferable, but I can use jQuery if necessary.

Code from the fiddle:

HTML

        <div id="main_content">

                <aside id="sidebar">

                </aside>

                <h2 class="title">Blog Post<span>posted 1/2/2015 by <a>User</a></h2>

                <p>Lorem ipsum dolor sit amet, ex eros epicuri elaboraret mel, ridens eruditi commune ei vim, no est possit meliore corrumpit. Saperet fabellas mea eu, quo in sanctus verterem. 
                Et propriae inimicus deseruisse sed. Ius nulla mandamus definitionem et, forensibus conclusionemque mel ad. Duis sonet quando et sit, et omnesque fabellas concludaturque vel.</p>

                <p>Dicunt voluptatibus definitionem mel at, eu tritani gloriatur instructior cum. Cum id euismod luptatum, everti saperet ei nec. Vel meis brute graeci cu, nonumy officiis complectitur ei pro. 
                An sed accumsan convenire, movet nemore ut his.</p>

                <p>Sit mentitum instructior ex. Exerci ornatus cum te. Zril pertinax comprehensam vel ex. Tantas lucilius antiopam sit et.</p>

                <p>Lorem ipsum dolor sit amet, ex eros epicuri elaboraret mel, ridens eruditi commune ei vim, no est possit meliore corrumpit. Saperet fabellas mea eu, quo in sanctus verterem. 
                Et propriae inimicus deseruisse sed. Ius nulla mandamus definitionem et, forensibus conclusionemque mel ad. Duis sonet quando et sit, et omnesque fabellas concludaturque vel.</p>



                <h2 class="title">Blog Post<span>posted 1/2/2015 by <a>User</a></h2>

                <p>Lorem ipsum dolor sit amet, ex eros epicuri elaboraret mel, ridens eruditi commune ei vim, no est possit meliore corrumpit. Saperet fabellas mea eu, quo in sanctus verterem. 
                Et propriae inimicus deseruisse sed. Ius nulla mandamus definitionem et, forensibus conclusionemque mel ad. Duis sonet quando et sit, et omnesque fabellas concludaturque vel.</p>

                <p>Dicunt voluptatibus definitionem mel at, eu tritani gloriatur instructior cum. Cum id euismod luptatum, everti saperet ei nec. Vel meis brute graeci cu, nonumy officiis complectitur ei pro. 
                An sed accumsan convenire, movet nemore ut his.</p>

                <p>Sit mentitum instructior ex. Exerci ornatus cum te. Zril pertinax comprehensam vel ex. Tantas lucilius antiopam sit et.</p>

                <p>Lorem ipsum dolor sit amet, ex eros epicuri elaboraret mel, ridens eruditi commune ei vim, no est possit meliore corrumpit. Saperet fabellas mea eu, quo in sanctus verterem. 
                Et propriae inimicus deseruisse sed. Ius nulla mandamus definitionem et, forensibus conclusionemque mel ad. Duis sonet quando et sit, et omnesque fabellas concludaturque vel.</p>



                <h2 class="title">Blog Post<span>posted 1/2/2015 by <a>User</a></h2>

                <p>Lorem ipsum dolor sit amet, ex eros epicuri elaboraret mel, ridens eruditi commune ei vim, no est possit meliore corrumpit. Saperet fabellas mea eu, quo in sanctus verterem. 
                Et propriae inimicus deseruisse sed. Ius nulla mandamus definitionem et, forensibus conclusionemque mel ad. Duis sonet quando et sit, et omnesque fabellas concludaturque vel.</p>

                <p>Dicunt voluptatibus definitionem mel at, eu tritani gloriatur instructior cum. Cum id euismod luptatum, everti saperet ei nec. Vel meis brute graeci cu, nonumy officiis complectitur ei pro. 
                An sed accumsan convenire, movet nemore ut his.</p>

                <p>Sit mentitum instructior ex. Exerci ornatus cum te. Zril pertinax comprehensam vel ex. Tantas lucilius antiopam sit et.</p>

                <p>Lorem ipsum dolor sit amet, ex eros epicuri elaboraret mel, ridens eruditi commune ei vim, no est possit meliore corrumpit. Saperet fabellas mea eu, quo in sanctus verterem. 
                Et propriae inimicus deseruisse sed. Ius nulla mandamus definitionem et, forensibus conclusionemque mel ad. Duis sonet quando et sit, et omnesque fabellas concludaturque vel.</p>



                <h2 class="title">Blog Post<span>posted 1/2/2015 by <a>User</a></h2>

                <p>Lorem ipsum dolor sit amet, ex eros epicuri elaboraret mel, ridens eruditi commune ei vim, no est possit meliore corrumpit. Saperet fabellas mea eu, quo in sanctus verterem. 
                Et propriae inimicus deseruisse sed. Ius nulla mandamus definitionem et, forensibus conclusionemque mel ad. Duis sonet quando et sit, et omnesque fabellas concludaturque vel.</p>

                <p>Dicunt voluptatibus definitionem mel at, eu tritani gloriatur instructior cum. Cum id euismod luptatum, everti saperet ei nec. Vel meis brute graeci cu, nonumy officiis complectitur ei pro. 
                An sed accumsan convenire, movet nemore ut his.</p>

                <p>Sit mentitum instructior ex. Exerci ornatus cum te. Zril pertinax comprehensam vel ex. Tantas lucilius antiopam sit et.</p>

                <p>Lorem ipsum dolor sit amet, ex eros epicuri elaboraret mel, ridens eruditi commune ei vim, no est possit meliore corrumpit. Saperet fabellas mea eu, quo in sanctus verterem. 
                Et propriae inimicus deseruisse sed. Ius nulla mandamus definitionem et, forensibus conclusionemque mel ad. Duis sonet quando et sit, et omnesque fabellas concludaturque vel.</p>

        </div>

CSS

#main_content
{
    background-color: rgba(30, 30, 30, 1);

    color: rgba(200,200,200,1);

    width: 95%;
    min-height: 50rem;

    border-width: 10%;

    margin-top: 3rem;
    margin-left: auto;
    margin-right: auto;

    padding: 1rem;
}

#sidebar
{
    float: right;

    padding: 1.5rem;

    margin-right: 1rem;

    background-color: rgba(255, 0, 0, 1);

    display: inline;

    width: 10%;
    height: 30rem;
}

.title
{
    background-color: rgba(0, 00, 255, 1);

    padding-top: 1rem;
    padding-bottom: 1rem;
    padding-right: 1rem;
    padding-left: 1rem;

    font-weight: bold;

    display: block;

    position: relative;
}

.title span
{
    float: right;
    font-size: 50%;
    font-weight: normal;
}

Answer 1

Add below into your stylesheet, adjust the margin as you need.

#sidebar {
    margin: 1rem;
}
.title {
    overflow: atuo;
}

UPDATE DEMO: http://jsfiddle.net/a9gnx79h/26/

Answer 2

Try the code snippet below.

You could wrap each article in a div with an article class, then create another more specific article class for the top article (which I cunningly called top-article .

 #main_content { background-color:rgba(30,30,30,1); color:rgba(200,200,200,1); width:95%; min-height:50rem; border-width:10%; margin-top:3rem; margin-left:auto; margin-right:auto; padding:1rem } #sidebar { float:right; padding:1.5rem; margin: 0 1rem 0 1rem; background-color:rgba(255,0,0,1); display:inline; width:10%; height:29rem } .top-article { width:75%; overflow:hidden } .article { width:100%; overflow:visible; margin-top: 25px; padding-top:15px } .title { background-color:rgba(0,00,255,1); margin-top:0; padding-top:1rem; padding-bottom:1rem; padding-right:1rem; padding-left:1rem; font-weight:700; display:block; position:relative; overflow: auto } .title span { float:right; font-size:50%; font-weight:400 } 

 <div id="main_content"> <aside id="sidebar"></aside> <div class="top-article"> <h2 class="title">Blog Post<span>posted 1/2/2015 by <a>User</a></span></h2> <p>Lorem ipsum dolor sit amet, ex eros epicuri elaboraret mel, ridens eruditi commune ei vim, no est possit meliore corrumpit. Saperet fabellas mea eu, quo in sanctus verterem. Et propriae inimicus deseruisse sed. Ius nulla mandamus definitionem et, forensibus conclusionemque mel ad. Duis sonet quando et sit, et omnesque fabellas concludaturque vel.</p> <p>Dicunt voluptatibus definitionem mel at, eu tritani gloriatur instructior cum. Cum id euismod luptatum, everti saperet ei nec. Vel meis brute graeci cu, nonumy officiis complectitur ei pro. An sed accumsan convenire, movet nemore ut his.</p> <p>Sit mentitum instructior ex. Exerci ornatus cum te. Zril pertinax comprehensam vel ex. Tantas lucilius antiopam sit et.</p> <p>Lorem ipsum dolor sit amet, ex eros epicuri elaboraret mel, ridens eruditi commune ei vim, no est possit meliore corrumpit. Saperet fabellas mea eu, quo in sanctus verterem. Et propriae inimicus deseruisse sed. Ius nulla mandamus definitionem et, forensibus conclusionemque mel ad. Duis sonet quando et sit, et omnesque fabellas concludaturque vel.</p> </div> <div class="article"> <h2 class="title">Blog Post<span>posted 1/2/2015 by <a>User</a></span></h2> <p>Lorem ipsum dolor sit amet, ex eros epicuri elaboraret mel, ridens eruditi commune ei vim, no est possit meliore corrumpit. Saperet fabellas mea eu, quo in sanctus verterem. Et propriae inimicus deseruisse sed. Ius nulla mandamus definitionem et, forensibus conclusionemque mel ad. Duis sonet quando et sit, et omnesque fabellas concludaturque vel.</p> <p>Dicunt voluptatibus definitionem mel at, eu tritani gloriatur instructior cum. Cum id euismod luptatum, everti saperet ei nec. Vel meis brute graeci cu, nonumy officiis complectitur ei pro. An sed accumsan convenire, movet nemore ut his.</p> <p>Sit mentitum instructior ex. Exerci ornatus cum te. Zril pertinax comprehensam vel ex. Tantas lucilius antiopam sit et.</p> <p>Lorem ipsum dolor sit amet, ex eros epicuri elaboraret mel, ridens eruditi commune ei vim, no est possit meliore corrumpit. Saperet fabellas mea eu, quo in sanctus verterem. Et propriae inimicus deseruisse sed. Ius nulla mandamus definitionem et, forensibus conclusionemque mel ad. Duis sonet quando et sit, et omnesque fabellas concludaturque vel.</p> </div> <div class="article"> <h2 class="title">Blog Post<span>posted 1/2/2015 by <a>User</a></span></h2> <p>Lorem ipsum dolor sit amet, ex eros epicuri elaboraret mel, ridens eruditi commune ei vim, no est possit meliore corrumpit. Saperet fabellas mea eu, quo in sanctus verterem. Et propriae inimicus deseruisse sed. Ius nulla mandamus definitionem et, forensibus conclusionemque mel ad. Duis sonet quando et sit, et omnesque fabellas concludaturque vel.</p> <p>Dicunt voluptatibus definitionem mel at, eu tritani gloriatur instructior cum. Cum id euismod luptatum, everti saperet ei nec. Vel meis brute graeci cu, nonumy officiis complectitur ei pro. An sed accumsan convenire, movet nemore ut his.</p> <p>Sit mentitum instructior ex. Exerci ornatus cum te. Zril pertinax comprehensam vel ex. Tantas lucilius antiopam sit et.</p> <p>Lorem ipsum dolor sit amet, ex eros epicuri elaboraret mel, ridens eruditi commune ei vim, no est possit meliore corrumpit. Saperet fabellas mea eu, quo in sanctus verterem. Et propriae inimicus deseruisse sed. Ius nulla mandamus definitionem et, forensibus conclusionemque mel ad. Duis sonet quando et sit, et omnesque fabellas concludaturque vel.</p> </div> <div class="article"> <h2 class="title">Blog Post<span>posted 1/2/2015 by <a>User</a></span></h2> <p>Lorem ipsum dolor sit amet, ex eros epicuri elaboraret mel, ridens eruditi commune ei vim, no est possit meliore corrumpit. Saperet fabellas mea eu, quo in sanctus verterem. Et propriae inimicus deseruisse sed. Ius nulla mandamus definitionem et, forensibus conclusionemque mel ad. Duis sonet quando et sit, et omnesque fabellas concludaturque vel.</p> <p>Dicunt voluptatibus definitionem mel at, eu tritani gloriatur instructior cum. Cum id euismod luptatum, everti saperet ei nec. Vel meis brute graeci cu, nonumy officiis complectitur ei pro. An sed accumsan convenire, movet nemore ut his.</p> <p>Sit mentitum instructior ex. Exerci ornatus cum te. Zril pertinax comprehensam vel ex. Tantas lucilius antiopam sit et.</p> <p>Lorem ipsum dolor sit amet, ex eros epicuri elaboraret mel, ridens eruditi commune ei vim, no est possit meliore corrumpit. Saperet fabellas mea eu, quo in sanctus verterem. Et propriae inimicus deseruisse sed. Ius nulla mandamus definitionem et, forensibus conclusionemque mel ad. Duis sonet quando et sit, et omnesque fabellas concludaturque vel.</p> </div> </div> 

Answer 3

<div style="width:500px;">
<div style="width:100px; height:400px; float:right; border:1px solid #ccc;">&nbsp;</div>
A LOT OF TEXT
</div>