Why does the DIV break line when resizing?

Asked

Viewed 213 times

2

I have three divs next to each other, but I’ve defined that the middle div (espaco-contato) has a defined minimum width, however, that the lateral Ivds remain responsive.

What is happening is that by reaching the minimum width defined in the middle DIV (espaco-contato), the one on the right-hand side (espaco-interacao) line break and then the DIV (espaco-contato) also line quabra. I need the three DIV s to keep reducing their widths without line breaking.

Follow the link to check: https://jsfiddle.net/gladisonperosini/3bohLt7r/4/

How to solve?

Follows the CSS:

header{
    width: 100%;
    max-width: 1550px;
    margin: auto;
    background-color: #eee;
    padding: 5px;
    box-sizing: border-box;
    overflow: auto;
}
header div.espaco-logo{
    float: left;
    width: calc(100% / 3);
    height: 130px;
    background-color: #222;
}
header div.espaco-contato{
    float: left;
    width: calc(100% / 3);
    min-width: 450px;
    height: 130px;
    background-color: #ccc;
}
header div.espaco-interacao{
    float: left;
    width: calc(100% / 3);
    height: 130px;
    background-color: #222;
}

HTML

<header>

    <div class="espaco-logo"></div>

    <div class="espaco-contato"></div>

    <div class="espaco-interacao"></div>

</header>
css css3
  • 1

    put an example working with the problem, just observe the static code becomes more difficult to help

  • @Ricardopunctual Hello, follow the link https://jsfiddle.net/gladisonperosini/3bohLt7r/4/

  • 1

    Put display: Flex, in the header you should solve

  • @hugocsl Did not solve!

  • Gladison, as @hugocsl commented put a display:flex; resolve. (I also removed the floats, which I no longer need) For example: https://jsfiddle.net/0boad2kt/

3 answers

2

If the div has a minimum width of 450px, when the largura da tela divida por 3 is less than 450px (disregarding the padding that you put in the header), the middle div will continue with the same 450px (which is the minimum set), and will take up more space than defined in the function calc(100% / 3), causing the other side Ivs (the last one first, or both) to run out of space to stand by, causing the line break.

What you should do is use flexbox in header, as stated in the other responses, but there is another way that better leverages the flexbox feature:

In addition to waiving the use of float: left (which is not the best resource in these cases) can also dispense with the use of calc(100% / 3). Since you’re going to use flexbox, use instead of calc(), the property flex: 1 in each div (which would be the same as flex-grow: 1). This property will distribute the 3 Divs equally within the width of the header (keeping the minimum width of the defined middle div in 450px). If the width of the screen is equal to or greater than 450px * 3, that is to say, 1350px, the 3 Divs will have exactly the same width.

The code will look like this:

body{
   margin: 0;
}
header{
    width: 100%;
    max-width: 1550px;
    margin: auto;
    background-color: #eee;
    padding: 5px;
    box-sizing: border-box;
    overflow: auto;
    display: flex;
}
header div.espaco-logo{
    height: 130px;
    background-color: #222;
    flex: 1;
}
header div.espaco-contato{
    min-width: 450px;
    height: 130px;
    background-color: #ccc;
    flex: 1;
}
header div.espaco-interacao{
    height: 130px;
    background-color: #bbb;
    flex: 1;
}
<header>

    <div class="espaco-logo"></div>

    <div class="espaco-contato"></div>

    <div class="espaco-interacao"></div>

</header>

Note that with the use of the property flex the code gets thinner and better leveraged the resources of flexbox.

  • 3

    Put a well explained answer and suggesting a better solution and comes a user and negative without saying anything. This kind of user should review their concepts if they are really helping the community. Unfortunate! That’s the harm of Stackoverflow.

  • 5

    I step almost 1hr to write the answer, open manuals, read, analyze everything, do several tests, review everything before clicking "Post" to see if there is something wrong or if I wrote some nonsense or something very subjective, here comes a user and negative. It’s okay that he may not agree with something, but at the very least he should recognize the effort that was made and if he is negative (which is a right), at least say what he thought was wrong. That’s what I do with elaborate answers. With poor answers I tb negative without saying anything, but with elaborate, if I vote -1, I always leave a message.

0

Hello, you can resolve using the flex-box in this way:

header{
    width: 100%;
    max-width: 1550px;
    margin: auto;
    background-color: #eee;
    padding: 5px;
    box-sizing: border-box;
    overflow: auto;
    display: flex;
    flex-wrap: nowrap;
}
header div.espaco-logo{
    width: calc(100% / 3);
    height: 130px;
    background-color: #222;
}
header div.espaco-contato{
    width: calc(100% / 3);
    min-width: 450px;
    height: 130px;
    background-color: #ccc;
}
header div.espaco-interacao{

    width: calc(100% / 3);
    height: 130px;
    background-color: #bbb;
}

-3

Because this div she has a size when this screen size does not support div size she makes this line break you can change her size using @media screen and (max-width 480px) is an example or change size. if Voce watch div size does not change Voce would have to change width size for that screen.

@media screen and (min-width: 600px) {
  header div.espaco-logo{
    float: left;
    width:150px ;
    height: 130px;
    background-color: #222;
}

recommend to use bootstrap 4

Browser other questions tagged css css3

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