Hi,

I am trying to figure out how to place an image that is floated to the left, text that should be centered & and an image that is floated to the right all within the same div that is 400px X 25px.

Here is my code at the moment:-

THE CSS

#container {
    	width: 400px;
    	height: 25px;
    	background-color: #ffffff;
    	padding: 4px 4px 4px 4px
    }
    
    #caption {
      FONT-SIZE: 14px;
    	COLOR: #000000;
    	FONT-FAMILY: Verdana, Arial, Helvetica, sans-serif
    }
    
     #imgsleft 
      {
        float: left
      }
      
     #imgsright
      {
        float: right
      }

THE HTML

<div id="container">
  	  	
  		<div =id="imgsleft"><img src="prev_off.png"></div>
      
      <div id="caption"></div>
      
      <div id="imgsright"><img src="next_off.png"></div>
      
      </div>

This outputs as the first image floated left, within the 'container' div, as background is white.
A new line.
The 'caption', which is dynamically loaded from Javascript, left justified. Not within 'container' div.
A new line.
The second image floated right. Also not within 'container' div.

Any help would be appreciated.

Regards..,

MT

Recommended Answers

All 2 Replies

The problem is <div =id="imgsleft"> . It should be <div id="imgsleft"> .

Thanks for replying, I did spot this silly error in the end.

Regards

MT

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.