I'm attempting to position two divs next to each other. The first item should have an image on the left and text on the right. The second item should have text on the left and an image on the right. And for the third item, there should be an image on the left and text on the right.
It's working as expected for the first and third items, but the alignment is off for the second item. What am I doing incorrectly?
<!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>Untitled Document</title>
<style type="text/css">
.container {
padding: 5px;
background-color:#66C;
}
.imageContainer {
margin: 0 25px 0 0;
float: left;
height: 301px;
width: 301px;
background-color:#0CC;
position:absolute;
margin-bottom: 50px;
}
.imageContainerRt {
margin: 0 0 0 0px ;
float: left;
height: 301px;
width: 301px;
background-color:#0CC;
margin-bottom: 50px;
}
.text {
height: 301px;
padding: 5px 5px 0 0;
background-color:#C96;
margin-left:321px;
margin-bottom: 50px;
}
.text2 {
height: 301px;
padding: 5px 5px 0 0;
background-color:#C96;
margin-right:301px;
margin-bottom: 50px;
}
</style>
</head>
<body>
<!-- First -->
<div class="container">
<div class="imageContainer"><img alt="It takes a winning strategy to achieve business success" src="http://market-velocity.com/wp-content/uploads/2013/07/strategy400x400-300x300.jpg" width="300" height="300" /></div>
<div class="text">
<h5><span style="color: #66448a;">It takes a winning strategy to achieve business success</span></h5>
Market-Velocity helps companies map their destination and guides them for a strong competitive advantage.
The way most companies talk to the market is ineffective. We utilize Strategy Drivers to help your team clearly differentiate you from your competition. We take a close look at what you are saying to your clients and prospects and how your brand affects lead generation and business development.
<h6><span style="color: #666666;">Strategy Drivers</span></h6>
<ul class="insideBullet">
<li><strong>Navigate</strong> – mapping your core identity and differentiation that is compelling to your clients</li>
<li><strong>Advance</strong> – defining the perception that you want others to have about your company</li>
<li><strong>Arrive</strong> – developing your messages and fostering the culture of being relentless in your pursuit</li>
</ul>
</div>
<!-- Second -->
<div class="text2">
<h5><span style="color: #66448a;">It takes a winning strategy to achieve business success</span></h5>
Market-Velocity helps companies map their destination and guides them for a strong competitive advantage.
The way most companies talk to the market is ineffective. We utilize Strategy Drivers to help your team clearly differentiate you from your competition. We take a close look at what you are saying to your clients and prospects and how your brand affects lead generation and business development.
<h6><span style="color: #666666;">Strategy Drivers</span></h6>
<ul class="insideBullet">
<li><strong>Navigate</strong> – mapping your core identity and differentiation that is compelling to your clients</li>
<li><strong>Advance</strong> – defining the perception that you want others to have about your company</li>
<li><strong>Arrive</strong> – developing your messages and fostering the culture of being relentless in your pursuit</li>
</ul></div>
<div class="imageContainerRt"></div>
<!-- Third -->
<div class="imageContainer"><img alt="It takes a winning strategy to achieve business success" src="http://market-velocity.com/wp-content/uploads/2013/07/strategy400x400-300x300.jpg" width="300" height="300" /></div>
<div class="text">
<h5><span style="color: #66448a;">It takes a winning strategy to achieve business success</span></h5>
Market-Velocity helps companies map their destination and guides them for a strong competitive advantage.
The way most companies talk to the market is ineffective. We utilize Strategy Drivers to help your team clearly differentiate you from your competition. We take a close look at what you are saying to your clients and prospects and how your brand affects lead generation and business development.
<h6><span style="color: #666666;">Strategy Drivers</span></h6>
<ul class="insideBullet">
<li><strong>Navigate</strong> – mapping your core identity and differentiation that is compelling to your clients</li>
<li><strong>Advance</strong> – defining the perception that you want others to have about your company</li>
<li><strong>Arrive</strong> – developing your messages and fostering the culture of being relentless in your pursuit</li>
</ul>
</div>
</div></div>
</div>
</body>
</html>