Home/ Questions/Q 6809543
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-26T20:05:56+00:00

<!DOCTYPE html> <html> <head> <title>Title</title> <meta http-equiv=content-type content=text/html; charset=utf-8> <style type=text/css> body { background:

  • 0

http://i.imgur.com/FRE81.png

<!DOCTYPE html>
<html>
    <head>
        <title>Title</title>

        <meta http-equiv="content-type" content="text/html; charset=utf-8">

        <style type="text/css">
            body {
                background: #00BFFF;
                font-family: "Candara";
                src: url(data/candara.ttf);
            }

            #wrapper {
                margin: 0 auto;
                width: 800px;
                padding: 15px;
            }

            #wrapper:after {
                content: ".";
                display: block;
                clear: both; 
                height: 0;
                overflow: hidden;
            }
                #header {
                    display: block;
                    background-color: blue;
                }
                    #header .left {
                        display: inline-block;
                        padding: 15px 25px;
                        float: left;
                    }

                        #header .left h1{
                            display: inline-block;
                            font-weight: bold;
                        }

                    #header .right {
                        float: right;
                        display: inline-block;
                    }

                        #header .right span{
                            display: block;
                        }

                #page {
                    display: block;
                    float: left;
                }

                #page .box{
                    display: inline-block;
                    background: black;
                    float: left;
                }

                #header, .box {
                    background: blue;
                    opacity: 0.7;
                }
        </style>
    </head>
    <body>
        <div id="wrapper">
            <div id="header">
                <div class="left">
                    <h1>Title</h1>
                </div>

                <div class="right">
                    <span><b>needle:</b> <?php //echo $haystack; ?></span>
                    <span><b>needle:</b> <?php //echo $haystack; ?></span>
                    <span><b>Last update:</b> <?php //echo $lastupdate; ?></span>
                </div>
            </div>

            <div id="page">
                <div class="left box">
                    Heey mannn
                </div>
            </div>
        </div>
    </body>
</html>

This is the design im aiming for, but its not working at all, instead, i get this.

And i don’t know what im doing wrong, i realy don’t. Can you guys help me? All the things i want are in the image. And the red areas are just to mark that i want those boxes there. I also made a jsfiddle with the code. If anything is unclear, leave a comment please, instead of just thumbing it down, because its realy hard to explain…

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    If you want a transparent background, use rgba or hsla colors.

    Example:

    background-color: rgba(0, 0, 255, 0.7); /* Blue, opacity 0.7*/
    • 0