Skip navigation
bobobobcat
Currently Being Moderated

Align images right next to text

Mar 27, 2013 3:34 AM

Hi,

 

Please can you show me how I align an image next to my paragraph text? When I try and add this using a paragraph class and aligning the image right, it pushes the Aside over to the right. thanks

 

<code>

/* -- RESET BROWSER DEFAULTS -- */
* {
margin: 0;
padding: 0;
}

/* -- COMMON HTML ELEMENTS -- */
body {
color: #333;
font-size: 14px;
}
ul {
list-style: none;
}
#clear {
clear: both;
display: block;
}

/* -- MAIN ELEMENTS -- */
#cover {
margin: 0 auto;
width: 760px;
border: 1px solid #ddd;
}
header, article, section, aside, footer {
display: block;
}

/* -- Header -- */
header {
background: #888;
padding: 20px;
}

/* -- Navigation */
nav {
width: 100%;
}
nav ul li {
float: left;
padding-right: 15px;
}

/* Content */
#content {
background: #eee;
padding: 20px;
}
section {
clear: both;
width: 580px;
float: left;
margin-right: 18px;
margin-top: 20px;
border-right: 2px solid #ddd;
}
article {
border-bottom: 2px solid #ddd;
margin-bottom: 20px;
padding: 0 0 10px;
}
aside {
margin-top: 20px;
float: right;
width: 120px;
}

/* Footer */
footer {
clear: both;
text-align: center;
padding: 20px;
background: #888;
}

 

</code>

 

html

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Simple HTML 5 Template</title>
<link rel="stylesheet" type="text/css" href="style.css">
<script src="html5shiv.js" ></script>
</head>
<body>
<div id="cover">
  <header>
   <h1>Simple HTML 5 Template</h1>
  </header>
 
  <div id="content">
   <nav>
    <ul>
     <li><a href="#">Home</a></li>
     <li><a href="#">About</a></li>
     <li><a href="#">Blog</a></li>
     <li><a href="#">Contact</a></li>
    </ul>
   </nav>
  
   <section>
    <article>
     <h2>Sample Post 1</h2>
     <p class="body">Torquent rutrum pulvinar varius taciti debitis, dolore ipsa? Exercitation, nascetur natoque fugiat, erat blanditiis molestiae, neque occaecati optio, rem iaculis, ipsa donec est luctus, possimus vitae tortor nam, ducimus fermentum! Esse non nisi erat voluptatibus dignissim? Doloribus fusce malesuada, aliquam quos incidunt.  <img border="0" src="images/mountain3.jpg" alt="Mountain" width="200" height="150" class="align-right" /></p>
    </article>
   
    <article>
     <h2>Sample Post 2</h2>
     <p>Torquent rutrum pulvinar varius taciti debitis, dolore ipsa? Exercitation, nascetur natoque fugiat, erat blanditiis molestiae, neque occaecati optio, rem iaculis, ipsa donec est luctus, possimus vitae tortor nam, ducimus fermentum! Esse non nisi erat voluptatibus dignissim? Doloribus fusce malesuada, aliquam quos incidunt. Beatae tempore hic voluptatem irure litora feugiat mollit deleniti pulvinar netus fugiat, leo, ex iusto nunc pede quisquam, fusce unde eius iste, facilis nascetur imperdiet ipsum earum auctor elementum, minima! Suspendisse pede nonummy. Eum, tenetur justo placerat pellentesque explicabo mollis, volutpat facilisis eget conubia! Dis distinctio quas interdum! Do mi velit mi et pariatur, senectus corrupti minim, dignissimos.</p>
    </article>
   </section>

   <aside>
    <h3>Some Links</h3>
    <ul>
     <li><a href="#">Link 1</a></li>
     <li><a href="#">Link 2</a></li>
     <li><a href="#">Link 3</a></li>
     <li><a href="#">Link 4</a></li>
     <li><a href="#">Link 5</a></li>
    </ul>
   </aside>
  
   <div id="clear"></div>
  </div>

  <footer>
   <p>&copy; Simple HTML 5 Template. All rights reserved.</p>
  </footer>
</div>
<body>
</html>

 
Replies

More Like This

  • Retrieving data ...

Bookmarked By (0)

Answers + Points = Status

  • 10 points awarded for Correct Answers
  • 5 points awarded for Helpful Answers
  • 10,000+ points
  • 1,001-10,000 points
  • 501-1,000 points
  • 5-500 points