2

I created a 3 column grid with 3 paragraphs. The first paragraph has an extra space from the top than the other two. Can anyone help? I attached an image if it helps at all. I'm still a beginner at coding so you'll notice a bunch of weird things that I'm doing that aren't practical.

enter image description here

<!doctype html>

<html lang="en">
<head>
<meta charset="utf-8">
    <title>Qualenist</title>
    <link rel="stylesheet" href="stylesheet.css">
</head>
<body> 
    <div class="mainBanner">
        <div class="menuBox"></div>
        <img src="menuBars.png" style="position: absolute; margin-top: 35px; margin-left: 260px;"/>
        <h6><span>already a member?</span> Sign in</h6>
        <h1>Qualenist</h1>
        <h2>Lorem ipsum dolor sit amet & consectetur adipisicing elit</h2>
        <div class="divider"></div>
        <div class="signUpBox"></div>
        <h3>Sign Up</h3>
        <h4>learn more</h4>
        <img src="downArrow.png" style="display: block; margin-left: auto; margin-right: auto; margin-top: -10px"/>
        <div class="whatWeDo">
            <h5>What we do</h5>
            <img src="doSearch.png" style="position: absolute; margin-left: 292px; margin-top: 5px;"/>
            <img src="doGraph.png" style="position: absolute; margin-left: 572px; margin-top: 5px;"/>
            <img src="doPay.png" style="position: absolute; margin-left: 851px; margin-top: 5px;"/>
            <div id="descriptions">
                <p>Lorem ipsum dolor sit amet, consectetur <br>
                adipisicing elit, sed do eiusmod tempor <br>
                incididunt ut labore et dolore magna.</p>

                <p>Lorem ipsum dolor sit amet, consectetur <br>
                adipisicing elit, sed do eiusmod tempor <br>
                incididunt ut labore et dolore magna.</p>

                <p>Lorem ipsum dolor sit amet, consectetur <br>
                adipisicing elit, sed do eiusmod tempor <br>
                incididunt ut labore et dolore magna.</p>
            </div>
    </div>
    <footer class="main-footer">
    </footer> 
</body>
</html>

.mainBanner {
    background-image: url(/Users/omaramin/Documents/Competition/project/mainBanner.png);
    background-repeat: no-repeat;
    position: absolute;
    top: 0;
    left: 0;
    min-width: 100%;
    min-height: 100%;
    font-family: Bariol;
    color: #ffffff;
    border-color: #ffffff;
}

.menuBox {
    width: 35px;
    height: 35px;
    border-style: solid;
    margin-top: 25px;
    margin-left: 252px;
    position: absolute;
    border-width: 1px;
    border-radius: 2px;

}

h6 {
    padding-left: 825px;
    letter-spacing: 1px;
    font-size: 12px;
}

h6 span {
    color: #b3b4b4;
}

h1 {
    text-align: center;
    padding-top: 90px;
    font-size: 36px;
    letter-spacing: 1.5px;
    font-weight: lighter;   
}

h2 {
    text-align: center;
    margin-top: -15px;
    letter-spacing: 1px;
    font-size: 13px;
}

.divider {
    border: 0;
    height: 1px;
    width: 45px;
    margin: auto;
    margin-top: 21px;
    background: #ffffff;
}

.signUpBox {
    width: 150px;
    height: 47px;
    border-style: solid;
    border-width: 1px;
    margin: auto;
    margin-top: 25px;
    border-radius: 2px;
}

h3 {
    text-align: center;
    margin-top: -35px;
    letter-spacing: 1px;
    font-size: 17px;
}

h4 {
    text-align: center;
    margin-top: 115px;
    letter-spacing: 1px;
    font-size: 12px;
}

.whatWeDo {
    margin-top: -20px;
    color: #5c5d5d;
    font-family: Bariol;
}

h5 {
    text-align: center;
    margin-top: 100px;
    letter-spacing: 1px;
    font-size: 25px;
}

