0

In the below code there are 2 child div elements .left and .right. Im using margin left to move the .right to the right and im using display inline block to make the div the size of the content and I thought that would help with getting the divs to align to the top of each other. the one on the right appears lower. why?

<style type="text/css">
    html,body{
        color:#fff;
    }

    .container {
      background: linear-gradient(
        to right, 
        #ff9e2c 0%, 
        #ff9e2c 50%, 
        #b6701e 50%, 
        #b6701e 100%
      );
      height: 500px;
      width: 100%;
    }
    .left{
        width:40%;
        padding: 10px;
        vertical-align: top;
    }
    .right{
        margin-left: 50%;
        padding: 10px;
        width: 40%;
        vertical-align: top;
    }
</style>

<section class="container">
    <div class="left"> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sed, consequuntur.</div>
    <div class="right">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolor similique exercitationem reiciendis doloribus animi cupiditate laborum, mollitia ipsum ad? Perspiciatis?</div>
</section>
jack blank
  • 5,073
  • 7
  • 41
  • 73

2 Answers2

1

You didn't have inline-block on your .left and .right classes. If you add the following it works: JS Fiddle

.left, .right {display: inline-block;}
//and change the width of .right
.right {width: 40%; }

This isn't how I would recommend setting this up, but for this example, it works. I would recommend using a separate background for the .left and .right classes instead of using a gradient on the wrapper. This gives you a lot more flexibility and stability.

Derek Story
  • 9,518
  • 1
  • 24
  • 34
  • Thanks for your help. just saying the point of the gradient is to make it seem like it is equal height for the areas. if I just use display inline block with different backgrounds it would give the appearance of unequal heights. It was one of the solutions from https://css-tricks.com/left-and-right/ – jack blank Mar 21 '15 at 05:17
  • No problem. I would recommend either the float or absolute method as it will give you a lot more flexibility with responsive layouts (if needed) – Derek Story Mar 21 '15 at 05:19
0

Setting every div as inline-block with 50% of width, the divs will resize with the page.

.left {
    display: inline-block; 
    width: 50%; 
}
.right {
    display: inline-block; 
    width: 50%; 
}

I suggest you to take a look at bootstrap rows

<row>
 <div class="left col-md-6"></div>
 <div class="right col-md-6"></div>
</row>

This solution doesn't require additional CSS, and you can customize the size of your divs according to the size of the screen.

Devid Farinelli
  • 7,514
  • 9
  • 42
  • 73
  • `div` tags are not self closing in valid html: http://stackoverflow.com/questions/7971716/is-it-ok-to-use-a-self-closing-div-tag – Derek Story Mar 21 '15 at 05:13