How do I fix the layout and size of a floating html div?

Question

Below is the html in question By default it appears as: Which is completely wrong, it should be on two lines and it should also look "pretty" but it looks pretty ugly at the moment. The aim of the box is so that it looks like a "Loading" box which after time (already incorporated into my main bit of code) for it to disappear once loaded, so the only problem with this at the moment is that it looks ugly and doesn't layout correctly :( The reason I have two div blocks inside the main div is because they're going to be different size and color text (I think) If anyone has a completely different looking loading message/bar/popup that they think I would like to use please feel free to post. ```

Accepted Answer

You don't need the `position:fixed`, `top` and `left` on anything inside the loading box. I have also made some changes to the positioning and spacing. Hope you like it! http://jsfiddle.net/myajouri/9eZNQ/ HTML ```

Loading, Please Wait... (click to abort)

``` CSS ``` .loadingText { color: white; font-family: sans-serif; font-size: 16px; } .loadingText a { line-height: 32px; color: inherit; font-size: 14px; text-decoration: none; } .loading { z-index: 999; position: fixed; left: 50%; top: 50%; width: 170px; height: 90px; margin-left: -95px; margin-top: -55px; padding: 10px; border: 1px solid white; -moz-border-radius: 10px; border-radius: 10px; background: rgba(0, 0, 0, 0.75); text-align: center; } #circularG { position:relative; width:25px; height:25px; margin: 5px auto 15px auto; } .circularG { position:absolute; background-color: white; width:6px; height:6px; -moz-border-radius:4px; -moz-animation-name:bounce_circularG; -moz-animation-duration:1.12s; -moz-animation-iteration-count:infinite; -moz-animation-direction:linear; -webkit-border-radius:4px; -webkit-animation-name:bounce_circularG; -webkit-animation-duration:1.12s; -webkit-animation-iteration-count:infinite; -webkit-animation-direction:linear; -o-border-radius:4px; -o-animation-name:bounce_circularG; -o-animation-duration:1.12s; -o-animation-iteration-count:infinite; -o-animation-direction:linear; -ms-border-radius:4px; -ms-animation-name:bounce_circularG; -ms-animation-duration:1.12s; -ms-animation-iteration-count:infinite; -ms-animation-direction:linear; } #circularG_1 { left:0; top:10px; -moz-animation-delay:0.42s; -webkit-animation-delay:0.42s; -o-animation-delay:0.42s; -ms-animation-delay:0.42s; } #circularG_2 { left:3px; top:3px; -moz-animation-delay:0.56s; -webkit-animation-delay:0.56s; -o-animation-delay:0.56s; -ms-animation-delay:0.56s; } #circularG_3 { top:0; left:10px; -moz-animation-delay:0.7s; -webkit-animation-delay:0.7s; -o-animation-delay:0.7s; -ms-animation-delay:0.7s; } #circularG_4 { right:3px; top:3px; -moz-animation-delay:0.84s; -webkit-animation-delay:0.84s; -o-animation-delay:0.84s; -ms-animation-delay:0.84s; } #circularG_5 { right:0; top:10px; -moz-animation-delay:0.98s; -webkit-animation-delay:0.98s; -o-animation-delay:0.98s; -ms-animation-delay:0.98s; } #circularG_6 { right:3px; bottom:3px; -moz-animation-delay:1.12s; -webkit-animation-delay:1.12s; -o-animation-delay:1.12s; -ms-animation-delay:1.12s; } #circularG_7 { left:10px; bottom:0; -moz-animation-delay:1.26s; -webkit-animation-delay:1.26s; -o-animation-delay:1.26s; -ms-animation-delay:1.26s; } #circularG_8 { left:3px; bottom:3px; -moz-animation-delay:1.4s; -webkit-animation-delay:1.4s; -o-animation-delay:1.4s; -ms-animation-delay:1.4s; } @-moz-keyframes bounce_circularG { 0% { -moz-transform:scale(1) } 100% { -moz-transform:scale(.3) } } @-webkit-keyframes bounce_circularG { 0% { -webkit-transform:scale(1) } 100% { -webkit-transform:scale(.3) } } @-o-keyframes bounce_circularG { 0% { -o-transform:scale(1) } 100% { -o-transform:scale(.3) } } @-ms-keyframes bounce_circularG { 0% { -ms-transform:scale(1) } 100% { -ms-transform:scale(.3) } } ```

How do I fix the layout and size of a floating html div?

Solution

Problem