CODEWITHSUNDEEP
htmlcss
factordog
factordog

Reputation: 597

Div not floating over other div

I have two div that I have floating. One is a background. The other is some text.

I am wanting the text to float over the background image that I have placed. I have gotten it working with all my other backgrounds before this, but for this specifically it seems to just push the content down below it randomly and cause my footer to float next to it.

Here is a fiddle so you can get an idea: http://jsfiddle.net/d78sdjm4/2/

The green (.contact_text) is supposed to be in the centre or at least on top of the red div (.mebg). Then the black (.footer) is supposed to be positioned directly beneath the two.

HTML: 

<div class="contactwrapper">
    <div class="contact">
     <p>please work</p>
    </div>
    <div class="mebg">
        <img src="images/contactnew.png" />
    </div>
</div>
<!-----------------------------------------------------------------------------------end of contact------------------------------------------------------------------------------------------>
<div class="footer">
<img src="images/footer.png" width="239" height="15" /> 
</div><!-----------------------------------------------------------------------------------end of footer------------------------------------------------------------------------------------------->

CSS: 

.contactwrapper{
    width:100%;
    position:relative;
}
.contact{
    float:left;
    background:#0F3;
}
.mebg{
    float:left;
    width:100%;
    background:#900;
}
mebg img{
    width:30%;
}
.footer{
    z-index: 1;
    height: 30px;
    background-color: #ffffff;
}

Upvotes: 1

Views: 60

Answers (5)

Marcelo
Marcelo

Reputation: 4425

Since you are already setting the position as relative for your contactwrapper, why not forego floats and just use absolute positioning?

Below is an example with your code as a base. Please note I removed a lot of styling that was unnecessary for the example.

.contactwrapper {
  position: relative;
}
.contact {
  background: #0F3;
  position: absolute;
  left: 0;
  right: 0;
}
.mebg {
  background: #900;
  height: 200px;
}
.footer {
  height: 30px;
  background-color: #000;
}

/* To look pretty: Hide overflow of the stock images */
.mebg,
.footer {
  overflow: hidden;
}
<div class="contactwrapper">
  <div class="contact">
    <p>please work</p>
  </div>
  <div class="mebg">
    <img src="http://www.lorempixel.com/700/200" />
  </div>
</div>
<!-----------------------------------------------------------------------------------end of contact------------------------------------------------------------------------------------------>
<div class="footer">
  <img src="http://www.lorempixel.com/700/15" />
</div>
<!-----------------------------------------------------------------------------------end of footer------------------------------------------------------------------------------------------->

Upvotes: 0

VelS
VelS

Reputation: 129

Here's the fiddle https://jsfiddle.net/rphsjt1q/1/

.contactwrapper{
	width:100%;
	position:relative;
    overflow:auto;
}
.contact{
	position:absolute;
	background:#0F3;
    left:0;
    right:0;
    bottom:0;
    top:0;
    width:100px;
    height:100px;
    margin:auto;
    text-align:center;
    z-index:1;
    
}
.mebg{
	float:left;
	width:100%;
	background:#900;
    height:200px;
}
mebg img{
	width:30%;
}
.footer{
	z-index: 1;
	height: 30px;
	background-color: #000;
    width:100%;
    display:block;
}
<div class="contactwrapper">
    <div class="contact">
     <p>please work</p>
    </div>
    <div class="mebg">
    	<img src="images/contactnew.png" />
    </div>
</div>
<!-----------------------------------------------------------------------------------end of contact------------------------------------------------------------------------------------------>
<div class="footer">
<img src="images/footer.png" width="239" height="15" /> 
</div><!-----------------------------------------------------------------------------------end of footer------------------------------------------------------------------------------------------->

Upvotes: 0

levelonehuman
levelonehuman

Reputation: 1505

You can move the comment div inside the red div mebg: 

<div class="contactwrapper">
    <div class="mebg">
        <img src="images/contactnew.png" />
        <div class="contact">
             <p>please work</p>
        </div>
    </div>
</div>
<!-----------------------------------------------------------------------------------end of contact------------------------------------------------------------------------------------------>
<div class="footer">
<img src="images/footer.png" width="239" height="15" /> 
</div><!-----------------------------------------------------------------------------------end of footer------------------------------------------------------------------------------------------->

Add in clear:both as detailed in the other answer and this should work (or at least looks) like you want it to.

see this jsfiddle for an example.

EDIT: I found this link on CSS positioning to be helpful. I think it explains things pretty clearly.

Upvotes: 2

Graham S.
Graham S.

Reputation: 1530

I had to make a few adjustments but this was able to get it to have the green div over top of the red div and keep the footer at the bottom:

.contactwrapper{
    width:100%;
    position:relative;
}
.contact{
    float:left;
    background:#0F3;
    position: absolute;   /* .contact needs absolute positioning */
}
.mebg{
    float:left;
    width:100%;
    background:#900;
    height:200px;
}
mebg img{
    width:30%;
}
.footer{
    z-index: 1;
    height: 30px;
    clear: both;       /* clear: both will bring the footer below the other divs */
    background-color: #000;
}

Upvotes: 3

Wild Beard
Wild Beard

Reputation: 2927

You can add clear: both; to .footer { } to get the black bar beneath the other two. Also floating an element that has a width of 100% doesn't usually produce the desired results you're going for. It may be floated but since the width is 100% everything is pushed after it anyways.

Upvotes: 1

Related Questions