#descriptions {
    -moz-column-count: 3;
    -moz-column-gap: 0px;
    -webkit-column-count: 3;
    -webkit-column-gap: 0px;
    font-size: 13px;
    letter-spacing: 1px;
    text-align: center;
    margin-left: 200px;
    margin-right: 200px;
    margin-top: 170px;
    line-height: 20px;
}
user2605157
  • 579
  • 3
  • 8
  • 13

7 Answers7

2

Looks like margins on the paragraphs. Add:

p {
    margin:0;
}

jsFiddle example

j08691
  • 204,283
  • 31
  • 260
  • 272
1

You'll want to add this to your CSS:

description p {
  -webkit-margin-before: 0;
  -moz-margin-before: 0;
}

The moz-margin-before is necessary for some Firefox browsers. Otherwise, they'll see the weird whitespace as well.

Mike Koch
  • 1,540
  • 2
  • 17
  • 23
1

Going to have to agree with @j08691 here...

http://jsfiddle.net/SinisterSystems/v4n7G/1/

p {
    margin:0;
}
Nicholas Hazel
  • 3,758
  • 1
  • 22
  • 34
1

The other answers are nice, and work just fine, but I think you should change your markup. Rather than relying on CSS columns to layout the text, then absolutely positioning the images to center above the columns, just make three container <div>s for the text AND the images. Give the containers a percentage width and float:left or use flexbox to get the columns side-by-side.

If the images are the same height, you'll be assured that your text will align.

jsFiddle Example

Another benefit of this approach is that now your .column class is reusable AND you don't need to use inline or special styles for the positioning.

Andrew
  • 81
  • 3
  • Awesome andrew! I'm always open to hearing how to write my code more efficiently rather than just solving the problem. Thanks so much! – user2605157 Jan 21 '14 at 03:54
1

In my case I was placing a set of text in paragraphs into columns, so I wanted to keep spacing after each paragraph. The solution here is to remove the margin from the paragraph tag, and use padding instead.

Markup:

<div class="columns">
    <p>Lorem ipsum...</p>
    <p>Lorem ipsum...</p>
    <p>Lorem ipsum...</p>
    <p>Lorem ipsum...</p>
</div>

CSS:

.columns {
    column-count: 2;
    column-gap: 12px;
}
.columns p {
    /* don't break paragraphs */
    break-inside: avoid; 
    /* Use padding instead of margin to avoid weird space at top of the second column.*/
   margin: 0;
   padding-bottom: 14px;
}
Brighty
  • 383
  • 2
  • 11
0
  #descriptions p {
        -webkit-margin-before: 0;
        margin: 0;
    }

http://jsfiddle.net/helmutgranda/84jky/3/

Helmut Granda
  • 4,565
  • 7
  • 35
  • 51
  • [Related post](http://stackoverflow.com/questions/5721966/webkit-margin-adds-unwanted-margin-on-texts) – Nicholas Hazel Jan 21 '14 at 03:17
  • 1
    Just look out for mozilla clients, as they don't use Webkit – Mike Koch Jan 21 '14 at 03:18
  • 2
    Keep in mind, the other answers of `margin:0` also address the problem and this solution only targets certain browsers ;-) FYI – Nicholas Hazel Jan 21 '14 at 03:18
  • 1
    @user2605157 - This doesn't fix the problem on any browser other than Safari and Chrome. Also, Mozilla clearly warns users "Proprietary WebKit-prefixed properties (do not use on Web sites)"(https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Webkit_Extensions). – j08691 Jan 21 '14 at 03:42
0

Couldn't find it called out in the spec, but this appears to be down to the interplay between CSS multicol and margins. As others mentioned, setting margin to zero makes the symptom go away.

#descriptions > p { margin: 0; }

However if it were me, I'd not have used CSS multicol at all, since text flows between cols as the browser evens the height across all cols, whereas here you presumably want each description to stay in its own box.

Also CSS3 columns has poor IE support: http://caniuse.com/multicolumn

I'd have used table CSS properties, inline block, flex box, or even floats before attempting to use columns for this.

#descriptions { display: table; }
#descriptions > p { display: table-cell; }

Using table markup for non-tabular data is usually a bad idea, but using CSS's table display properties is perfectly okay.

greim
  • 9,149
  • 6
  • 34
  • 35