CODEWITHSUNDEEP
htmlcss
user9772275
user9772275

Reputation:

DIV elements overlapping each other

I'm trying to make multiple divs go next to each other (on the same line) but they keep overlapping each other.

I've tried solving this issue with float: left; or display: inline-block; but the divs overlap each other instead of going next to each other on the same line.

(I used tachyons css toolkit)

<link rel="stylesheet" href="https://unpkg.com/[email protected]/css/tachyons.min.css"/>

HTML:

<body>
    <div id="guesses" class="br3 tc">
            <div class="colors">
                <div class="br-100 yellow"></div>
                <div class="br-100 orange"></div>
            </div>
    </div>
</body>

CSS:

#guesses {
    width: 512px;
    height: 512px;
    background-color: black;
    margin: 0 auto;
    margin-top: 64px;
    overflow: hidden;
    border: black 1px solid;
}
.yellow {
    background-color: yellow;
    width: 64px;
    height: 64px;
    position: absolute;
    margin: 16px;
}
.orange {
    background-color: orange;
    width: 64px;
    height: 64px;
    position: absolute;
    margin: 16px;
}

I expect the divs to be spread across the colors div in an equal way and that doesn't overflow.

Upvotes: 0

Views: 1450

Answers (4)

Alain Cruz
Alain Cruz

Reputation: 5097

You are better off using display: flex on the parent and display: inline-flex on the children. Also, adding justify-content: center will center the children for you. I added an additional class to your colors, so that we can reutilize it. Hope it helps!

#guesses {
    width: 512px;
    height: 512px;
    background-color: black;
    margin: 0 auto;
    border: black 1px solid;
}

.colors {
  display: flex;
  justify-content: center;
}

.color {
  display: inline-flex;
}

.yellow {
    background-color: yellow;
    width: 64px;
    height: 64px;
}
.orange {
    background-color: orange;
    width: 64px;
    height: 64px;
}
<body>
    <div id="guesses" class="br3 tc">
            <div class="colors">
                <div class="br-100 yellow color"></div>
                <div class="br-100 orange color"></div>
            </div>
    </div>
</body>

Upvotes: 0

Sunyatasattva
Sunyatasattva

Reputation: 5830

You'll first need to remove the position: absolute and then using display: inline-block does the trick no problem.

Working example

.orange,
.yellow {
  display: inline-block;
}

Perhaps you were applying this CSS rule somewhere else in your attempts? Or perhaps keeping your position: absolute?

Upvotes: 1

mbadeveloper
mbadeveloper

Reputation: 1270

#guesses {
    width: 512px;
    height: 512px;
    background-color: black;
    margin: 0 auto;
    margin-top: 64px;
    overflow: hidden;
    border: black 1px solid;
}
.yellow {
    background-color: yellow;
    width: 64px;
    height: 64px;
    margin: 16px;
    display: inline-block;
}
.orange {
    background-color: orange;
    width: 64px;
    height: 64px;
    margin: 16px;
    display: inline-block;
}
    <div id="guesses" class="br3 tc">
            <div class="colors">
                <div class="br-100 yellow"></div>
                <div class="br-100 orange"></div>
            </div>
    </div>

Upvotes: 0

Neha Sharma
Neha Sharma

Reputation: 772

You can do this by using CSS property - display: flex;

You need to remove the position too.

Here is the working code:

https://codepen.io/NehhaSharma/pen/XWWzZzW

Upvotes: 0

Related Questions