css 3 divs won't align

Question

trying to align 3 divs vertically. i got a container div which includes 3 divs and a footer. i've tried to give them max width, float them all left or right, float the container, lose the footer, but it's just not working. also, when i try to put long text inside, things go wrong very fast. also, need to keep it responsive for changes in window size. any ideas?

.container{
    background-color: gray;
    height: auto;
    text-align: center;
    margin: 0 auto;
    float: center;
    max-width: 90%;
    
}
.personalInfo{
    background-color: white;
    float: left;
    max-width: 33%;
    
}
.hobbies{
    background-color: blue;
    float: center;
    max-width: 33%;
    
 
}
.movies{
    float: right;
    background-color: green;
    max-width: 33%;
    
}
.footer{
    clear: both;
    height: 50px;
    background-color: aquamarine;
}

<!doctype html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <title>My App</title>
  <link rel="stylesheet" href="t.css" />
</head>
<body>
<div class="container">
  <div class="personalInfo">personalInfo<br/>Miusov, as a man man of breeding</div>
  <div class="hobbies">hobbies<br/>Miusov, as a man man of breeding and deilcacy, </div>
  <div class="movies">movies<br/>Miusov, as a man man of breeding and deilcacy, could n</div>
  <div class="footer">footer</div>
</div>    
</body>
<script src="j.js"></script>
</html>

there is no float center – Temani Afif Jul 01 '18 at 21:07 — Temani Afif, Jul 01 '18 at 21:07

score 0 · Answer 1 · answered Jul 01 '18 at 21:11

This is a good use case for a flexbox-based layout, like such:

.container {
  background-color: gray;
  text-align: center;
  margin: 0 auto;
  max-width: 90%;
  
  display: flex;
  flex-wrap: wrap;
}

.personalInfo {
  background-color: white;
}

.hobbies {
  background-color: blue;
}

.movies {
  background-color: green;
}

.personalInfo,
.hobbies,
.movies {
  flex: 0 0 calc(100% / 3);
}

.footer {
  height: 50px;
  background-color: aquamarine;
  flex: 0 0 100%;
}

<div class="container">
  <div class="personalInfo">personalInfo<br/>Miusov, as a man man of breeding</div>
  <div class="hobbies">hobbies<br/>Miusov, as a man man of breeding and deilcacy, </div>
  <div class="movies">movies<br/>Miusov, as a man man of breeding and deilcacy, could n</div>
  <div class="footer">footer</div>
</div>

working great now, thank you! – yarden Jul 01 '18 at 21:18 — yarden, Jul 01 '18 at 21:18

css 3 divs won't align

1 Answers1