Left Aligned #Content
Here is some text inside the #Content division
Click View > Source or Page Source in your browser to see the CSS and HTML used to construct this page .
.floatLeft - 25% width
Here is some text inside a floated left box.
Lorem ipsum dolor sit amet, eodem eleifend ad consuetudium humanitatis formas. Adipiscing est nulla in nihil nibh id.
This text is inside the #Content division but it appears between the two floated boxes. If you examine the Html code, you'll see the order in which it occurs is right after the .RightBox </div>. As more text is added, you'll notice the content begins to wrap around the floated boxes on either side.
Lorem ipsum dolor sit amet, eodem eleifend ad consuetudium humanitatis formas. Adipiscing est nulla in nihil nibh id. Claram processus hendrerit eorum ii investigationes delenit ut mazim. Amet iusto cum ex veniam me, anteposuerit commodo et at. Facit sollemnes saepius non lectores litterarum. Insitam eu quod te volutpat tincidunt eua nobis lius per. Iriure molestie dynamicus, erat decima. Videntur consequat legunt te odio assum iusto me est. Non, per elit, nunc suscipit fiant enim at. Euismod consuetudium videntur ad hendrerit eodem adipiscing laoreet cum claritas, etiam.
Lorem ipsum dolor sit amet, eodem eleifend ad consuetudium humanitatis formas. Adipiscing est nulla in nihil nibh id. Claram processus hendrerit eorum ii investigationes delenit ut mazim. Amet iusto cum ex veniam me, anteposuerit commodo et at. Facit sollemnes saepius non lectores litterarum. Insitam eu quod te volutpat tincidunt eua nobis lius per. Iriure molestie dynamicus, erat decima. Videntur consequat legunt te odio assum iusto me est. Non, per elit, nunc suscipit fiant enim at. Euismod consuetudium videntur ad hendrerit eodem adipiscing laoreet cum claritas, etiam.
both floats cleared with an <hr> tag below
Demos:
- Photoshop Tutorial - Box with Contoured Edges
- Bringing Image Slices into a CSS Layout
- CSS Disjointed Text Rollovers
- CSS Disjointed Menu Rollover
- Floats & Margins, 3 CSS Boxes
- CSS Menus
- CSS Sprites Demo I
- CSS Sprites Demo II
- CSS2 Captions on Floated Images
- CSS2 Sticky Text
- CSS3 Multi-Backgrounds
- Fixed Background Image
- Liquid Header
- Multi-Scrollbars
CSS Templates:
- Centered, Fixed-Width page with floats
- Centered, Liquid-Width page with floats
- I-Page, Liquid Header & Footer
- 1 Column, Fixed-Width Centered
- Faux Column, Fixed-Width Centered
- Right Column, Fixed-Width Centered
- 3 Column, Fixed-Width Centered
- 3 Column, Liquid Layout
- User Adjustable Page
- Horizontal & Vertical Centered