unable to set background color of div with absolute position

Question

I am a newbie to html/css and am trying to create my first webpage. I am unable to set background colour for div with class inner. As of now this div is displaying background colour set in banner-bottom class.

Following is my html:

    .banner-bottom{
      background:#F7F7F7;
      padding:1em 1em;
      text-align:center;
      position: relative;
    }
    
    .floatleft {
    	float:left;
    	width: 25%;
    	height: 100%;
    }
    
    .floatright {
    	float:right;
    	width: 75%;
    	background-color: #EEE;
    	position: relative;
    	text-align: center;
    }
    
    .inner{
    	position: absolute;
    	height:100%;
    	text-align: center;
    	background-color: #1b1b1b;
    	width: 100%;
    }	

<div class="banner-bottom" width="100%" >	
         <div class="floatleft"><input  type="button" class="pink_btn" value="Who?"/></div>
         <div class="floatright"><div class="inner"> some values here</div></div>
         <div style="clear:both;"></div>
    </div>
      

Any pointers on what I may be doing wrong? Thanks help! :)

Answer 1

The problem pops up when you set the height: 100% to your inner class. Absolute positioned elements are treated different because they break the box model of the DOM. You might want to use top bottom left and right properties to place the absolute positioned element where you want.

HTML:

.banner-bottom{
  background:#F7F7F7;
  padding:1em 1em;
  text-align:center;
  position: relative;
}

.floatleft {
    float:left;
    width: 25%;
    height: 100%;
}

.floatright {
    float:right;
    width: 75%;
    background-color: #EEE;
    position: relative;
    text-align: center;
}

.inner{
    color: white; /* added to see the text in the black background */
    position: absolute;
    text-align: center;
    background-color: #1b1b1b;
    right: 175px;
}

<div class="banner-bottom" width="100%" >	
     <div class="floatleft"><input  type="button" class="pink_btn" value="Who?"/></div>
     <div class="floatright"><div class="inner"> some values here</div></div>
     <div style="clear:both;"></div>
</div>

I added color: white; to .inner to see the text in the black background, you can change it depending on your preference.