div layout - four boxes with text underneath - html

Question

I have the following code :
#pageMainContent {
margin-top: 20px;
margin-left: 40px;
width: 800px;
font-size: 16px;
line-height: 130%;
text-align: justify;
}
.pageMainContentLeft {
float: left;
width: 100px;
}
.pageMainContentRight {
width: 600px;
float: right;
margin-right: 90px;
text-align: justify;
}
.pageMainContentRight a{
color:#000000;
and code :
<div id="pageMainContent">
<div class="pageMainContentLeft" style="width:100px; height:200px; padding-top:50px"><img alt="" src="image1.png" /></div>
<div class="pageMainContentRight" style="font-size:16px; line-height:130%;"><p><span style="font-size:24px; font-weight:600; font-family:Arial;">Text </span></p>More Text.</div><br />
<div style="clear:both"></div>
<div class="pageMainContentLeft" style="width:100px; height:160px; padding-top:40px"><img alt="" src="image2.png" /></div>
<div class="pageMainContentRight" style="font-size:16px; line-height:130%;"><p><span style="font-size:24px; font-weight:600; font-family:Arial;">Text </span></p>More Text.</div><br />
<div style="clear:both"></div><br />
<div class="pageMainContentLeft" style="width:100px; height:150px; padding-top:30px"><img alt="" src="image3.png" /></div>
<div class="pageMainContentRight" style="font-size:16px; line-height:130%; text-align:justify;"><p><span style="font-size:24px; font-weight:600; font-family:Arial;">Text </span></p>More Text.</div><br />
<div style="clear:both"></div>
<div class="pageMainContentLeft" style="width:100px; height:160px; padding-top:34px"><img alt="" src="image4.png" /></div>
<div class="pageMainContentRight" style="font-size:16px; line-height:130%; margin-top:-20px"><p><span style="font-size:24px; font-weight:600; font-family:Arial;">Text </span></p>Text </span></p>More Text.</div><br />
</div>
Inside the div pageMainContent I want to display 4 pictures with text underneath (in the shape of a box). What is the correct layout in each of the four divs ?
(its left picture then text underneath then horiztonal to that picture its right picture with text underneath - drop a few spaces and repeat for 2 more boxes)
P-----------------------P
T-----------------------T
P-----------------------P
T-----------------------T
P - Picture
T - Text

Answer 1

<div class="pageMainContentLeft" style="width:100px; height:200px; padding-top:50px">
<img alt="" src="image1.png" />
<div style="width:100px;"><p>Text Here</p></div>
</div>
Also do something similar for the right div. I however recommend you restructure your code to make things easier for you.

Answer 2

<div class="sectionContainer">
<div class="entry" >
<div class="pageMainContentLeft" style="width:100px; height:200px; padding-top:50px">
<img alt="" src="img/inspire/1.jpg" />
</div>
<div class="pageMainContentRight" style="font-size:16px; line-height:130%;">
<p><span style="font-size:24px; font-weight:600; font-family:Arial;">Text </span>
</p>More Text.
</div>
</div>
<div class="entry">
<div class="pageMainContentLeft" style="width:100px; height:200px; padding-top:50px">
<img alt="" src="img/inspire/1.jpg" />
</div>
<div class="pageMainContentRight" style="font-size:16px; line-height:130%;">
<p><span style="font-size:24px; font-weight:600; font-family:Arial;">Text </span>
</p>More Text.
</div>
</div>
</div>
If you divide you code into sections, you will have more control of the code.
In my code, divs with sectionContainer class will display as rows because you will not define any floating for it in you css. So by definition, div elements are block elements and they will show as blocks, that is one on top of another.
For class entry, define a float to the left in your css and they will all be aligned from the left.
Make sure the width of .sectionContainer class is wide enough to accommodate two .entry items.

Answer 3

The main issue you had was that you mixed up which things should be left content and right content. I made a very basic method of making a box. You can format it as you wish
<div class="pageMainContentLeft">
<img alt="image1" src="image1.png" />
</div>
<div class="pageMainContentRight">
<img alt="Image2" src="image2.png" />
</div>
<div style="clear:both"></div><br />
<div class="pageMainContentLeft"><p>text</div>
<div class="pageMainContentRight"><p>text</p></div>
<div style="clear:both"></div><br />
<div class="pageMainContentLeft">
<img alt="image3" src="image3.png" />
</div>
<div class="pageMainContentRight">
<img alt="Image4" src="image4.png" />
</div>
<div style="clear:both"></div><br />
<div class="pageMainContentLeft"><p>text</div>
<div class="pageMainContentRight"><p>text</p></div>
<style>
#pageMainContent {
margin-top: 20px;
margin-left: 40px;
width: 800px;
font-size: 16px;
line-height: 130%;
text-align: justify;
}
.pageMainContentLeft {
float: left;
width: 200px;
}
.pageMainContentRight {
width: 200px;
float: right;
}
</style>