div alignment within html

Question

div alignment within html

Navigation

#1 by (1 votes)
#2 by (-2 votes)

0

I have two divs, when I hide the first one I need the second to go up to her place, but it does not move, how can I make it stay in place of the first div,

Followthecode:

<!DOCTYPEhtml><html><head><metacharset="UTF-8">
    <title>Módulos</title>

    <style>
        table {
        }

        table-striped > tbody > tr:nth-child(odd) > th {
            background-color: red;
        }

        table-striped > tbody > tr:nth-child(odd) > td {
            background-color: white;
        }

        td {
            height: 40px;
        }

        th {
            color: white;
            background-color: #F44336;
            height: 40px;
            padding: 4px;
        }
    </style>
</head>
<body>
    <div id="divconsulta" class="container-fluid" style="margin-left: -29px; margin-right: -29px">
        <!--Striped Rows-->
        <div class="row clearfix">
            <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
                <div class="card-panel" style="margin-top: -29px; ">
                    <div class="body table-responsive">
                        <table id="grid_Modulos" class="table-striped"></table>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <form class="form" id="wizard_with_validation" method="POST">
        <div id="divcadastro" class="container-fluid" style="margin-left: -29px; margin-right: -29px;margin-top:0px;visibility:hidden">
            <!--Striped Rows-->
            <div class="row clearfix">
                <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
                    <div class="card-panel">
                        <div class="card" style="background: rgba(245, 245, 245, 0.6)">
                            <div class="body">
                                <div class="row">
                                    <input id="id_id" name="id_id" type="hidden" class="form-control input-style" autofocus required>
                                    <label class="label-margin-top">Descrição*</label>
                                    <input id="id_nome" name="id_nome" type="text" class="form-control input-style input-casesensitive" autofocus required>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </form>
</body>
</html>

html css

asked by anonymous 06.07.2017 / 20:43

2 answers

-2

Dude, what you can do is create a function in javascript, for example, triggered by clicking on a link, button, etc., which hides the first DIV and changes a CSS class from the second DIV by changing its position on the screen. So that it occupies the position previously occupied by the other. That's if both are visible when you load the page. One underneath the other. But if one is shown only when the other is closed, then the answer has already been given.

06.07.2017 / 21:48

An api in rest continues to run if you lose connection to the client Error in "switch case"

score 1 · Accepted Answer

There is a difference between using visibility: hidden and display: none in an element. The difference has been discussed previously here:

What's the difference between display: none and visibility: hidden?

In short, using visibility: hidden , the element space continues to be busy, not affecting page layout. If you want the layout to respond to the element's omission, use display: none .

Example using visibility: hidden

.red {
  background: red;
  height: 100px;
}

.green {
  background: green;
  height: 100px;
  visibility: hidden;
}

.blue {
  background: blue;
  height: 100px;
}

<div class="red"></div>
<div class="green">Este elemento será ocultado</div>
<div class="blue"></div>

Example using display: none

.red {
  background: red;
  height: 100px;
}

.green {
  background: green;
  height: 100px;
  display: none;
}

.blue {
  background: blue;
  height: 100px;
}

<div class="red"></div>
<div class="green">Este elemento será ocultado</div>
<div class="blue"></div>

Caution: When setting the display: none property using inline style, you will not be able to display the element through CSS or JavaScript, have higher priority than these, not being able to overwrite it.

#teste {
  display: block;
}

<div id="teste" style="display: none">Stack Overflow em Português</div>

Read about Which css selector has priority .