I'm testing a simple HTML page.

<body onload="startApp()"> <header id="menu"> <a href="#" id="linkHome">Home</a> <a href="#" id="linkLogin">Login</a> <a href="#" id="linkLogout">Logout</a> <span id="loggedInUser"></span> </header> <section id="loadingBox">Loading ...</section> <section id="infoBox">Info</section> <section id="errorBox">Error</section> <main> <section id="viewHome"> <h1>Welcome</h1> Welcome to eShop. </section>

The "loadingBox" sections, etc., pop-up error messages, etc. The problem is that when a similar section appears with jQuery, the main "main" goes down and when the message disappears, the main section rises. How to make a static indent from HEADER?

  • one
    those sections that float must have position: absolute; - WebCoder
  • one
    those sections that float must have position: absolute; top: 0; while main you can make padding-top: 50px; at the same time, the "pop-up" sections must be transferred immediately under the main tag and set to it (main) position: relative; ... mass options ... you need more task details - WebCoder

1 answer 1

It's not entirely clear what exactly you want to see as a result, but ...

Alternatively, you can create a wrapper container in which messages will be displayed (some kind of messages-wrapper), but there will be problems if there are several messages and the sum of their heights exceeds the allocated space. In this case, applying the css min-height property to a wrapper with a value equal to the expected height of the allocated space will help:

min-height: 100px