CODEWITHSUNDEEP
javascripthtmlcssweb
Bogdan Lazar
Bogdan Lazar

Reputation: 111

HTML CSS Content div won't float over

I am trying to place the content div over both background divs but instead my code sets it only on the bottom div. Below there are 2 images that show you what I want to achieve and what is happening.

Image 1: What I want to achieve Goal

Image 2: The problem The problem

HTML:

<div class="middle">
<div class="middle_bot">


    <div id="content">
        <p class="big">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
        Curabitur tellus felis, sagittis at neque placerat, 
        laoreet mollis massa. Sed et purus mollis, fringilla 
        tellus et, tincidunt eros. Ut dolor ipsum, feugiat et 

        </p>
    </div>
</div>
</div>

CSS:

.middle
{

background-image: url(images/bg_middle.png); /* fallback */
background-image: url(images/bg_middle.png), -webkit-gradient(linear, left top, left bottom, from(#000000), to(#009dca)); /* Saf4+, Chrome */
background-image: url(images/bg_middle.png), -webkit-linear-gradient(top, #000000, #009dca); /* Chrome 10+, Saf5.1+ */
background-image: url(images/bg_middle.png),    -moz-linear-gradient(top, #000000, #ffffff); /* FF3.6+ */
background-image: url(images/bg_middle.png),     -ms-linear-gradient(top, #000000, #009dca); /* IE10 */
background-image: url(images/bg_middle.png),      -o-linear-gradient(top, #000000, #009dca); /* Opera 11.10+ */
background-image: url(images/bg_middle.png),         linear-gradient(to bottom, #000000, #009dca); /* W3C */

    /*background-color:blue;
    background-repeat: repeat;
    background: url(images/bg_middle.png);*/
    height: 40%;
    width: 100%;
}

.middle_bot
{

background-image: url(images/bg_middle2.png); /* fallback */
background-image: url(images/bg_middle2.png), -webkit-gradient(linear, left top, left bottom, from(#000000), to(#ffffff)); /* Saf4+, Chrome */
background-image: url(images/bg_middle2.png), -webkit-linear-gradient(top, #000000, #ffffff); /* Chrome 10+, Saf5.1+ */
background-image: url(images/bg_middle2.png),    -moz-linear-gradient(top, #000000, #ffffff); /* FF3.6+ */
background-image: url(images/bg_middle2.png),     -ms-linear-gradient(top, #000000, #ffffff); /* IE10 */
background-image: url(images/bg_middle2.png),      -o-linear-gradient(top, #000000, #ffffff); /* Opera 11.10+ */
background-image: url(images/bg_middle2.png),         linear-gradient(to bottom, #000000, #ffffff); /* W3C */

    /*background-color:blue;
    background-repeat: repeat;
    background: url(images/bg_middle2.png);*/
    height: 50%;
    bottom:0;
    position:absolute;
    width: 100%;
}

#content
{
    background: url(images/content2.png);
    width: 800px;
    padding: 10px;
    border: 1px solid #373737;
    margin: 0;
    word-wrap: break-word;
    margin-left: auto ;
    margin-right: auto ;
    box-shadow: 2px 2px 2px #000000;
}

Upvotes: 2

Views: 186

Answers (1)

frenchie
frenchie

Reputation: 52007

This is something that simplifies your code and replicates the layout you're describing:

CSS:

 #Navigation{
    height:50px;
    width:100%;
    color:white;
    text-align:center;
    background:black;}

#Middle{
    height:200px;
    overflow:visible;
    background:brown;}

#Content{
    margin:0px auto;
    width:200px;
    height:300px;
    position:relative;
    background:blue;}

#MiddleBottom{
    height:200px;
    background:green;}

HTML:

<div id="Navigation">navigation<div>

<div id="Middle">
    <div id="Content"></div>    
</div>

<div id="MiddleBottom"></div>

And the jsFiddle is here From here, you can adjust it to fit your needs.

Upvotes: 1

Related Questions