Help - Search - Members - Calendar
Full Version: float problems
HTMLHelp Forums > Web Authoring > Cascading Style Sheets
MindyT


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?


CODE

<?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">  
<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>  
<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:left"; >
<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>


pandy
I don't understand the structure of this. It isn't consistent.
MindyT
I want the marketing portfolio and website portfolio in a horizontal line. Does that help?
MindyT
I'm closer than I was but the website portfolio still isn't horizontal with the marketing portfolio. What am I doing wrong?
CODE

<?php
require_once('functions.php');
?>
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>marketing services for small businesses </title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="keywords" content="marketing services,advertising agency,  marketing creations ">
<meta name="description" content="If you are a small business or a nonprofit organization needing assistance with your marketing activities, we're here to help!  We are highly skilled in social media management, marketing material creation and so much more!  ">
<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: 160PX;
    height: 150px;
}

.samples:hover {
    top: 0px;
    bottom: 0px;
}
.samples p {
    visibility:hidden;
}
.samples:hover p {
    visibility:visible;
}
h5 {
    margin-bottom:0%;
    margin-top:0%;  
    color:#FFFFFF;
}
footer {
    clear:both;
}
#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">  
<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"  >
<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:left"; >
<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" >
<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>  
<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>
Frederiek
I think you should start by reading tutorials on floats :
- http://css.maxdesign.com.au/floatutorial/
- https://css-tricks.com/all-about-floats/
- https://www.smashingmagazine.com/2007/05/cs...ou-should-know/

With that in mind, create a simple sample page with just those portfolio stuff (no PHP) and see if you get somewhere with the help of the tutorials.
If not, post the url or HTML and CSS code of that sample page, so we might help you from there.

BTW, each ID needs to be unique per page.
pandy
When I said the structure wasn't consistent, I mean that the sample boxes don't use the same markup

For instance, Website Portfoliois is in a DIV.
HTML
<div id="websitePortfolio">
<h3 class="portfolioHeading">Website Portfolio </h3>
<div class="portfolioSamples">
<article class="samples" style="float:left"; >
<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" >
<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>


Marketing Portfolio is not. You might have a closing tag for it though (not copied below). I didn't bother to count them.
HTML
<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>


Make them the same to start with. And I don't think you need that many DIVs and selectors.
MindyT
I got the marketing portfolio and the website portfolio to be on the same line but they are not close to each other. Also, the samples aren't horizontal. What am I doing wrong?

CODE


<?php
require_once('functions.php');
?>
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>marketing services for small businesses </title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="keywords" content="marketing services,advertising agency,  marketing creations ">
<meta name="description" content="If you are a small business or a nonprofit organization needing assistance with your marketing activities, we're here to help!  We are highly skilled in social media management, marketing material creation and so much more!  ">
<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: 160PX;
    height: 150px;
}

.samples:hover {
    top: 0px;
    bottom: 0px;
}
.samples p {
    visibility:hidden;
}
.samples:hover p {
    visibility:visible;
}
h5 {
    margin-bottom:0%;
    margin-top:0%;  
    color:#FFFFFF;
}
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">
<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">
<h5>Press Release Sample </h5>
<a href="assets/Benefit_Dinner_Press_Release.jpg"  style="float:right"> <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">
<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" >
<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>
MindyT
Ok I'm making some progress. The portfolios are next to each other, but the headings are not at the same level. Can someone help me understand why? http://mediaservicesunlimited.com/test/portfolio.html

CODE

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<style type="text/css">  
.A {
     background-color:#D4BBD9;
    width: 150PX;
    height: 150px;
    float:left;
    margin-left:8%;
    margin-right:2%;    
}
.B {
    background-color:#E78385;
    width: 150PX;
    height: 150px;
    float:left;
}
#marketingPortfolio {
    margin-right:5%;
}
#websitePortfolio {
    margin-top:0px;
    margin-left:30%;
}
.portfolioHeading {
    font-family:'satisfy', cursive;
    color: #419DAF;
    margin-left:5%;
}
</style>
</head>
<body>
<div id = "marketingPortfolio">
<h3 class="portfolioHeading">Marketing Portfolio </h3>
    <div class ="A"> </div>
    <div class ="B"> </div>
</div>
<div id="websitePortfolio">
    <h3 class="portfolioHeading">Website Portfolio </h3>
        <div class ="A"> </div>
    <div class ="B"> </div>
</div>
</body>
</html>
MindyT
got it fixed .
This is a "lo-fi" version of our main content. To view the full version with more information, formatting and images, please click here.
Invision Power Board © 2001-2019 Invision Power Services, Inc.