floating 2 divs

MediaSvcsUnlimited · January 30, 2016

Hi, floating elements has always been a struggle for me and I can't figure out how to align the portfolio samples horizontally on http://mediaservicesunlimited.com/marketing-services.php. Can I please get some help?

<?php
require_once('functions.php');
?>
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>marketing services for small businesses </title>
<link href="MSU.css" rel="stylesheet" type="text/css">
<link href='https://fonts.googleapis.com/css?family=Satisfy' rel='stylesheet' type='text/css'>
<style type="text/css">
article {
	width: 80%;
	background-color: #FFFFFF;
	margin-left: auto;
	margin-right: auto;
	padding: 2%;
	}
	#mainContent {
		background-color:#284a50;
 		width:100%;
		padding-top:2%;
		padding-bottom:2%;
	}
h3 {
	color:#284a50;

}
.portfolioHeading {
	font-family:'satisfy', cursive;
	color: #419DAF;
	margin-left:5%;
}
.samples {
	background-color: #419DAF;
	width: 150PX;
	height: 150px;
/*	float:left;
	margin-right:5%; */
}

.samples:hover {
	top: 0px;
	bottom: 0px;
}
.samples p {
	visibility:hidden;
}
.samples:hover p {
	visibility:visible; 
}
h5 {
	margin-bottom:0%;
	margin-top:0%;  
	color:#FFFFFF; 
}
.portfolioSamples {
/*	margin-left:10%; */
}
footer {
	clear:both; 
}
#marketingPortfolio {
	float:left; 
}
#websitePortfolio {
/*	float:right;*/
}
</style>
</head>
<body>
<?php logoMenu();?>
<div id="mainContent">
<article>
<h3> Quality Marketing Services </h3>
Running an organization, of any size is rough, but it's especially hard for small businesses and non-for-profits.  As the leader, you wear so many hats!  You are the salesperson, producer of the product, and sometimes you have to do all the marketing work as well.  Wouldn't it be nice if you could hand off the marketing tasks to someone else, without having to do  them and/or hiring a full-time marketing staff?  <br /><br />Well, fortunately there is!  Media Services Unlimited is a full-service marketing and creative company specifically geared towards small businesses and non-for-profits.  We handle all the marketing tasks, so you can focus on producing high-qualiy products, pleasing your consumers, and growing your organization!  
</article>
</div>
<div id="marketingPortfolio">  
<h3 class="portfolioHeading">Marketing Portfolio </h3>
<div class="portfolioSamples">
<article class="samples" style="float:left; margin-left:10%;" >
 <h5>Marketing Material Sample </h5><A HREF="assets/murder_mystery_invite.jpg">
<IMG HEIGHT="150" WIDTH="150" SRC="assets/murder_mystery_invite.jpg"></A><p class="description">The design of this invitation was created using Adobe InDesign. Click on the image to see the front and back of the invitation.    
</p>
</article>
<article class="samples" style="float:left"; >
<h5>Press Release Sample </h5>
<a href="assets/Benefit_Dinner_Press_Release.jpg"> <img height="150" width="150" src="assets/Benefit_Dinner_Press_Release.jpg"></a><p class="description">This press release announced Helping Hands annual benefit dinner.  </p>
</article>
</div>
</div>
<div id="websitePortfolio">   
<h3 class="portfolioHeading">Website Portfolio </h3>
<div class="portfolioSamples">
<article class="samples" style="float:right"; >
<a href="assets/Helping_Hands_Website_Screenshots.jpg"><img height="150" width="150" src="assets/Helping_Hands_Website_Screenshots.jpg"></a>
</article>
</div> 
<article class="samples" style="float:right";> 
<a href="assets/auntievics.jpg"><img height="150" width="150" src="assets/auntievics.jpg"></a>
<span><a href="auntievics.com" target="_blank">Auntie Vics</a></span>
</article>  
</div>   
<?php footer();?>
</body>
</html>

Sign In

floating 2 divs

Recommended Posts

MediaSvcsUnlimited

Link to comment

Share on other sites

Join the conversation

Browse

Activity

Important Information