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 Marty Hitchcock
Marty Hitchcock
13,108 Points

inline blocks behavior

Hi,

I have been working on a page with a bunch of squares in rows and they are acting odd to me. Hopefully someone can explain why.

All of these lined up perfectly into 3 rows of 4 before I added content. If I add images to 3 and not the other in the row then the 3 with images drop down lower, but if they all have images why are in a line (not the lower position either). Also something similar going on with the second row.

So I have 2 questions: 1 - why does one box affect the other boxes? 2 - how do I stop this?

What it looks like: http://codepen.io/1marty4sale/full/IwxdK

<!DOCTYPE HTML>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title>News Stand</title>
    <link rel="stylesheet" href="css/normalize.css" type="text/css" media="screen">
    <link rel="stylesheet" href="css/style.css" type="text/css" media="screen">
    <link href='http://fonts.googleapis.com/css?family=Nunito:400,300,700' rel='stylesheet' type='text/css'>
    <meta name="viewport" content="width=device-width, initial-scale = 1.0">
</head>
<body>
    <div class="back">
        <div class="book blue"><img src="img/church2.svg">
        </div>
        <div class="book blue"><!--<img src="img/add68.svg">-->
        </div>
        <div class="book blue"><img src="img/arm1.svg">
        </div>
        <div class="book blue"><img src="img/jumping3.svg">
        </div>
        <div class="book orange"><img src="img/mail.svg">
        </div>
        <div class="book orange"><img src="img/man64.svg">
        </div>
        <div class="book orange"><img src="img/church2.svg">
        </div>
        <div class="book orange"> Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test
        </div>
        <div class="book green"><img src="img/church2.svg">
        </div>
        <div class="book green"><img src="img/church2.svg">
        </div>
        <div class="book green"><img src="img/church2.svg">
        </div>
        <div class="book green"><img src="img/church2.svg">
        </div>
    </div>
</body>
</html>

body {
font-size: 34px;
    background-color: grey;
    -webkit-perspective: 800px;
}

.back {
    width: 900px;
    height: 900px;
    margin-left: auto;
    margin-right: auto;
    position: relative;
    z-index: 10;
}

.book {
    width: 190px;
    height: 190px;
    position: relative;
    z-index: 20;
    margin: 10px;
    display: inline-block;
    text-align: center;
    transition: -webkit-transform 0.8s ease-in;
    -webkit-transform: rotateX(15deg);
    box-shadow: 10px 10px 30px;
}

.book:hover {
    -webkit-transform: rotateX(0deg);
}

.book img {
    width: 50%;
    position: relative;
    top: 10%;
}

.blue {
    background: #3FA9F5;
}

.orange {
    background: orange;
}

.green {
    background: green;
}

#one {
    top: 180px;
}

#two {
    top: 380px;
}

#three {
    top: 580px;
}

#four {
    top: 780px;
}

1 Answer

Ty theDog
Ty theDog
682 Points

If you add this to the .book div then they will line back up.

.book { 
  overflow: hidden 
}

The content inside the .book goes beyond the height of the div which is what causes the initial problem. overflow: hidden hides all of the content that extends beyond the height of the .book.

Here is a great little article that explains the Overflow property pretty awesomely: http://css-tricks.com/the-css-overflow-property/

Marty Hitchcock
Marty Hitchcock
13,108 Points

ah thanks, thought it was something to do with overflow.