1

I'm trying to get three columns to line up, space evenly, and be a complete box. Debating borders, but I digress.

So far, my code looks like this:
HTML 

<div id="container">
<div id="container-left">
<h3>Logo Design Services</h3>
<p>We work with you to design the perfect logo for your business, event,                                           or team.  The process puts you in the driver's seat as we work
to produce something you just cannot live without.  Whether we get it right on the first time, or the billionth, the price never changes.  
Logo design starts at just $100.00</p>
<h5><i>**Subject to change without notice or update to this site**</i>   </h5>
    <div id="container-center">
    <h3>Business Product Design</h3>
    <p>With a multitude of products, from <b>business cards, letterhead, namebadges, signage, vehicle signage, window decals, flyers, and more</b>.  
    We can design virtually anything you need in order to make your business look the way you always believed it would.  See <a    href="packagedeals.html">Package Deals</a>
    section to see each individual item, and get our "Start Me Up" Pacakge that includes the <b>Business cards, letterhead, namebadges and logo for $150.00</b></p>
        <div id="container-right">
        <h3>Promotional Product Design</h3>
        <p>Dave's Logo Designs does not print or manufactur promotional   products, but will research and help line you up with someone who can.  With   all promotional product
        items purchased, you get one copy of our interactive price/profit spreadsheet.  We do the work to put what you ordered and the quantities, so you set the price to see
        what your profit could be.  Design cost is based upon item needed.  <a href="contact.html">Contact us</a> for more information about    promotional product design</p>
        <h5>** Research fee may apply if we research the company.            Research fee is $10.00/hr.**</h5>
            </div>
        </div>
    </div>
</div>

my css:

#container {
width: 100%;
}   

#container-left {
display: inline-block;
float: left;
clear: left;
width: 33%;
padding: 25px;
margin-left: 175px;

}
#container-left h3 {
text-align: center;
}
#container-left p {
text-align: left;
}
#container-left h5 {
text-align: center;
color: red;
text-decoration: italic;
}
#container-center {
display: inline-block;
float: center;
clear: left;
width: 34%;
padding: 15px; 

} 
#container-center h3 {
text-align: center;
}
#container-center p {
text-align: left;
}
#container-right {
display: inline-block;
float: right;
width: 33%;
padding: 5px;
}   
#container-right h3 {
text-align: center;
}
#container-right p {
text-align: left;
}
#container-right h5 {
text-align: center; 
color: red;
}

Nothing seems to be lining up. I'm unsure as to why. Thanks for any help. The top line always is indenting crazy. I'm debating if I want to put a border around. Also, if I use that same class tag (I know it's ID now, will it always put it underneath the one that would overflow, or would it affect how it looks?

WANT IT TO LOOK LIKE: BUSINESS SERVICES

  LOGO SERVICES              BUSINESS PRODUCT DESIGN         PROMOTIONAL

Blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah

                                SPORTS TEAM SERVICES

  LOGO DESIGN                 JERSEY DESIGN                MERCHANDISE

Blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah

this hopefully helps you guys. Thanks for the assistance

Dave's Logo Designs
  • 13
  • 4

3 Answers3

0

Cleaned up the HTML (you didn't end your <div> for each one), and the CSS.

#container {
width: 100%;
}   
#container div {
  display: inline-block;
  width: 33%;
  box-sizing: border-box;
}
h3,h5 {
  text-align: center;
}
h5 {
color: red;
text-decoration: italic;
}
<div id="container">
<div id="container-left">
<h3>Logo Design Services</h3>
<p>We work with you to design the perfect logo for your business, event,                                           or team.  The process puts you in the driver's seat as we work
to produce something you just cannot live without.  Whether we get it right on the first time, or the billionth, the price never changes.  
Logo design starts at just $100.00</p>
<h5><i>**Subject to change without notice or update to this site**</i>   </h5>
  </div>
    <div id="container-center">
    <h3>Business Product Design</h3>
    <p>With a multitude of products, from <b>business cards, letterhead, namebadges, signage, vehicle signage, window decals, flyers, and more</b>.  
    We can design virtually anything you need in order to make your business look the way you always believed it would.  See <a    href="packagedeals.html">Package Deals</a>
    section to see each individual item, and get our "Start Me Up" Pacakge that includes the <b>Business cards, letterhead, namebadges and logo for $150.00</b></p></div>
        <div id="container-right">
        <h3>Promotional Product Design</h3>
        <p>Dave's Logo Designs does not print or manufactur promotional   products, but will research and help line you up with someone who can.  With   all promotional product
        items purchased, you get one copy of our interactive price/profit spreadsheet.  We do the work to put what you ordered and the quantities, so you set the price to see
        what your profit could be.  Design cost is based upon item needed.  <a href="contact.html">Contact us</a> for more information about    promotional product design</p>
        <h5>** Research fee may apply if we research the company.            Research fee is $10.00/hr.**</h5>
            </div>
        </div>
junkfoodjunkie
  • 3,168
  • 1
  • 19
  • 33
0

With flexbox you can do this:

