Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

CSS

Posted by Dean Gray
Dean Gray
12,487 Points

Margin Problem. can't get column heights to line up

Hello,

I'm creating a html template to be used in emails so I can only use html and css. I have a 100% width div which contains two columns: 1 column has 1 row and the other 2 rows. Problem is they aren't lining up vertically. Can some point out where my css is going wrong. 

<html>
<Head>
<style type="text/css">

/* layout */

    body{
    width: 600px;
    height: 800px;
    border: 5px solid black;    
    margin: auto;   

    }
    body h1{
    float: left;
    margin-top: 58px;
    margin-bottom: 0px;

    }

    #header{
    width: 100%;
    height: 100px;
    margin-bottom: 5px;
    }

    #company_logo{

    padding-left: 38%;
    height: 95px;
    width: 149px;
    margin-top: 5px;
    }

    .container{
    margin-bottom: 5px;
    height: 105px;
    }

    .row{
    height: 50%;
    }

    .col1{
    display: inline-block;
    width: 25%;
    height: 100%;
    }

    #prod_img {
    width: 100%;
    }

    .col2 {
    margin: auto 1%;
    width: 70%;
    display: inline-block;
    height: 100%;
    }

    .col2 h3 {
    margin: 0px;
    }

    .col2 p {
    margin: 0px;
    }

</style>
</head>

<body>
<div id="header">
    <h1>Stock Mailers</h1>
    <img id="company_logo" src="http://www.shirlplass.co.uk/themes/shirlplass/images/shirlplass.png">
</div>
<div class="container">
    <div class="col1">
        <img id="prod_img"src="http://www.shirlplass.co.uk/themes/shirlplass/images/shirlplass.png">
    </div>
    <div class="col2">
        <div class="row">
            <h3>Grey Mailers</h3>
        </div>
        <div class="row">
            <p>This is some informartion about grey mailer envelopes that will be very interesting to the customer. adding some more text because why not this may help me understand the problem. 
            </p>
        </div>  
    </div>
</div>
</body>
</html>
Brett Comardelle
Brett Comardelle
8,541 Points

Try setting your left and right margins of the container class to auto

3 Answers

Juan Aviles
Juan Aviles
12,795 Points
Juan Aviles
Juan Aviles
12,795 Points

Floating .col1 left and .col2 right does what I think you are trying to do. Align the tops of those 2 divs, correct?

Dean Gray
Dean Gray
12,487 Points

Hi,

That did fix the problem, I do have one final question if don't mind. I have moved on to making it a little more bit more responsive on the width however I can't get row2 to shrink. The code has changed a little so I have re-posted it below. 

<html>
<Head>
<style type="text/css">

/* layout */

    body{
    max-width: 600px;
    height: 800px;
    border: 5px solid black;    
    margin: auto;   

    }
    body h1{
    float: left;
    margin-top: 58px;
    margin-bottom: 0px;

    }

    #header{
    width: 100%;
    height: 100px;
    margin-bottom: 5px;
    }

    #company_logo{

    float: right;
    max-height: 95px;
    max-width: 150px;
    margin-top: 5px;
    }

    .container{

    margin-right: auto;
    margin-left: auto;
    margin-bottom: 5px;
    height: 95px;
    }

    .row{
        height: 50%;
        width: 100%;
    }

    .row2{
        float: right;
        height: 50%;
        width: 100%;
    }

    .col1{
    display: inline-block;
    min-width: 150px;
    width: 25%;
    height: 100%;
    float: left;
    }

    #prod_img {
    width: 150px;
    height: 95px;

    }

    .col2 {
    float: right;
    min-width: 42%;
    max-width: 75%;
    display: inline-block;
    height: 100%;
    }

    .row h3 {
    margin: 0px;
    width: 100%;
    }

    .row2 p {
    margin: 0px;
    max-height: 100%;
    width: 100%;
    overflow: hidden;

    }

</style>
</head>

<body>
<div id="header">
    <h1>Stock Mailers</h1>
    <img id="company_logo" src="http://www.shirlplass.co.uk/themes/shirlplass/images/shirlplass.png">
</div>
<div class="container">
    <div class="col1">
        <img id="prod_img"src="http://www.shirlplass.co.uk/themes/shirlplass/images/shirlplass.png">
    </div>
    <div class="col2">
        <div class="row">
            <h3>Grey Mailers</h3>
        </div>
        <div class="row2">
            <p>This is some informartion about grey mailer envelopes that will be very interesting to the customer. adding some more text because why not this may help me understand the problem. 
            </p>
        </div>  
    </div>
