CODEWITHSUNDEEP
htmlcss
Becky
Becky

Reputation: 5585

Prevent div with dynamic content overlapping other divs

See this Fiddle

This is the div structure

<div class="wrapper">
    <div class="mainG mainGT">
        <div class="rawV">
            <div class="svs"></div>
            <div class="drgM"></div>
        </div>
    </div>
</div>
<div class="botttom">
    <button type="button">Click Me!</button>
</div>

The height of the .wrapper is dynamic (I've used .wrapper{height: 30px;} as an example in the fiddle). As you can see .wrapper is overlapping .botttom. How do I prevent .wrapper overlapping .botttom and have.botttombelow.wrapper` at all times?

|------------|
|  .wrapper  |
|------------|

|------------|
|  .bottom   |
|------------|

Upvotes: 2

Views: 1652

Answers (1)

Raj
Raj

Reputation: 209

Use min-height instead of height this will solve your issue.

.wrapper
{
min-height: 100px;
overflow: hidden;
}

Upvotes: 2

Related Questions