.container {
  display: flex; /* Make the parent a flex containter */
}
.service {
  flex: 1; /* Distribute free space among flex items */
  padding: 1em;
}
.service h3 {
  text-align: center;
}
.service h5 {
  text-align: center;
  color: red;
}
.service--one h5 {
  font-style: italic;
}
<div class="container">
  <article class="service service--one">
    <h3>Logo Design Services</h3>
    <p>We work with you to design the perfect logo for your business, event, or team. The process puts you in the driver's seat as we work to produce something you just cannot live without. Whether we get it right on the first time, or the billionth, the
      price never changes. Logo design starts at just $100.00</p>
    <h5>**Subject to change without notice or update to this site**</h5>
  </article>
  <article class="service service--two">
    <h3>Business Product Design</h3>
    <p>With a multitude of products, from <strong>business cards, letterhead, namebadges, signage, vehicle signage, window decals, flyers, and more</strong>. We can design virtually anything you need in order to make your business look the way you always
      believed it would. See <a href="packagedeals.html">Package Deals</a> section to see each individual item, and get our "Start Me Up" Pacakge that includes the <strong>Business cards, letterhead, namebadges and logo for $150.00</strong>
    </p>
  </article>
  <article class="service service--three">
    <h3>Promotional Product Design</h3>
    <p>Dave's Logo Designs does not print or manufactur promotional products, but will research and help line you up with someone who can. With all promotional product items purchased, you get one copy of our interactive price/profit spreadsheet. We do the
      work to put what you ordered and the quantities, so you set the price to see what your profit could be. Design cost is based upon item needed. <a href="contact.html">Contact us</a> for more information about promotional product design</p>
    <h5>** Research fee may apply if we research the company.            Research fee is $10.00/hr.**</h5>
  </article>
</div>

Revising your code you could improve several things, which will be listed below:

  • Use semantic HTML.
  • Use the <article> HTML tag for each service.
  • Use <strong> instead of <b>, here's why.
  • Do not nest your services containers, they need to share the same parent.
  • Use classes instead of id to simplify your CSS and reduce code.
  • italic is a property value used in font-style not in text-decoration.
Community
  • 1
  • 1
Ricky Ruiz
  • 25,455
  • 6
  • 44
  • 53
  • okay. so, my containers should start like this:

    Service Name Here

    description

    for each?
     – Dave's Logo Designs Nov 20 '16 at 23:39
  • and if I want services inline three wide, would I have to say ".service--one {float: left;}. .service--two {float: center;} .service--three: float: right;}? – Dave's Logo Designs Nov 21 '16 at 11:20
  • @Dave'sLogoDesigns Using flexbox, you do not need to use floats. The container will only be one, which acts as a parent element. Each `
    ` element would be a service.
     – Ricky Ruiz Nov 21 '16 at 17:30
  • I got that to work yesterday. Thanks for the help. You guys are awesome here. – Dave's Logo Designs Nov 23 '16 at 01:44
  • @Dave'sLogoDesigns Always happy to help `:)`. Make sure to mark this as the correct answer if it solved your issue. – Ricky Ruiz Nov 23 '16 at 04:28
  • last part of this. If I wanted to do the same flexbox with ol lists for my services, does the same type of coed apply? – Dave's Logo Designs Nov 23 '16 at 14:01
  • @Dave'sLogoDesigns Sure, just change some tags for `
      ` and `
    1. `, like this: [jsfiddle](https://jsfiddle.net/rickyruizm/71y8nmg1/). If you're adding more than 3 services in your list, make sure to check out `flex-wrap` and `flex` (shorthand for `flex-grow`, `flex-shrink` and `flex-basis`).
     – Ricky Ruiz Nov 23 '16 at 15:25
  • I did that, an I got a black box that shows nothing. I could probably change the background color to clear and see if that works, but nothing is showing so far. – Dave's Logo Designs Nov 24 '16 at 13:41
  • fixed it, just added background color #fff to it, and it cleared it up. Just now have to adjust my distances, and homepage may be close to done. @Ricky you are awesome. – Dave's Logo Designs Nov 24 '16 at 13:46
  • and for some reason, my ul isn't lining up top to bottom, nor is the circles for the decoration that I wanted. What's wrong? – Dave's Logo Designs Nov 24 '16 at 13:56
  • @Dave'sLogoDesigns Could you replicate the issue in a jsfiddle? It's hard to tell what's wrong, and with circles are you referring to the markers that are added before each list item? – Ricky Ruiz Nov 24 '16 at 15:54
  • @Dave'sLogoDesigns You could always ask a new question as well. – Ricky Ruiz Nov 24 '16 at 15:56
0

--------------------------------STYLE-------------------------------------
#pcontainer{display:flex;box-sizing:border-box; justify-content:space-around; background:#ccc;} .container{ width:30%;} .container h3{text-align:center;} -------------------------------HTML----------------------------------------

<div id="pcontainer">
<div class="container">
<h3>Logo Design Services</h3>
<p>We work with you to design the perfect logo for your business, event,                                           or team.  The process puts you in the driver's seat as we work
to produce something you just cannot live without.  Whether we get it right on the first time, or the billionth, the price never changes.  
Logo design starts at just $100.00</p>
<h5><i>**Subject to change without notice or update to this site**</i>   </h5>
  </div>
    <div class="container">
    <h3>Business Product Design</h3>
    <p>With a multitude of products, from <b>business cards, letterhead, namebadges, signage, vehicle signage, window decals, flyers, and more</b>.  
    We can design virtually anything you need in order to make your business look the way you always believed it would.  See <a    href="packagedeals.html">Package Deals</a>
    section to see each individual item, and get our "Start Me Up" Pacakge that includes the <b>Business cards, letterhead, namebadges and logo for $150.00</b></p>
  </div>
        <div class="container">
        <h3>Promotional Product Design</h3>
        <p>Dave's Logo Designs does not print or manufactur promotional   products, but will research and help line you up with someone who can.  With   all promotional product
        items purchased, you get one copy of our interactive price/profit spreadsheet.  We do the work to put what you ordered and the quantities, so you set the price to see
        what your profit could be.  Design cost is based upon item needed.  <a href="contact.html">Contact us</a> for more information about    promotional product design</p>
        <h5>** Research fee may apply if we research the company.            Research fee is $10.00/hr.**</h5>
            </div>

</div>
ninja
  • 53
  • 1
  • 6