CODEWITHSUNDEEP
htmlimagealignment
Tyler Dood
Tyler Dood

Reputation: 155

Need To Align Text With Images Inside Divs

I am trying to align a header and a paragraph with the images on the page but I'm having difficulty doing so. I want two rows, each with a pictures and the things I listed above.

This is the format I want, but I can't seem to get the text that I have along side the pictures. Here is the code:

h5 {
	font-family:'Muli', sans-serif;
	font-size:26px;
	color:#00ffff;
}
p.par {
	font-family:sans-serif;
	font-size:14px;
	color:#030303;
}
.sample {
	width:250px;
	height:250px;
	
}
#bodywrap {
	width:1400px;
	margin:0 auto;
	clear:both;
}
#firstrow, #secondrow {
	width:600px;
	float:left;
	margin:50px;
}
<div id="bodywrap">
  <div id="firstrow">
    <a href="gallery.html"><img src="sample1" alt="Go To Gallery" class="sample"></a>
    <h5>Pictures</h5>
    <p class="par">
      "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt
      ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco 
      laboris nisi ut aliquip ex ea commodo consequat."
    </p>
    <a href="gallery.html"><img src="sample2" alt="Go To Gallery" class="sample"></a>
    <h5>Pictures</h5>
    <p class="par">
      "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt
      ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco 
      laboris nisi ut aliquip ex ea commodo consequat."
    </p>
  </div>
  <div id="secondrow">
    <a href="gallery.html"><img src="sample3" alt="Go To Gallery" class="sample"></a>
    <h5>Pictures</h5>
    <p class="par">
      "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt
      ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco 
      laboris nisi ut aliquip ex ea commodo consequat."
    </p>
    <a href="gallery.html"><img src="sample4" alt="Go To Gallery" class="sample"></a>
    <h5>Pictures</h5>
    <p class="par">
      "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt
      ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco 
      laboris nisi ut aliquip ex ea commodo consequat."
    </p>
  </div>	
</div>

Any help or suggestions is appreciated.

Upvotes: 0

Views: 31

Answers (1)

jmore009
jmore009

Reputation: 12923

I would wrap each content section in a container (you'll have more control down the road if you choose to adjust things) and float your a tags (since they wrap your image) to the left:

HTML

<div id="bodywrap">
  <div id="firstrow">
    <div class="wrapper">
        <a href="gallery.html"><img src="sample1" alt="Go To Gallery" class="sample"/></a>
    <h5>Pictures</h5>
    <p class="par">
      "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt
      ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco 
      laboris nisi ut aliquip ex ea commodo consequat."
    </p>
        </div>
    <div class="wrapper">
        <a href="gallery.html"><img src="sample2" alt="Go To Gallery" class="sample"/></a>
    <h5>Pictures</h5>
    <p class="par">
      "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt
      ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco 
      laboris nisi ut aliquip ex ea commodo consequat."
    </p>
      </div>
      </div>
  <div id="secondrow">
    <div class="wrapper">
        <a href="gallery.html"><img src="sample3" alt="Go To Gallery" class="sample"/></a>
    <h5>Pictures</h5>
    <p class="par">
      "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt
      ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco 
      laboris nisi ut aliquip ex ea commodo consequat."
    </p>
      </div>
    <div class="wrapper">
        <a href="gallery.html"><img src="sample4" alt="Go To Gallery" class="sample"/></a>
    <h5>Pictures</h5>
    <p class="par">
      "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt
      ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco 
      laboris nisi ut aliquip ex ea commodo consequat."
    </p>
      </div>
      </div>    
</div>

CSS

h5 {
   font-family:'Muli', sans-serif;
   font-size:26px;
   color:#00ffff;
   padding: 0; //clear default
   margin: 0; //clear default
}

.wrapper{ 
   overflow: hidden; //clears the float
   margin-bottom: 20px;
}

a{
   float: left;
   margin-right: 15px;
}

FIDDLE

Upvotes: 1

Related Questions