CODEWITHSUNDEEP
htmlcss
Kumar Anand
Kumar Anand

Reputation: 49

Height of one div is affecting position of another

I am working on a small application and I got stuck as soon as I started. I wrote some HTML and CSS, but height of one div is affecting the position of another div.

Here is my HTML and CSS

HTML:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
   <header></header>
   <div id="container">

       <div class="container1">
           <div class="title">Title 1</div>
           <ul class="action">
                <li>Option 1</li>
                <li>Option 2</li>
                <li>Option 3</li>
           </ul>
       </div>


        <div class="container2">
            <div class="title">  Title 2  </div>
            <ul class="list">Some random text</ul>
            <ul class="options">
                <li>Option 1</li>
                <li>Option 2</li>
                <li>Option 3</li>
                <li>Option 4</li>
                <li>Option 5</li>
            </ul>
        </div> 
   </div>
</body>
</html>

CSS:

*{
    margin: 0;
    padding: 0;
}

header{
    width: 100%;
    height: 50px;
    background: dimgray;
}

ul{
    display: inline-block;
    list-style: none;
    padding: 10px;
    margin-left: 10px;
}

div.container1{
    border: 1px solid black;
    display: inline-block;
    margin-left: 10px;
}

div.container2{
    display: inline-block;
    width: 30%;
    margin-left: 10px;
}

div.title{
    width: 100%;
    background: lightblue;
    text-align: center;
}


ul.list{
    box-sizing: border-box;
    width: 100%;
    border: 1px solid black;
    margin-left: 0;
    height: 300px;
}

ul.options li{
    float: left;
    margin: 2px;
    padding: 2px;
    background: lightblue;
}

JsFiddle

I can use positioning and achieve what I want as described in this SO post.

But if anyone can please explain me why changing the height of container2 in my markup is affecting the position of container1, that will be a huge help. Thanks.

Upvotes: 0

Views: 342

Answers (2)

ketan
ketan

Reputation: 19341

Juts give vertical-align: top; to div.container1

Because both container are display: inline-block; by default they are vertical-align:baseline.

div.container1{
    border: 1px solid black;
    display: inline-block;
    margin-left: 10px;
    vertical-align: top;
}

Working Fiddle

Upvotes: 2

satya
satya

Reputation: 1185

Please try this:

div.container1 {
    border: 1px solid black;
    display: inline-block;
    margin-left: 10px;
    float: left;
}

Upvotes: 1

Related Questions