Geek Answers Handbook

Override the width of two divs

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

How to create a div that fills the width of two columns? and block them?

or at least if I can create a red div inside a green div, it might somehow intersect with the blue.

enter image description here

+2
source share
2 answers
  • Make a green square position: relative
  • Make a red box inside the green window
  • Make a red box position: absolute; top: #pxwhere #px is how far you want it from the top of the green window.
  • Reinstall the green border overflow: visibleand the width of the red rectangle as much as you need.

, .

:

<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>
+5

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

, div floated position:abolute;, 300px . . , position:absolute; position:fixed;. . position w3 http://www.w3.org/TR/CSS2/visuren.html#choose-position. http://www.alistapart.com/articles/css-positioning-101/

+2

More articles:


All Articles