Question

I have the following HTML file:

<!-- this is column 1 -->
<div class="repairGuruBoxRC">
    <p>Hi</p>
    <p>hello</p>
</div>
<img src="http://www.google.com" />

<!-- this is column 2 -->
<div class="repairGuruBoxRC">
    <p>Hi</p>
    <p>hello</p>
</div>
<img src="http://www.google.com" />

<!-- this is column 3 -->
<div class="repairGuruBoxRC">
    <p>Hi</p>
    <p>hello</p>
</div>
<img src="http://www.google.com" />

and so on..

How do I style this so I have the div/img combination split into 3 columns instead of just one column? And instead of the text (<p>'s>) above the image, how do I change it so that the texts are on the right side of the image? So in the end, it’s like I have 6 columns, 3 of which are images and 3 are texts.

Answer 1

Like this :

<style type="text/css">
.column, .repairGuruBoxRC, .image {float:left;}
.column {width:200px;}  /* not essential, a div will expand to the size of the content inside it */
.repairGuruBoxRC, img.image{
    width:100px;
    height:100px;
}

</style>

<!-- this is column 1 -->
<div class="column">
<img class="image" src="http://www.google.com"/>
<div class="repairGuruBoxRC">
    <p>Hi</p>
    <p>hello</p>
</div>
</div>

<!-- this is column 2 -->
<div class="column">
<img class="image" src="http://www.google.com"/>
<div class="repairGuruBoxRC">
    <p>Hi</p>
    <p>hello</p>
</div>
</div>

<!-- this is column 3 -->
<div class="column">
<img class="image" src="http://www.google.com"/>
<div class="repairGuruBoxRC">
    <p>Hi</p>
    <p>hello</p>
</div>
</div>

You might want to check out the css float property