joecool Posted February 2, 2011 Report Share Posted February 2, 2011 Hi all, The learning never ends when it comes to CSS. 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. Simple? But not simple enough for me it would seem. Help... Quote Link to comment Share on other sites More sharing options...
Wickham Posted February 2, 2011 Report Share Posted February 2, 2011 (edited) 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 February 2, 2011 by Wickham Quote Link to comment Share on other sites More sharing options...
joecool Posted February 5, 2011 Author Report Share Posted February 5, 2011 Thanks Wickham, that worked nicely. Quote Link to comment Share on other sites More sharing options...
Recommended Posts
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.