Home/ Questions/Q 6106591
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-23T14:05:46+00:00

I have the following markup: <html> <body style=margin:0;padding:0> <div> <div style=border:3px solid red; width:70%;

  • 0

I have the following markup:

<html>
<body style="margin:0;padding:0">
    <div>
        <div style="border:3px solid red; width:70%; position:absolute; left:2.5%">Left</div>
        <div style="border:3px solid blue; width:25%; position: absolute; left:72.5%">Right</div>
        <div style="border:3px solid black; width:95%; margin: 0 auto">Bottom</div>
    </div>
</body>
</html>

What I am trying to achieve here is three divs layed out like this:

+---------------------------+--------+
|Left                       |Right   |
+---------------------------+--------+
|Bottom                              |
+------------------------------------+

However, with my markup the “bottom” div is overlapping with the “left” & “bottom” ones.

How should I style those 3 elements to achieve this effect?

Note that “bottom” is not the last element on the page. I would simply like “left” and “right” to be in one line and for the page flow to continue with default positioning from the following lines.

EDIT: In addition to the accepted answer… If you don’t have static heights or for some reason don’t want to hardcode it, you can achieve similar effect with:

<div style="border:3px solid red; width:70%; position:absolute; left:2.5%">Left</div>
<div style="border:3px solid blue; width:25%; margin-left:72.5%">Right</div>
<div style="border:3px solid black; width:95%; margin: 0 auto">Bottom</div>
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    I think the problem is that when you have elements positioned absolutely, they are taken out of the document flow. So the elements that come after can’t see them, assume they aren’t there, and jump up. To just get your “bottom” div to be under your “left”/”right” divs, you have to give it a margin-top equal to their heights (or something similar to that).

    • 0