Forums

ufo973

I want the content div not to overlap bottom and top div.

<html>
    <head>
        <style>
            #container{
                width: 300px;
                position: relative;
                background-color: yellow;
                position: relative;
            }
            #cont-top{
                position: absolute;
                top: 0;
                width: 290px;
                height: 25px;
                background-color: orange;
            }
            #content{
                width: 295px;
                height: auto;
                background-color: pink;
                clear: both;
            }
            #cont-bottom{
                position: absolute;
                bottom: 0;
                width: 290px;
                height: 25px;
                background-color: orange;
            }
        </style>
    </head>
    <body>
        <div id="container">
            <div id="cont-top"></div>
            <div id="content">
                line 1<br>
                line 2<br>
                line 3<br>
                line 1<br>
                line 2<br>
                line 3<br>
                line 1<br>
                line 2<br>
                line 3<br>
            </div>
            <div id="cont-bottom"></div>
        </div>
    </body>
</html>

srig99

@ufo973 Why don't you just set it up like this: http://codepen.io/srig99/pen/vwqsb? Absolute positioning can be painful to go through. Try simplifying it like the previous pen. If this is a requirement, then let me know and I'll look further into the issue.

etarte

Is there a reason you're not floating #cont-top and #cont-bottom? That would the problem.

treehouse : what would you like to learn today?

Forums

[Solved] clear: both; not working?