<!doctype html>
<html>
<head>
<style type="text/css">
.news {
background-color: gray;
border: solid 1px black;
width: 500px
}
.news img {
float: left;
}
.news p {
float: right;
}
.clear {
clear: both;
}
</style>
</head>
<body>
<div class="news">
<img src="http://images-fast.digu365.com/square/48/a0c7dcda96749c2e9fad00a29c16f794_0012.jpg" alt="my pic"/>
<p>Some text</p>
<br class="clear"/>
</div>
</body>
</html>
<!doctype html>
<html>
<head>
<style type="text/css">
.news {
background-color: gray;
border: solid 1px black;
float: left;
}
.news img {
float: left;
}
.news p {
float: right;
}
</style>
</head>
<body>
<div class="news">
<img src="http://images-fast.digu365.com/square/48/a0c7dcda96749c2e9fad00a29c16f794_0012.jpg" alt="my pic"/>
<p>Some text</p>
lll
</div>
</body>
</html>
<!doctype html>
<html>
<head>
<style type="text/css">
.news {
background-color: gray;
border: solid 1px black;
width: 500px
}
.news img {
float: left;
}
.news p {
float: right;
}
.clear:after{
content: ".";
height: 0;
visibility: hidden;
display: block;
clear: both;
}
</style>
</head>
<body>
<div class="news clear">
<img src="http://images-fast.digu365.com/square/48/a0c7dcda96749c2e9fad00a29c16f794_0012.jpg" alt="my pic"/>
<p>Some text</p>
</div>
</body>
</html>
