aligning images and text to the middle

andrew_staples

07-29-2012, 08:03 PM

hello,

I'm quite new to HTML and CSS and I'm trying to achieve something but I am having trouble.
This is what I am trying to do:
http://i.imgur.com/iqyhG.png
And this is what I have got and I am stuck:(:
http://i.imgur.com/FLaFF.png
Here is my code:

<div class="grid_1">
<h2>
<img src="images/whatido.png" alt="What I do" />
What I Do?
<br />
<span>Lorem ipsum dolor sit amet consectetur</span>
</h2>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam eget mi eu quam varius accumsan. Praesent vitae tellus non elit bibendum luctus. Pellentesque fermentum blandit
</p>
<ul>
<li>List 1</li>
<li>List 2</li>
<li>List 3</li>
<li>List 4</li>
<li>List 5</li>
</ul>
</div>

<div class="grid_1">
<h2>
<img src="images/myportfolio.png" alt="My Portfolio" />
My Portfolio
<br />
<span>Lorem ipsum dolor sit amet consectetur</span>
</h2>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam eget mi eu quam varius accumsan. Praesent vitae tellus non elit bibendum luctus. Pellentesque fermentum blandit
</p>

</div>

<div class="grid_2">
<h2>
<img src="images/isocialize.png" alt="I Socialize" />
I Socialise
<br />
<span>Lorem ipsum dolor sit amet consectetur</span>
</h2>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam eget mi eu quam varius accumsan. Praesent vitae tellus non elit bibendum luctus. Pellentesque fermentum blandit
</p>
<div class="social_icons">
<a href="#" title="Twitter"><img src="images/twitter.png" alt="Twitter" />Twitter</a>
<a href="#" title="Twitter"><img src="images/flickr.png" alt="Flickr Group" />Flickr Group</a>
<a href="#" title="Twitter"><img src="images/digg.png" alt="Digg" />Digg</a>
<a href="#" title="Twitter"><img src="images/rss.png" alt="RSS Subscribe" />RSS Subscribe</a>
<a href="#" title="Twitter"><img src="images/skype.png" alt="Skype" />Skype</a>
<div class="clear"></div>
</div>
</div>

.grid_1{
float: left;
width: 33%;
margin: 0 20px 20px 60px;
padding: 0 20px 20px 0px;
font-size: 14px;

}

.grid_2{
float: right;
width: 23%;
}

Clearly I need to add more CSS but I don't know how to go about it. Could someone help me out here?

Many Thanks

Andy

DrDOS

07-29-2012, 09:45 PM

To line up three divs in a row, you set their widths to slightly less than 1/3 the width of their container ( to allow for borders, margins etc. ) and float them all left, or right, but the page is built from left to right so left is the usual.

tempz

07-29-2012, 09:56 PM

Here ya go.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>What I Do</title>
<style type="text/css">
* {
margin:0;
padding:0;

}
.grid_1{
float: left;
width: 20%;
margin: 0 20px 20px 60px;
padding: 0 20px 20px 0px;
font-size: 14px;
display:inline;

}

.grid_3{
float:left;
width:20%;
}

.grid_2 {
float: left;
margin: 0 20px 20px 2px;
padding: 0 20px 20px 0px;
font-size: 14px;
display: inline;
width:20%;
}
.title {
font-size:30px;
font-weight:900;
}
.under-title {
padding:0px 0px 20px 0px;
font-weight:bold;

}
.sector-container .title-img {
height:42px;
width:38px;
position:relative;
left:0;
top:20px;

}
.sector-container .under-title {
position:relative;
left:43px;
}
ul.grid-1-list li:before{ content:"-"; position:relative; left:-5px; list-style-type:none; float:left; display:inline;}
ul.grid-1-list li {
list-style-type:none;
position:relative;
top:15px;
left:10px;

}
ul.grid-2-list li:before{ content:"-"; position:relative; left:-5px; list-style-type:none; float:left; display:inline;}
ul.grid-2-list li {
list-style-type:none;
position:relative;
top:-70px;
left:150px;
}
.grid-2-img img {
height:200px;
width:300px;

}
.social_icons {
padding:20px 0;
}
.social_icons img {
width:25px;
height:25px;
padding:0px 20px 0 10px;

}
.social_icons a {
padding:20px 0;

}

</style>
</head>

<body>
<div class="sector-container">
<div class="grid_1" style="width: 20%">
<img src="images/whatido.png" alt="What I do" class="title-img" />
<span class="title">What I Do?</span>
<br />
<p class="under-title">Lorem ipsum dolor sit amet consectetur</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam eget mi eu quam varius accumsan. Praesent vitae tellus non elit bibendum luctus. Pellentesque fermentum blandit
</p>
<ul class="grid-1-list">
<li>List 1</li>
<li>List 2</li>
<li>List 3</li>
<li>List 4</li>
<li>List 5</li>
</ul>
<ul class="grid-2-list">
<li>List 1</li>
<li>List 2</li>
<li>List 3</li>
<li>List 4</li>
<li>List 5</li>
</ul>

</div>

<div class="grid_2" style="width: 20%; height: 213px">

<img src="images/myportfolio.png" alt="My Portfolio" class="title-img" />
<span class="title">My Portfolio</span>
<br />
<p class="under-title">Lorem ipsum dolor sit amet consectetur</p>

<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam eget mi eu quam varius accumsan. Praesent vitae tellus non elit bibendum luctus. Pellentesque fermentum blandit
</p>
<span class="grid-2-img">
<img src="http://www.comparecarinsurancequotes.co.uk/wp-content/uploads/2011/12/sports-car-insurance.jpg" height="228"/>

</span>

</div>
<div class="grid_3">
<img src="images/isocialize.png" alt="I Socialize" class="title-img" />
<span class="title"> I Socialise</span>
<br />
<p class="under-title">Lorem ipsum dolor sit amet consectetur</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam eget mi eu quam varius accumsan. Praesent vitae tellus non elit bibendum luctus. Pellentesque fermentum blandit
</p>
<div class="social_icons">
<table style="width: 100%; height: 180px;" class="social-links">
<tr>
<td style="height: 59px"><a href="#" title="Twitter"><img src="images/twitter.png" alt="Twitter" /></a></td>
<td style="height: 59px"><a href="#" title="Twitter">Twitter</a> </td>
<td style="height: 59px"><a href="#" title="Twitter"><img src="images/flickr.png" alt="Flickr Group" /></a></td>
<td style="height: 59px"><a href="#" title="Twitter">Flickr Group</a> </td>
</tr>
<tr>
<td style="height: 64px"><a href="#" title="Twitter"><img src="images/digg.png" alt="Digg" /></a></td>
<td style="height: 64px"><a href="#" title="Twitter">Digg</a> </td>
<td style="height: 64px"><a href="#" title="Twitter"><img src="images/rss.png" alt="RSS Subscribe" /></a></td>
<td style="height: 64px"><a href="#" title="Twitter">RSS Subscribe</a> </td>
</tr>
<tr>
<td><a href="#" title="Twitter"><img src="images/skype.png" alt="Skype" /></a></td>
<td><a href="#" title="Twitter">Skype</a> </td>
<td></td>
<td>Youtube</td>
</tr>
</table>
<div class="clear"></div>
</div>
</div>
</div>
</body>

</html>

andrew_staples

07-30-2012, 03:16 PM

Oh wow thanks tempz that helped out a lot. Much appreciated.
and thanks for your advice DrDOS :)

Major Payne

07-30-2012, 03:59 PM

You don't always have to float every div left to align them side by side. Left div can be floated left, right div right, and the center div can even be centered. It's a matter of the proper main div container's width and all the the floated/centered div widths with attention paid to any margins/paddings. Also, since floats are removed from the normal document flow, you should place the left/right floated HTML code first within their container div then the center one last. I've already done this many times so I know it can be done.

Using images with center div not floated, but centered (http://pastebin.com/iCMCy2fw)

All divs floated left (http://paynelessdesigns.pastebin.com/f3dce4319)

Misplaced the one I actually wanted to link to.