How can I place header and text next to my img?

Viewed 28

I want to add 4 images to Blog(2 columns and each one has 2 images with its header and description) of my site want to place its header and paragraph on right side of it, how can I do that? here is my css and html code:

<section id="part2">
         <div class="container">
             <h1>Blog</h1>
             <div class="box">
                 <img src="images/img1-service.jpg" width='255' height="175"/>
                 <h3>10 RULES TO BUILD A WILDLY</br> SUCCESSFUL BUSINESS</h3>
                 <p>You can edit all of this text and</br> replace it with anything you have</br> to say on your blog.</p>
             </div>

             <div class="box">
                 <img src="images/img2-service.jpg" width='255' height="175"/>
                 <h3>9 STEPS TO STARTING A</br> BUSINESS</h3>
                 <p>This is a generic blog article you</br> can use for adding blog content /</br> subjects on your website.</p>
             </div>
         </div>
     </section>

there should be 4 photos,i haven't add them yet and my css:

body{
    margin: 0;
    padding: 0;
}

.container{
    margin:auto;
    overflow:hidden;
}

#part2 h1{
    text-align:center;
    font-size:250%;
}

.box{
    display: inline;
    text-align:center;
    float:left;
    padding:10px;
    width:30%;
    width: 33.3%;
}
1 Answers

If wrapping your text around your image is what you intend, add float to image

 img{
       float: left;
    {

instead, add a class to image to avoid conflict with other images

Related