Position div below other after browser decrease

Asked

Viewed 1,314 times

3

My question is how to position the black div below the red when the browser is resized?

.teste2 {
    float:right;
    width: 200px;
    height: 100px;
    margin-top: -100px;
    background-color:black;
}

#teste {
    width: 200px;
    height: 100px;
    display: flex;  
    flex-wrap: wrap;
    background-color: red;
    display: -webkit-flex; /* Safari */
    -webkit-flex-wrap: wrap; /* Safari 6.1+ */
}
<header id="header" style="width: 100%;">
    <div id="teste"></div>
    <div class="teste2"></div>
</header>

html5 css3

4 answers

2


To place the div side by side and break the line when resize use:

 #teste {
     float: left;
     width: 200px;
     height: 100px; 
     background-color: red;
}

.teste2 {
    float: right;
    width: 200px;
    height: 100px;
    background-color:black;
}

Example: https://jsfiddle.net/x6dg89sb/

To get them aligned when you break the line you can do so:

<header id="header" style="width: 100%;">
      <div id="teste"></div>
      <div id="divWrapper"></div>
      <div class="teste2"></div>
</header>

#divWrapper {
    height: 100px;
    float: left;
    clear: right;
    /* Standard */
    width: calc(100% - 400px);
    /* Firefox */
    width: -moz-calc(100% - 400px);
    /* WebKit */
    width: -webkit-calc(100% - 400px);
    /* Opera */
    width: -o-calc(100% - 400px);
}

#teste {
     float: left;
     width: 200px;
     height: 100px; 
     background-color: red;
}

.teste2 {
    float: left;
    width: 200px;
    height: 100px;
    background-color: black;
}

Example: https://jsfiddle.net/x6dg89sb/5/

  • 1

    Friend, it worked just by modifying the css. However, the black div is not aligned with the red div. You could align them?

  • I added another example in the answer, check if this is what you need...

  • 1

    All right, big hug!

1

Just add a Media Query, for example, this code will make the div position below when the screen size is at most 720px.

@media screen and (max-width: 720px) {
     .teste2, #teste {
         width:100%;
         float:left;
     }
     .teste2 {
         margin-top:0;
     }
 }

See in operation clicking here

You can understand more the operation of Media Query here.

0

A solution would be to use media queries, something like:

@media screen and (min-width:600px) {
   /* Dizer aqui que o tamanho das divs devem ocupar uma largura de 100%, assim uma ficaria em baixo da outra*/

   #teste{
     width: 100%;
   }
   #teste2{
      width: 100%;
   }
}

0

I don’t know if it’s feasible for you but I like to use Bootstrap in these cases, it speeds up development and is more visually beautiful in my opinion, take a look at the Grids System that you will understand what I’m talking about.

http://getbootstrap.com.br/css/#grid

Browser other questions tagged html5 css3

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