</div>
<div class="container">
    <div class="col1">
        <img id="prod_img"src="http://www.shirlplass.co.uk/themes/shirlplass/images/shirlplass.png">
    </div>
    <div class="col2">
        <div class="row">
            <h3>Grey Mailers</h3>
        </div>
        <div class="row2">
            <p>This is some informartion about grey mailer envelopes that will be very interesting to the customer. adding some more text because why not this may help me understand the problem. 
            </p>
        </div>  
    </div>
</div>

</body>
</html>
Dean Gray
Dean Gray
12,487 Points
Dean Gray
Dean Gray
12,487 Points

No changed nothing, however I change the height of my prod_img and that helped. 

<html>
<Head>
<style type="text/css">

/* layout */

    body{
    width: 600px;
    height: 800px;
    border: 5px solid black;    
    margin: auto;   

    }
    body h1{
    float: left;
    margin-top: 58px;
    margin-bottom: 0px;

    }

    #header{
    width: 100%;
    height: 100px;
    margin-bottom: 5px;
    }

    #company_logo{

    padding-left: 38%;
    height: 95px;
    width: 149px;
    margin-top: 5px;
    }

    .container{

    margin-right: auto;
    margin-left: auto;
    margin-bottom: 5px;
    height: 105px;
    }

    .row{
    height: 50%;
    }

    .row2{
        height: 50%;
    }

    .col1{
    display: inline-block;
    width: 25%;
    height: 100%;
    background-color: blue;
    }

    #prod_img {
    width: 100%;
    height: 100%;

    }

    .col2 {
    width: 70%;
    display: inline-block;
    height: 100%;
    background-color: grey;
    }

    .col2 h3 {
    margin: 0px;
    }

    .col2 p {
    margin: 0px;
    }

</style>
</head>

<body>
<div id="header">
    <h1>Stock Mailers</h1>
    <img id="company_logo" src="http://www.shirlplass.co.uk/themes/shirlplass/images/shirlplass.png">
</div>
<div class="container">
    <div class="col1">
        <img id="prod_img"src="http://www.shirlplass.co.uk/themes/shirlplass/images/shirlplass.png">
    </div>
    <div class="col2">
        <div class="row">
            <h3>Grey Mailers</h3>
        </div>
        <div class="row2">
            <p>This is some informartion about grey mailer envelopes that will be very interesting to the customer. adding some more text because why not this may help me understand the problem. 
            </p>
        </div>  
    </div>
</div>
<div class="container">
    <div class="col1">
        <img id="prod_img"src="http://www.shirlplass.co.uk/themes/shirlplass/images/shirlplass.png">
    </div>
    <div class="col2">
        <div class="row">
            <h3>Grey Mailers</h3>
        </div>
        <div class="row2">
            <p>This is some informartion about grey mailer envelopes that will be very interesting to the customer. adding some more text because why not this may help me understand the problem. 
            </p>
        </div>  
    </div>
</div>
<div class="container">
    <div class="col1">
        <img id="prod_img"src="http://www.shirlplass.co.uk/themes/shirlplass/images/shirlplass.png">
    </div>
    <div class="col2">
        <div class="row">
            <h3>Grey Mailers</h3>
        </div>
        <div class="row2">
            <p>This is some informartion about grey mailer envelopes that will be very interesting to the customer. adding some more text because why not this may help me understand the problem. 
            </p>
        </div>  
    </div>
</div>
<div class="container">
    <div class="col1">
        <img id="prod_img"src="http://www.shirlplass.co.uk/themes/shirlplass/images/shirlplass.png">
    </div>
    <div class="col2">
        <div class="row">
            <h3>Grey Mailers</h3>
        </div>
        <div class="row2">
            <p>This is some informartion about grey mailer envelopes that will be very interesting to the customer. adding some more text because why not this may help me understand the problem. 
            </p>
        </div>  
    </div>
</div>


</body>
</html>
Juan Aviles
Juan Aviles
12,795 Points

I guess I don't understand what you are trying to do. The code you just posted is showing them still misaligned on my screen.

Brett Comardelle
Brett Comardelle
8,541 Points
Brett Comardelle
Brett Comardelle
8,541 Points

Also insure that there is enough padding on top and bottom so that other elements do not interfere.