Responsive layout, scaling image in a nested div - html

Question

i'm new to coding, but i'm trying hard. There's a thing i still fully don't understand. Div inside a div/image scaling and positioning with bootstrap. I'm trying to make a responsive website and need some help with the layout.
Here's the HTML code i have:
<div class="container">
<!-- Pagrindinis divas -->
<div id="left_bar" class="col-md-8">
<div id="image_div">
<div ><img src="http://placehold.it/120x100"/></div>
</div>
<div id="text_div">
<div id="heading_text">
Heading 1
</div>
<div id="text" class="p">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur quis odio a sem hendrerit consectetur. Quisque feugiat eget urna vel consectetur. Curabitur gravida lacus quis consectetur suscipit. Etiam a nulla quis lacus bibendum convallis. Mauris dignissim commodo felis quis semper.
</div>
</div>
</div>
</div>
<!-- Soninis widgetas -->
<div id="right_bar" class="col-md-4 hidden-sm hidden-xs">
Right bar
</div><!-- Soninio widgeto pabaiga -->
</div>
Here's an image
As the website scales down i want the image and the orange div to scale down too.
fiddle link

Answer 1

Explanation
The key to make the image scale is to set the width of it to 100%, as I did under #image_div img. This way it will take on the width of it's parent container.
Then you just have to make sure the parent container is fluid. In my example I made it 80%. This way it will always be 80% of the browser width, or the parent width - depending if it's wrapperd in another div.
When the 80% container scales because the img is set to 100% it will always occupy 100% of the 80% container.
Hope that help clear things up.
Additional Resources
If you're interested in learning more about responsive this book won't disappoint. Super quick read and it'll answer all of your questions on responsive:
http://www.abookapart.com/products/responsive-web-design
The Example Code + JSFiddle
Here's an example of what you're looking for: http://jsfiddle.net/f25xM/1/
HTML
<div class="cf wrapper">
<div class="container">
<!-- Pagrindinis divas -->
<div id="left_bar" class="cf col-md-8">
<div id="image_div">
<img src="***" />
</div>
<div id="text_div">
<div id="heading_text">Heading 1</div>
<div id="text" class="p">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur quis odio a sem hendrerit consectetur. Quisque feugiat eget urna vel consectetur. Curabitur gravida lacus quis consectetur suscipit. Etiam a nulla quis lacus bibendum convallis. Mauris dignissim commodo felis quis semper.</div>
</div>
</div>
</div>
<!-- Soninis widgetas -->
<div id="right_bar" class="col-md-4 hidden-sm hidden-xs">Right bar</div>
<!-- Soninio widgeto pabaiga -->
</div>
CSS
body {
margin:0;
padding:0;
}
.wrapper {
background:red
}
.container {
background:red;
width:80%;
}
#left_bar, #right_bar {
float:left;
}
#left_bar {
background:green;
}
#right_bar {
background:purple;
width:20%;
}
#image_div, #text_div {
float:left;
}
#image_div {
background:orange;
width:20%;
}
#image_div img {
width:100%;
}
#text_div {
background:yellow;
width:80%;
}
/* Clearfix */
.cf:before, .cf:after {
content:" ";
/* 1 */
display: table;
/* 2 */
}
.cf:after {
clear: both;
}

Answer 2

I'm not sure why you have a div inside of "image_div" but you can just set the width of the image to 100%. and that way when the container div resizes, the image will also resize. Not sure if that makes sense, its hard to help you without some of your css or a fiddle or codepen.

Answer 3

In Bootstrap3 you can just add class="img-responsive" to make it 100% of the parent element.