Home/ Questions/Q 7562661
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-30T13:27:53+00:00

I have the following HTML snippet: <body> <div class=main> <div class=topBar> <p>testing</p> </div> <div

  • 0

I have the following HTML snippet:

<body>
    <div class="main">

        <div class="topBar">
            <p>testing</p>
        </div>

        <div class="content">

            <div class="broadcastBar">
                <p>testing</p>
            </div>

            <div class="mainBody">
                <p>more testing</p>
            </div>

        </div>

    </div>    
</body>

Here is my CSS:

div.main {

}

div.topBar {
    background-color: Black;
    color: White;
    height: 50px;
    width: 100%;
    position: absolute;
    top: 0px;
    left: 0px;
}

div.broadcastBar {
    background-color: Gray;
    width: 300px;
    position: absolute;
    right: 0px;
    top: 0px;
    height: 100%;
}

div.content {
    background-color: Yellow;
    position: absolute;
    width: 100%;
    top: 50px;
    left: 0px;
    height: 100%;
}

My question is this. As you can see by the markup and CSS, I’m trying to have divs be the sections of the screen. But because <div class="content" /> has a position of absolute, it is causing the div to push below the browser window by 50px (which is what it is relative to the topBar).

I’ve tried making it so that the content div doesn’t have to be position absolute, but everything just pushes the divs all around and the div edges are no longer flush to each other or the browser window.

Any idea what I can do hear to alleviate my issue?

Edit

Added desired output: this screenshot is currently what the above markup and CSS render. This is what I’m going for (for the most part, without the extended/scroll bar effect). I want to have my divs flush against each other and to the browser window.

What is the best way to do this if not through absolute positioning?

enter image description here

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    What you are going to want to learn is using some standard formatting practises with float.

    Using absolute to position your elements will in the long run hurt you. If all your elements are using float, you will be able to better control their appearance.

    For Example:

    div.topBar {
    background-color: Black;
    color: White;
    height: 20%;
    width: 100%;
    float: left;
}

div.broadcastBar {
    background-color: Gray;
    width: 70%;
    height: 80%;
    float: left;
}

div.content {
    background-color: Yellow;
    width: 30%;
    height: 80%;
    float: left;
}

    @EDIT:

    So you Have 3 divs and you will want to stack them sequencially.

    <div class="header">headerdiv</div>
<div class="left">leftdiv</div>
<div class="right">rightdiv</div>

    Float follows this sequence so that by using these properties, elelments will be forced to fall after one another based on space constraints:

    div.header {
    background-color: Black;
    color: White;
    height: 20%;
    width: 100%;
    float: left;
}

div.left {
    background-color: Gray;
    height: 80%;
    width: 70%;
    float: left;
}

div.right {
    background-color: Yellow;
    height: 80%;        
    width: 30%;
    float: left;
}

    @QUESTION:

    So If you need to use pixel measurements, then you will need to encapsulate all of the elements in another container with the max width and height that your layout will be.

    <div class="container">
    <div class="header">headerdiv</div>
    <div class="left">leftdiv</div>
    <div class="right">rightdiv</div>
</div>

div.container{
    height: 100px;
    width: 100px;
    float: left;
}

div.header {
    background-color: Black;
    color: White;
    height: 20px;
    width: 100px;
    float: left;
}

div.left {
    background-color: Gray;
    height: 80px;
    width: 70px;
    float: left;
}

div.right {
    background-color: Yellow;
    height: 80px;        
    width: 30px;
    float: left;
}
    • 0