Columns not top aligned

Question

see: http://postimg.org/image/v2diz1zkl/

code below:

'''css

/* ================================= Base Styles ==================================== */

{ box-sizing: border-box; }

body { font-family: 'Varela Round', sans-serif; line-height: 1.6; color: #3a3a3a; }

p { font-size: .95em; margin-bottom: 1.5em; }

h2, h3, a { color: #093a58; }

h2, h3 { margin-top: 0; }

a { text-decoration: none; }

/* ================================= Base Layout Styles ==================================== */

/* ---- Navigation ---- */

.name { font-size: 1.25em; }

.name, .main-nav li { text-align: center; background: #fff; margin-top: 6px; margin-bottom: 6px; }

.main-nav a { font-size: .95em; color: #3acec2; text-transform: uppercase; }

.main-nav a:hover { color: #093a58; }

.name a, .main-nav a { padding: 10px 15px; display: block; }

/* ---- Layout Containers ---- */

.container { padding-left: 1em; padding-right: 1em; }

.main-header { padding-top: 1.5em; padding-bottom: 1.5em; background: #3acec2; margin-bottom: 30px; }

.main-footer { text-align: center; padding: 2em 0; background: #d9e4ea; }

/* ================================= Media Queries ==================================== */

@media (min-width: 769px) {

.wrap {
    min-height: calc(100vh - 89px);
}

.container {
    width: 80%;
    max-width: 1150px;
    margin: 0 auto;
}

.name,
.main-nav,
.main-nav li {
    display: inline-block;
}

.name {
    width: 240px;
    margin-right: 50px;
}

.main-nav li {
    margin-right: 12px;
}

.col { display: inline-block; width: 50%; margin-right: -4px; background: grey; } }

'''

'''html

<!DOCTYPE html> <html> <head> <title>Best City Guide</title> <link href='https://fonts.googleapis.com/css?family=Varela+Round' rel='stylesheet' type='text/css'> <link rel="stylesheet" href="css/normalize.css"> <link rel="stylesheet" href="css/style.css"> </head> <body> <div class="wrap">

    <header class="main-header">
        <div class="container">
            <h1 class="name"><a href="#">Best City Guide</a></h1>
            <ul class="main-nav">
                <li><a href="#">ice cream</a></li>
                <li><a href="#">donuts</a></li>
                <li><a href="#">tea</a></li>
                <li><a href="#">coffee</a></li>
            </ul>
        </div>
    </header>

    <div class="container"> 

        <div class="primary col">
            <h2>Welcome!</h2>
            <p>Everything in this city is worth waiting in line for.</p>
            <p>Cupcake ipsum dolor sit. Amet chocolate cake gummies jelly beans candy bonbon brownie candy. Gingerbread powder muffin. Icing cotton candy. Croissant icing pie ice cream brownie I love cheesecake cookie. Pastry chocolate pastry jelly croissant.</p>
            <p>Cake sesame snaps sweet tart candy canes tiramisu I love oat cake chocolate bar. Jelly beans pastry brownie sugar plum pastry bear claw tiramisu tootsie roll. Tootsie roll wafer I love chocolate donuts.</p>
        </div><!--/.primary-->

        <div class="secondary col">
            <h2>Great food</h2>
            <p>Croissant macaroon pie brownie. Cookie marshmallow liquorice gingerbread caramels toffee I love chocolate. Wafer lollipop dessert. Bonbon jelly beans pudding dessert sugar plum. Marzipan toffee drag&#233;e chocolate bar candy toffee pudding I love. Gummi bears pie gingerbread lollipop.</p>
            <p> Fruitcake jelly-o croissant souffl&#233;. Biscuit jujubes drag&#233;e. Sesame snaps tootsie roll chocolate bar cake tart macaroon pudding. Ice cream gummies jujubes cupcake. Cake marshmallow cookie lollipop tart.</p>
        </div><!--/.secondary-->

    </div><!--/.container-->

</div><!--/.wrap-->

<footer class="main-footer">
 <span>&copy;2015 Residents of The Best City Ever.</span>
</footer>

</body> </html> '''

Answer 1 · 2015-12-07T00:58:38Z

December 7, 2015 12:58am

Hey Anthony –

Guil explains fixing this problem towards the end of the video.

You need to add this code to the end of your .col class: vertical-align: top;

This will align the content to the top of the parent container.

Answer 2 · 2015-11-26T15:33:28Z

November 26, 2015 3:33pm

Hey Anthony (nice name haha),

I made some changes to your code that will hopefully solve your problem.

.col {
  float: left;
}

.main-footer {
  width: 100%;
  bottom: -10%;
}

@media (min-width: 769px) {
  .main-footer {
    position: absolute;
  }
}

You can play with the .col margins and padding until you achieve the desired look.

Here's a demo with the working solution.

Let us know if this works!

Welcome to the Treehouse Community

Looking to learn something new?

Anthony c

Anthony c

Columns not top aligned

2 Answers

Matthew Vernon

Matthew Vernon

Anthony Mejia

Anthony Mejia