queenidog Posted December 15, 2016 Share Posted December 15, 2016 I'm new to forum, a neophyte when it comes to HTML and CSS, brought up via Frontpage with all its "foibles". Trying desperately to fix my website and make it all HTML5 and CSS3 valid. I'm going crazy trying to insert images in text (floating right or left) with a caption underneath. In the old days of tables I could do this in 5 seconds. So far everything I've tried just doesn't work. To begin clean I created the most simple of test programs with one photo, one caption, no overhead crap, no style sheets. Here is the code: <figure> <img alt="" src="literature/worktales/images/brunswickMineShotcrete.jpg" style="float:right"/> <figcaption>Shotcrete</figcaption> </figure> The results are here: www.raiderracing.com/test.htm. I did lots of research on this site and others and tried different scenarios and none worked. I'm using Expressions Web 4 for editing, and latest MS Edge or Google Chrome for browsers. I tried this on the W3C "Tryit" page and floating the figure left or right leaves the caption where it is. Using just <img alt="" src="literature/worktales/images/brunswickMineShotcrete.jpg" style="float:right"/>shotcrete achieves the same thing with 4 fewer commands. So, bottom line: how do I float photos left and right in text, and put a caption underneath? Link to comment Share on other sites More sharing options...
dsonesuk Posted December 15, 2016 Share Posted December 15, 2016 Float figure element not img element, if you just use img element with text there is no containment to separate another img and text placed next to it, then it will merge together producing uncontrollable results. Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now