CODEWITHSUNDEEP
htmlcss
Skeptar
Skeptar

Reputation: 189

3 div containers arent vertical align

I have 3 div containers. Why are the 3 div containers not in a row ? If I fill each container with the same content they are in a row. If I fill different content inside each box, it looks like this :
Here is myPage + Code:

*{
    margin: 0px;
    padding: 0px;
}

section{
    width: 1200px;
    margin-left: auto;
    margin-right: auto;
    background-color: #00ff00;
    overflow: hidden;
    text-align: center; 
}


.divbox{
    display: inline-block;
    height: 300px;
    width: 250px;
    border: 4px solid black;
    margin: 0 50px;
    transition: all 0.5s;
    margin-top: 200px;
    margin-bottom: 200px;
    background-color: brown;
}

.divbox:hover{
    border-bottom-right-radius: 50px;
    border-bottom-left-radius: 50px;
}
<html>
    <head>
        <title>Startseite</title>
        <link rel="stylesheet" href="index.css">
        <meta http-equiv="content-type" content="text/html; charset=UTF-8" />
    </head>
    <body>
        <section>
            <article>
                <div class="divbox">
                    <img src="http://malsup.github.com/images/beach1.jpg" width="250" height="250" />
                    <a href="#">Link1</a>
                </div>
                <div class="divbox">
                </div>
                <div class="divbox">
                    content
                </div>
            </article>
        </section>
    </body>
</html>

Upvotes: 0

Views: 72

Answers (2)

Weafs.py
Weafs.py

Reputation: 23002

The default value for vertical-align(applies to inline-level and table-cell elements) is baseline(baseline of the previous element). You need to add vertical-align: top to .divbox.

.divbox {
    display: inline-block;
    height: 300px;
    width: 250px;
    border: 4px solid #000;
    margin: 200px 50px;
    transition: all 0.5s ease 0s;
    background-color: #A52A2A;
    vertical-align: top;
}

Upvotes: 2

eliteware
eliteware

Reputation: 144

Just add float:left; to your code

Edit your divbox to this

.divbox{
display: inline-block;
height: 300px;
width: 250px;
border: 4px solid black;
margin: 0 50px;
transition: all 0.5s;
margin-top: 200px;
margin-bottom: 200px;
background-color: brown;
float:left;
}

Upvotes: 1

Related Questions