CODEWITHSUNDEEP
csshtml
raklos
raklos

Reputation: 28545

overlap across width of two divs

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

Upvotes: 2

Views: 4200

Answers (2)

Sotiris
Sotiris

Reputation: 40036

You can use the following code

css

 body,html {height:100%}
  #content {width:66.6%;height:100%;background:green;float:left;}
  #sidebar {width:33.3%;height:100%;background:blue;float:left;}
  #floated {width:100%;height:100px;background:red;position:absolute;top:300px;}

html

<div id="content"></div>
<div id="sidebar"></div>
<div id="floated"></div>

demo: http://jsbin.com/odabe3/3

The secret is to position the floated div with position:abolute;, in this case 300px from the top of the document. This will make it to still there. If you want to move it when you scroll, you can change the position:absolute; to position:fixed;. In any case you can take an element from the normal flow and position it in the place you need. You can find more information for position at w3 documentation http://www.w3.org/TR/CSS2/visuren.html#choose-position . Also you can find examples and a great guide for positioning at http://www.alistapart.com/articles/css-positioning-101/

Upvotes: 2

kamranicus
kamranicus

Reputation: 4387

  • 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>

Upvotes: 6

Related Questions