-1

I want my divs to act like in this JSfiddle. For some reason when I put an image inside one of them, it all starts to act a little crazy and I can't seem to figure out why. What am I doing wrong?

This is the JSfiddle with an image showing how it's acting strange.

HTML

<div class="divMain">
    <div class="div2">
        <p> some text some text some text some text some text some text some text some text some text some text some text some text some text some text some text some text some text some text some text some text some text some text some text some text some text some text some text some text some text some text some text some text some text some text </p>
    </div>
    <div class="div3">
        <p> some text some text some text some text some text some text some text some text some text some text some text some text some text some text some text some text some text some text some text some text some text some text some text some text some text some text some text some text some text some text some text some text some text some text </p>
    </div>
</div>

CSS

.divMain{
    height: 500px;
    width: 100%;
    border: 2px solid black;
}

.div2{
    display: inline-block;
    height: 200px;
    width: 40%;
    border: 2px solid red;
}

.div2 img{
    height: auto;
    width: 80%;
}
}

.div3{
    display: inline-block;
    height: 200px;
    width: 45%;
    border: 2px solid blue;
}

@media only screen and (max-width: 500px) {
    .div2{
        background-color: red;
    }

    .div3{
        background-color: blue;
    }
}
}
Maximillian Laumeister
  • 19,884
  • 8
  • 59
  • 78
Shocker_33
  • 107
  • 2
  • 2
  • 11

1 Answers1

2

Your CSS has a typo which is preventing your CSS rules from being parsed properly:

.div2 img{
    height: auto;
    width: 80%;
}
}

should be:

.div2 img{
    height: auto;
    width: 80%;
}

Also, if you want your divs to be aligned top, give them both vertical-align: top.

Here is a full live example:

.divMain{
    height: 500px;
    width: 100%;
    border: 2px solid black;
}

.div2{
    display: inline-block;
    height: 200px;
    width: 40%;
    border: 2px solid red;
}

.div2 img{
    height: auto;
    width: 80%;
    vertical-align: top;
}

.div3{
    display: inline-block;
    height: 200px;
    width: 45%;
    border: 2px solid blue;
    vertical-align: top;
}

@media only screen and (max-width: 500px) {
    .div2{
        background-color: red;
    }
    
    .div3{
        background-color: blue;
    }
}
}
<div class="divMain">
    <div class="div2">
        <img src="http://peterspowerproducts.com/wp-content/uploads/2014/06/boat.jpg" />
    </div>
    <div class="div3">
        <p> some text some text some text some text some text some text some text some text some text some text some text some text some text some text some text some text some text some text some text some text some text some text some text some text some text some text some text some text some text some text some text some text some text some text </p>
    </div>
</div>

JSFiddle Version: http://jsfiddle.net/9zjrmpom/1/

Maximillian Laumeister
  • 19,884
  • 8
  • 59
  • 78
  • So i did make that mistake. Thanks with the verticle align. Is there a reason why the two divs move up and down when the width is adjusted without it? – Shocker_33 Aug 01 '15 at 13:46
  • @Shocker_33 The divs align in a weird way because of the default value of `vertical-align` being `baseline`, which aligns the bottom of the text (inline content) within the divs, not the divs themselves. To be honest I didn't really know until I did some research - [here is the answer that helped me begin to understand](http://stackoverflow.com/a/9273065/2234742). – Maximillian Laumeister Aug 01 '15 at 16:55