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:-


#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
        float: left
        float: right


<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>

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.



Recommended Answers

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

Jump to Post

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.



Be a part of the DaniWeb community

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