Home/ Questions/Q 3855320
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-19T17:45:28+00:00

Hi I have a website with 2 columns, one for main content(green box) and

  • 0

Hi I have a website with 2 columns, one for main content(green box) and one for sidebar(blue box).

How can a create a div that fills the width of the two columns?
and overlaps them?

or atleast if i can create the red div inside the green div it can somehow overlap into the blue one.

enter image description here

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team
    • Make the green box position: relative
    • Make the red box inside the green box
    • Make the red box position: absolute; top: #px where #px is how far you down you want it from the top of the green box
    • Again, set green box overflow: visible and the red box width as wide as you need.

    If the width of your layout is fluid, you might need to get creative.

    Here is a crappy example:

    <html>
<head>
<title>Foo</title>
<style type="text/css">

    #green-box { width: 400px; background: green; float: left; position: relative; height: 300px; overflow: visible; position: relative; }
    #blue-box { width: 100px; background: blue; float: left; height: 300px; }
    #red-box {
        position: absolute;
        top: 50px;
        width: 500px;
        background: red;
        height: 10px;
    }
</style>
</head>
<body>

    <div id="container">

        <div id="green-box">
            <p>Here is some text!</p>
            <div id="red-box"></div>
        </div>
        <div id="blue-box">

        </div>

        <div style="clear: both"></div>
    </div>

</body>
</html>
    • 0