CODEWITHSUNDEEP
csslayouthtml
Mithrilhall
Mithrilhall

Reputation: 1502

div layout (float over other elements)

My window is split into two divs.

The left side has many divs and holds most of my form elements. The right side also contains divs and other form elements.

In my left div, I have some error messages that I would like to display and I would like them to float over other divs and elements.

Right now, when I display an error message the elements get moved around and my error message sometimes get cut in half (as pictured below).

enter image description here

Upvotes: 0

Views: 497

Answers (3)

chickpeas
chickpeas

Reputation: 443

If you want the error to go over the second div you can use position:absolute

is the error relative to the form or to a specific input? if it's relative to the input you can put a div with position: relative around the input and the error, for easier positioning: 

     .error {position:absolute; top:3px; right:3px}
     .inputBox {position: relative}

and something like:

    <div class="inputBox">
       <label>name</label>
       <input type="text"/>
       <span class="error">error</span>
    </div>

Upvotes: 1

Joshua
Joshua

Reputation: 3603

To achieve a "hover" / "float" effect you will need to use Javascript to get the current position of the input-in-error, and then use that position information to dynamically set position:absolute in CSS on the error message to appear above it.

Upvotes: 1

Vin&#237;cius Moraes
Vin&#237;cius Moraes

Reputation: 3516

Try to add position absolute on error div.
Without the code or a link is impossible to help...

Upvotes: 1

Related Questions