Flic Posted November 27, 2006 Share Posted November 27, 2006 Hi,I'm using floats to make some images I have lie in line with the text. This was the only way I could think of to do this but it means that the next pic starts when the paragraphy next to the pic stops, not ideal. The code I have currently is: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"><html><head><link rel="stylesheet" type="text/css" href="---.css"><style type="text/css">img {float: left;border-right-style: solid; border-right-color: white; border-right-width: 10px;border-bottom-style: solid; border-bottom-color: white; border-bottom-width: 10px;}h1 {font-size: 120%;font-weight: bold;}</style></head><body><div id="logo"></div><div id="header"><div id="linkcontainer"><a href="index.html" class="links">About</a><a href="products.html" class="links">Products</a><a href="prices.html" class="links">Prices</a><a href="accessories.html" class="links" style="width: 17%;">Accessories</a><a href="contact.html" class="links">Contact</a><a href="cart.php" class="links">Cart</a></div></div><div id="content"><p><img src="silo_small.jpg" alt="Click for a bigger photo"><h1>Silo name</h1>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent hendrerit dolor sit amet enim. Nunc elementum ligula quis dui. Curabitur convallis velit a tortor. Phasellus at dui. Aenean at tortor ut lorem rutrum facilisis. Cras sed sem eu tellus malesuada pulvinar. Nullam posuere, magna nec pretium euismod, eros turpis luctus lectus, ac semper diam justo nec felis. Phasellus lobortis, erat id sagittis aliquam, dolor mauris aliquam neque, ac dapibus massa felis in est. Ut auctor orci vel nulla. Integer vitae orci. Sed rutrum euismod nulla. Donec sapien.</p><br><p><img src="silo_small.jpg" alt="Click for a bigger photo"><h1>Silo name</h1>Aliquam vitae pede. Aenean semper eros eget leo. Fusce sed dolor. Integer id arcu sed libero eleifend bibendum. Phasellus accumsan arcu quis est. In pellentesque augue auctor lorem. Pellentesque condimentum vehicula eros. Suspendisse sed risus quis sapien dapibus tincidunt. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Mauris convallis viverra tortor. ###### sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nunc magna lacus, pharetra non, rutrum ac, nonummy a, elit. Proin dictum. Donec consequat gravida lectus. Sed arcu. Aliquam pulvinar euismod ipsum. Nulla lorem dolor, ullamcorper a, ultrices non, venenatis sed, enim. Donec congue odio vel nibh. Integer ac orci.</p><br><p><img src="silo_small.jpg" alt="Click for a bigger photo"><h1>Silo name</h1>Proin dapibus gravida mauris. Curabitur dignissim mauris ac lacus. Nunc vel nunc non magna rutrum congue. Aliquam leo. Vivamus ac sapien. Nulla facilisi. Proin sit amet nibh. Sed elit dolor, ultrices nec, suscipit vitae, rutrum non, pede. Cras posuere venenatis mi. Pellentesque pretium accumsan ligula. Pellentesque facilisis, lectus in faucibus laoreet, enim sapien iaculis tellus, pulvinar cursus turpis elit ac risus. Aliquam erat volutpat. Etiam rutrum eros at sapien. Pellentesque quis lacus.</p><br></div></body></html> The photos should be in line with each other with the text to the right.Any hints to fix it or an alternative method would be much appreciated.Thanks!Flic Link to comment Share on other sites More sharing options...
jlhaslip Posted November 27, 2006 Share Posted November 27, 2006 reference this page for a technique I have used before. 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