CSS: automatically sizing a image based on its dimensions, and having similar div fill the gap

Question

I have a question pertaining to CSS and HTML. I currently am building an article template, and am a little stumped on one aspect.

I plan to have a picture on one side, and have a text box of the same height on the opposite side. Both are surrounded with div tags as seen in the source following.

<!--begin article-->        
<div id="article">
    <div id="article_header">           
        Title goes here     
    </div>      
    <div id="article_body">
        <!-- begin text. used for actual text of article-->
        <div id="text">
            Text Goes here              
        </div>          
        <!-- end text-->            
        <!-- begin article media. used for pictures -->
        <div id="article_media">
            <img src="source_goes_here" alt="This is an image!">
        </div>
    </div>
</div>

And the CSS...

#article{
    border:1px solid gold;
    margin-bottom:20px;
}    
#article_header{
    padding:5px;
    font-family:arial;
    font-size:36px;
    font-style:bold;
    color:white;
    background:url('orangegradiant.png');
}
#article_body{
    padding:5px;
    display:inline-block;
    width:auto;
}
#article_media{
    border: 1px solid pink;
    text-align:center;
    display:block;
    width:48%;
    height:48%;
}
#text{
    display:block;
    width:51%;
    float:right;
}

I know I probably over div at times, but I have been toying with this for about an hour and have hit a brick wall. I have the layout set, or so it would seem, by using the float property. The question is how do I get the image div to dynamically change, and have the text div go up or down in size based on the size of the image? Is there a way to set a ceiling for the image size? I would like to see the image be no bigger than about 50% of the div, that way massive images don't skew everything out of proportion.

Any help is greatly appreciated!

P.S. apologies for any code formatting issues. I am still trying to get everything figured out on that front.

Answer 1

Add to your CSS

#article_media img { max-height:50%; }

Or if you want the containing div itself

#article_media { max-height:50%; }