Floating images left - html

Question

i'm a little rusty on html and css and i cant get 2 images to float, one on top of the other. heres the code...
<div class="kbody">
<img class="kimg1" src="img1.jpg" alt=" " width="375px" height="auto">
<div id="ktxt">
<p>&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp
Kristallnacht occurred on November 9-10, 1938. Also known as the night of
broken glass, it was an organized attack on the Jews. Hitler had Nazis all over
Germany and Austria that burned synagogues, broke store windows, stole from the
stores, killed a couple dozen Jews, and arrested twenty thousand more. A few days
later Germany made an &quotatonement fine&quot that added up to over one billion dollars
and placed it on the remaining Jews. </p>
</div>
<img class="kimg2" src="img3.jpg" alt=" " width="375px" height="auto">
</div>
and the css...
.kbody {
width:800px;
margin-left: auto;
margin-right: auto;
/*border-style:solid;
border-width:3px;*/
}
.kimg1 {
padding-left:5px;
padding-top:5px;
padding-bottom:5px;
float:left;
}
.kimg2 {
padding-left:5px;
padding-top:5px;
padding-bottom:5px;
float:left;
margin-top:10px;
}
#ktxt {
padding-left:10px;
padding-right:10px;
padding-top:10px;
/*border-width:2px;
border-style: solid;*/
width:350px;
height:330px;
margin-left:402px;
font-style:arial, sans-serif;
color: #336699;
font-size:14pt;
}
what am i doing wrong??
heres what it looks like with this code
http://imgur.com/a/ivDE2#0

Answer 1

To move the second image under the first:
.kimg2 {
clear: both;
}

Answer 2

<div class="kbody">
<img class="kimg1" src="img1.jpg" alt=" " width="375px" height="auto">
<div id="ktxt">
<p>&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp
Kristallnacht occurred on November 9-10, 1938. Also known as the night of
broken glass, it was an organized attack on the Jews. Hitler had Nazis all over
Germany and Austria that burned synagogues, broke store windows, stole from the
stores, killed a couple dozen Jews, and arrested twenty thousand more. A few days
later Germany made an &quotatonement fine&quot that added up to over one billion dollars
and placed it on the remaining Jews. </p>
</div>
<img class="kimg2" src="img3.jpg" alt=" " width="375px" height="auto">
<div style="clear:both"></div>
</div>

Answer 3

Put a clearfix between the elements you want to show them in separate lines. I would write a global css rule like .clearfix { clear: both; } and put a div before the second image;
Instead of writing bunch of use CSS text-indent property;
Sample Code:
<div class="kbody">
<img class="kimg1" src="img1.jpg" alt=" " width="375px" height="auto">
<div id="ktxt">
<p>
Kristallnacht occurred on November 9-10, 1938. Also known as the night of
broken glass, it was an organized attack on the Jews. Hitler had Nazis all over
Germany and Austria that burned synagogues, broke store windows, stole from the
stores, killed a couple dozen Jews, and arrested twenty thousand more. A few days
later Germany made an &quotatonement fine&quot that added up to over one billion dollars
and placed it on the remaining Jews.
</p>
</div>
<div class="clearfix"></div>
<img class="kimg2" src="img3.jpg" alt=" " width="375px" height="auto">
</div>

Answer 4

try to wrap your image
html
<div class="kbody">
<div class="imageWrapper">
<img class="kimg1" src="img1.jpg" alt=" " width="375px" height="auto" />
<img class="kimg2" src="img3.jpg" alt=" " width="375px" height="auto" />
</div>
<div id="ktxt">
<p>&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp
Kristallnacht occurred on November 9-10, 1938. Also known as the night of
broken glass, it was an organized attack on the Jews. Hitler had Nazis all over
Germany and Austria that burned synagogues, broke store windows, stole from the
stores, killed a couple dozen Jews, and arrested twenty thousand more. A few days
later Germany made an &quotatonement fine&quot that added up to over one billion dollars
and placed it on the remaining Jews. </p>
</div>
</div>
css
.imageWrapper {
float:left;
width:375px;
}
hope this help you

Answer 5

easier way is <img src="yourimage.jpg" align="left" />

Answer 6

As you want your picture to be floated to left side is not possible as you do. So, you should define your html alternatively for what you want as..
<div class="kbody">
<div class="kimg">
<img ..image1../>
<img ..image2../>
</div>
<div id="ktext">your text...</div>
</div>
Now define the css.
hints:
.kimg{width: 300px;}
#ktext{width: 300px;}