CODEWITHSUNDEEP
htmlcss
Arkady Karasin
Arkady Karasin

Reputation: 169

Move div down when parent div width changed

I have following page structure:

div_Menu | div_Stat1 div_Stat2 div_Stat3 div_Stat4

When page width is not enougth - 4 divs going under Menu div. If the width changed I want last div_Stat4 will go under div_Stat1.

Relevant part of the code:

<div class="menu">...</div>
<div class="action">
<div class="title">...</div>
<div class="stat">...</div>
<div class="stat">...</div>
<div class="stat">...</div>
<div class="stat">...</div>
</div>

css:

.menu {
float: left;
width: 200px;
height: 100%;
background-color: #006666;
color: #ffffff;
font-family: "Helvetica Neue",Georgia,Times,"Times New Roman",serif;
font-size: 2.0rem;
}
.action {
float: left;
padding-left: 60px;
}
.stat {
float: left;
background: #d8eacc;
padding: 10px;
border-color: azure;
border-style: solid;
text-align: center;
font-family: "Helvetica Neue",Georgia,Times,"Times New Roman",serif;
font-size: 1.6rem;
width: 200px;
margin-right: 10px;
}

What should I change?

Correct display:

enter image description here

When browser width smaller: enter image description here

Upvotes: 0

Views: 34

Answers (1)

Robo Robok
Robo Robok

Reputation: 22765

Try wrapping your menu and content in a flexbox:

<div class="container">
    <div class="menu">...</div>
    <div class="action">
        <div class="title">...</div>
        <div class="stat">...</div>
        <div class="stat">...</div>
        <div class="stat">...</div>
        <div class="stat">...</div>
    </div>
</div>

.container {
    display: flex;
}

That way, the .action will never go down.

Upvotes: 1

Related Questions