In answer to your questions, and trying not to do your assignment for you:
- Yes, the header is outside the 'list' of items which is good. Do you need the
<div id="newsListHeader">
container though? - A list would be better, try it and see how you get on (
<ul><li class="newsListItem">News item here</li></ul>
). - This can be tricky at first and there's many ways of doing it (css html news list creation little help please). My preferred technique if I know the width of the image, is to add a padding to the
.newsItemContainer
and then negatively margin back the image by the same width. That means that the text will always line up along that padding line.
Code snippet:
.newsListItem {
padding-left: 115px;
}
.newsListItem img {
float: left;
width: 100px;
/* Added */
margin-left: -115px;
/* SAME AS PADDING ABOVE */
}
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>JS Bin</title>
</head>
<body>
<div class="newsListItem">
<img src="http://placehold.it/100x75" width="100" height="75">
<h2> Lorem Ipsum is simply dummy text of the printing and typesetting industry. </h2>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
</div>
<div class="newsListItem">
<img src="http://placehold.it/100x75" width="100" height="75">
<h2> Lorem Ipsum is simply dummy text of the printing and typesetting industry. </h2>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
</div>
</body>
</html>