Jump to content
Killersites Forums

Simple Image and Text Alignment Problem

Recommended Posts

Hi all,


The learning never ends when it comes to CSS. :blink:


I am simply trying to accomplish having two images with text in the middle, something like this:


<img src="#" title="left side image">This is the text<img src="#" title="right side image">


I have tried different things such as putting things in div's and using display:line, I tried "positioning" them, but nothing seems to work properly.


Everything needs to be in a line and left image on the left, text in the middle, right image on the right.




But not simple enough for me it would seem.



Link to post
Share on other sites

You should be able to do it if you code the images float: left; or float: right; and display: block; with sizes and then let the text in the middle move up into any space between them.


See http://www.wickham43.net/threecolumns.php item 8 which allows text to wrap under either side element


or item 9 where the central text is in a div with left and right margins to stop the wrapping if you do NOT state a width or float for the div with the text. Item 11 is the same but with flexible width and shows the middle div change width with different window widths.


Images left and right should probably be

#left { float: left; width: ??px; display: block; }
#right { float: right; width: ??px; display: block; }
#mid { margin-left: ??px; margin-right: ??px; /*no float: left; and no width; margins as image width*/ }


<img id="left" src="left.jpg" alt="Left image">
<img id="right" src="right.jpg" alt="Right image">
<div id="mid"><p>Middle text</p></div> <!--this must be coded after the two floated images-->

You will probably need clear: both; in the style of the first element lower down to clear the floats.

Edited by Wickham
Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

  • Create New...