Member Avatar for Cap'nKirk

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

  • 2 Contributors
  • 2 Replies
  • 86 Views
  • 1 Month Discussion Span
  • Latest Post Latest Post by Cap'nKirk

Dani AI

Generated

Small markup mistakes can completely change how a browser builds the DOM. As pointed out, an extra character in the opening tag was the root cause here; fixing the markup put the floated image and caption back into the same container. When floats "escape" a box or text drops to a new line, the first steps are to check the HTML for stray characters, inspect the live DOM with the browser inspector, and run the markup through the W3C validator (https://validator.w3.org).

A more robust modern approach is to avoid floats for this kind of three-part horizontal layout and use Flexbox so the center text is reliably centered while the images keep their natural width. Example pattern:

<div class="toolbar">
  <img class="left" src="prev.png" alt="">
  <div class="caption">Caption loaded by script</div>
  <img class="right" src="next.png" alt="">
</div>

.toolbar {
  width: 400px;
  height: 25px;
  display: flex;
  align-items: center;
}
.caption { flex: 1; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.left, .right { flex: 0 0 auto; max-height: 100%; }

Quick troubleshooting checklist: confirm tags are well-formed; use the inspector to verify child nodes sit inside the container; check computed styles (float/display/margin); temporarily add colored outlines to boxes to see flow; and remember a tight fixed height plus padding can cause overflow—either increase the box, remove/preserve padding, or scale images with max-height. For Flexbox details see the MDN Flexbox guide (https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Flexbox).

Recommended Answers

All 2 Replies

Member Avatar for twiss

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

Member Avatar for Cap'nKirk

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.