How to do with objects on a page at a certain width to group vertically?

Asked

Viewed 42 times

1

Guys, I’m lined up a few div as columns inside another that serves as container. What I wanted to know is how do I make it in certain width of itself div or from the page they group together on top of each other in a vertical flow?

HTML

<!DOCTYPE html>
<html lang="pt-br">
<head>
    <meta charset="utf-8">
    <title>Layout Responsivo</title>
    <link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body>
    <div class="container" class="clearfix">
        <div class="header clearfix">
            <div class="logo">
                logo
            </div>
            <div class="menu">
                menu
            </div>
        </div>
        <div class="content clearfix">
            <div class="col" style="background: red;">

            </div>
            <div class="col" style="background: yellow;">

            </div>
            <div class="col" style="background: cyan;">

            </div>
        </div>
    </div>
</body>
</html>

CSS

html, body{
    padding: 0;
    margin: 0;
}

.clearfix:before,
.clearfix:after {
   content: " ";
   display: table;
}

.clearfix:after {
   clear: both;
}

.clearfix {
   *zoom: 1;
}

.container{
    margin: 0 auto;
    margin-top: 0;
    width: auto;
    height: 900px;

    /*...*/
    background-color: #876;
}

.header{
    width: 100%;
    margin: 0 auto;
    height: auto;
    margin-bottom: 3.6em;
    background-color: #2C82C9;
}

.logo{
    width: 100%;
    height: 160px;

    /*...*/
    background-color: transparent;
}

.menu{
    width: 100%;
    height: 70px;

    /*...*/
    background-color: #456;
}

/*Content*/

.content{

    margin: 0 auto;
    width: 88%;
    height: 400px;

    /*...*/
    background-color: #546;
}

.col{
    width: 33.33333333333333%;
    float: left;
    display: inline;
    height: 300px;
}
html css

  • Enter the code you already have, or the attempts you made that didn’t work.

  • Which Divs do you want to align vertically? O .header and the .content?

  • @Samirbraga these three with the class=col

  • Group one on top of the other, do you mean overlap the Divs? And overlap in vertical flow? I don’t quite understand what you want...

  • @Guillermo does not overlap. I want that when it reaches a certain size of the broswer window, for example, they stop being aligned and stay below each other. But the problem has been solved

2 answers

2


You can use the Media Querie of css:

.container {
  width: 100%;
  height: 1000px;
}

.col {
  display: inline-block;
  background: #333;
  width: 30%;
  height: 300px;
  margin: 2px 0;
}

@media (max-width: 500px) {
  .col {
    display: block;
    width: 100%;
    height: 200px;
  }
}
<div class="container">
  <div class="col"></div>
  <div class="col"></div>
  <div class="col"></div>
</div>

With the max-width you set the maximum width, when the page width is smaller than this, what you have inside the querie will be called.

Jsfiddle

  • 1

    Good! Thank you so much for the solution. See you

1

you can use a media-query

@media only screen and (max-device-width: 480px) {
    .col{
        width: 100%;
    }
}

  • For some reason black magic your style did not work, msm so thank you for the force. abs

Browser other questions tagged html css

You are not signed in. Login or sign up in order to post.