Home/ Questions/Q 8745441
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-13T12:00:51+00:00

I was making a new design for my website. I thought that I should

  • 0

I was making a new design for my website. I thought that I should make different boxes. All of their borders and backgrounds had to be same, but their heights and widths had to be different. So, I created a css class. 

.box
{
    background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIxMDAlIiB5Mj0iMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzAwNWFmZiIgc3RvcC1vcGFjaXR5PSIwLjUiLz4KICAgIDxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzAwNWFmZiIgc3RvcC1vcGFjaXR5PSIwLjUiLz4KICA8L2xpbmVhckdyYWRpZW50PgogIDxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxIiBoZWlnaHQ9IjEiIGZpbGw9InVybCgjZ3JhZC11Y2dnLWdlbmVyYXRlZCkiIC8+Cjwvc3ZnPg==);
    background: -moz-linear-gradient(left,  rgba(0,90,255,0.5) 0%, rgba(0,90,255,0.5) 100%);
    background: -webkit-gradient(linear, left top, right top, color-stop(0%,rgba(0,90,255,0.5)), color-stop(100%,rgba(0,90,255,0.5)));
    background: -webkit-linear-gradient(left,  rgba(0,90,255,0.5) 0%,rgba(0,90,255,0.5) 100%);
    background: -o-linear-gradient(left,  rgba(0,90,255,0.5) 0%,rgba(0,90,255,0.5) 100%);
    background: -ms-linear-gradient(left,  rgba(0,90,255,0.5) 0%,rgba(0,90,255,0.5) 100%);
    background: linear-gradient(to right,  rgba(0,90,255,0.5) 0%,rgba(0,90,255,0.5) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#80005aff', endColorstr='#80005aff',GradientType=1 );

    border:thick white groove;
    border-bottom-color:gray;
    border-right-color:gray;
    border-top-left-radius:1em;
    border-bottom-right-radius:1em;

}

I put the HTML code in the body as –

    <body onload="load()">

    <center>

        <div style="width:1120px">
            <img src="images/blu-logo.png" style="float:left;">     
            <div class="box" style="width:900px;height:50px;float:right;margin-top:100px;">
            </div>
        </div>

        <div class="box" style="width:900px;height:500px;">
            <p>Sample text</p>
        </div>          
    </center>

</body>

I don’t know how but something crazy happened when I viewed the file in the browser as the division(<div>) that was supposed to be below the other actually went on the same position as the first one.

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    I think that your problem is to do with your floating elements.

    Try and the css property “overflow:auto” onto the DIV which contains the two floated elements.

    • 0