CODEWITHSUNDEEP
htmlcss-float
miraco
miraco

Reputation: 418

3 divs in a row with backgrounds

I am trying to put 3 divs in a row [1][2][3].

[1] should have a background image repeating to the left

[2] must be centered. its 1000 px

[3] should have a background image repeating to the right

The problem is that [1] appears on the top of[2],[3] below [2] and the background images for [1] and [3] don't appear. If I just put a color instead of the image,it appears(the path is correct).

HTML:

 <div id="topleft">left</div> 
 <div id="top" >  
      <div class="container"/>  
          <div id="header">Menu</div>  
      </div> 
 </div> 
 <div id="topright">right</div>

CSS:

#topleft {
  background-image: url(images/leftrepeat.png);
  background-repeat: repeat-x;
  float: left;
}

#top .container {  
  background-image:url(images/center.png);  
  background-repeat:no-repeat;  
  min-height:151px;  
  width:1000px;
  float: center;
}  

#topright {
  background-image: url(images/rightrepeat.png);
  float: right;
  background-repeat: repeat-x;
}

Upvotes: 0

Views: 207

Answers (4)

Lisa
Lisa

Reputation: 416

You need to have something inside the divs in order to have a background image to appear. You can´t have empty divs with just background image... Like above said, try setting the width and height on the divs and you could put some text inside maybe with the same color as the background image. Or you could put a transparent image with the right width/height inside the div and then the background image behind...

And yeah, float left on all!

Try setting the width on the divs in percentage instead. This way they should automatically adjust after the screen size/resolution.

Upvotes: 1

mgrahamjo
mgrahamjo

Reputation: 219

float:center; isn't valid - to put elements on the same line you can float them all left. For the rightmost element (#topright) you can optionally float it right, depending on your layout.

If you want #top to be on the same line as #topleft and #topright, it needs to be a floated element, rather than .container.

For your background images - have you tried setting a width and height for #topleft and #topright?

Upvotes: 0

TJ Fogarty
TJ Fogarty

Reputation: 161

You need to move your 'topright' above the 'container' in the HTML

<div id="topleft"> 
  left
</div> 

<div id="topright">  
     right
</div> 

 <div id="top" >  
      <div class="container"/>  
          <div id="header">  
           Menu
           </div>  
       </div> 
</div>

Then the CSS for your container should remove the float: center; and add margin: 0 auto;

As for the images, just be sure of the paths as they should be appearing, and that the divs are large enough to display a background image.

Upvotes: 0

suspectus
suspectus

Reputation: 17258

Changing all the floats to 

  float:left;

will stack the three elements horizontally beside each other.

Upvotes: 0

Related Questions