Return to Kroll Design home page

Floating an image to the
left of text, part 1

 
« Return

Float-related Menu:

Example 1 of 2. To float an image on the left, simply give the image a class of "float:left" as in this example. The text has no float or width applied to it:


Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum leo orci, lobortis condimentum semper eget, tempor nec elit. Pellentesque a vestibulum augue. Morbi auctor nibh consequat tortor ornare iaculis. Fusce quis scelerisque metus. Sed in tellus et elit pharetra ultrices. Aenean fermentum ornare mollis. Phasellus aliquet urna eu metus luctus id feugiat ipsum aliquet. Cras tristique venenatis arcu non molestie. Pellentesque mollis commodo mollis. Aliquam sodales, dolor eu feugiat fermentum, mi velit convallis ipsum, vel egestas libero est quis leo. Sed sollicitudin quam vel est consequat congue. Fusce vehicula orci ut erat mollis vehicula non ut ligula. Nam sodales facilisis consequat. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Curabitur quis arcu magna, vel dapibus mauris. Quisque dignissim nunc et magna rutrum luctus. Sed in ipsum nibh, at pellentesque lorem. Vestibulum non eros id ipsum porta lobortis sed a lacus. Maecenas enim tellus, elementum sit amet vehicula ut, mattis at magna. Nullam vehicula, orci at tempus congue, mauris quam adipiscing purus, quis fermentum lacus libero eget felis. Aliquam et mi turpis. Pellentesque vestibulum mauris non ipsum mattis interdum. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse odio justo, rutrum non iaculis dictum, dapibus sed purus. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Aliquam in odio justo, aliquet congue diam. Duis consequat imperdiet dapibus. Vivamus mollis accumsan vehicula. Nulla facilisi.
 

Example 2 of 2. If you don't want the text to flow around and under the photo, that is, if you want the text to be in a rectangular shape to the right of the image, float the image left as in Example 1, but also float the text left, giving it a width that is able to fit to the right of the image. It helps to have all page content within a container div, so that you know how much the width of the text can be:


Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum leo orci, lobortis condimentum semper eget, tempor nec elit. Pellentesque a vestibulum augue. Morbi auctor nibh consequat tortor ornare iaculis. Fusce quis scelerisque metus. Sed in tellus et elit pharetra ultrices. Aenean fermentum ornare mollis. Phasellus aliquet urna eu metus luctus id feugiat ipsum aliquet. Cras tristique venenatis arcu non molestie. Pellentesque mollis commodo mollis. Aliquam sodales, dolor eu feugiat fermentum, mi velit convallis ipsum, vel egestas libero est quis leo. Sed sollicitudin quam vel est consequat congue. Fusce vehicula orci ut erat mollis vehicula non ut ligula. Nam sodales facilisis consequat. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Curabitur quis arcu magna, vel dapibus mauris. Quisque dignissim nunc et magna rutrum luctus. Sed in ipsum nibh, at pellentesque lorem. Vestibulum non eros id ipsum porta lobortis sed a lacus. Maecenas enim tellus, elementum sit amet vehicula ut, mattis at magna. Nullam vehicula, orci at tempus congue, mauris quam adipiscing purus, quis fermentum lacus libero eget felis. Aliquam et mi turpis. Pellentesque vestibulum mauris non ipsum mattis interdum. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse odio justo, rutrum non iaculis dictum, dapibus sed purus. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Aliquam in odio justo, aliquet congue diam. Duis consequat imperdiet dapibus. Vivamus mollis accumsan vehicula. Nulla facilisi.
 



 
« Return


©2012 Kroll Design    info@KrollDesign.net    781.910.3694
Last modified: 10/15/2012 12:21 AM