<body>
<header>
<h1>Two Pics On The Right</h1>
</header>
<article id="main">
<aside> <!-- you want to put this inside the area containing the paragraph text and it probably needs to come first -->
<figure><img src="pic1.jpg"></figure>
<figure><img src="pic2.jpg"></figure>
</aside>
<p>Lorem ipsum dolor...</p>
<p>Nullam ac massa orci...</p>
<p>Maecenas dolor odio, tempor at varius vitae...</p>
</article>
</body>html, body {
width: 100%;
margin: 0 auto;
font-size: 62.5%;
color: #000000;
font-family: Helvetica, sans-serif;
background-color: #dddddd;
}
h1 {
font-size: 10em;
text-align: center;
}
p {
font-size: 2.2em;
text-align: left;
line-height: 2.2em;
margin: 0 0 2% 0;
}
header {
position: relative;
float: left;
width: 100%;
background: #ffffff;
padding: 2%;
}
article#main {
width: 100%; /* this makes the text take up the entire browser width, effectively forcing wrap-around of the images to come later */
position: relative;
float: left;
padding: 2%; /* just to give a little breathing room from the edges of the browser window */
}
aside {
width: 46%; /* this will set the image container to occupy 46% of the available browswer width */
min-width: 15%; /* this sets a lower bounds on the width of the 'aside' portion of the page */
margin: 0 2%; /* again, this is just to neaten things up. top-bottom is zero and left-right is 2% */
position: relative;
float: right; /* floating this so it sticks page right */
}
figure img {
width: 100%; /* sets the image to use 100% of its size. original image is 400x600px */
min-width: 10%; /* sets lower bounds to the image to keep it somewhat viewable */
padding: 2%; /* pad all four edges of the images */
}
