Wednesday, April 8, 2009

CSS Floating Box Model

A simple floating box model example showing how to "float" div elements within another div element. This example includes boxes that float left and boxes that float right. It is easy to imagine how one could beef up the aesthetic quality of these floating boxes with rounded corners or varied background colours or patterns. The boxes used here are for demonstration purposes only.


<html>
<head>
<title>Floating Right and Wrapping</title>
<style>
#maincontent {
display:block;
width: 600px;
margin: 0px auto;
}

.wrapcontainer {
float:left;
width:600px;
padding: 5px;
border: 1px solid #777777;
margin: 5px;
display: block;
font-family: arial,helvetica,sans-serif;
}

.sidebar-right {
float: right;
border: 1px solid #777777;
padding: 5px;
margin: 5px;
display: block;
width: 210px;
font-family: arial,helvetica,sans-serif;
}

.sidebar-left {
float: left;
border: 1px solid #777777;
padding: 5px;
margin: 5px;
display: block;
width: 210px;
font-family: arial,helvetica,sans-serif;
}

h3 {
font-family: arial,helvetica,sans-serif;
color: #333333;
}

p {
font-family: arial,helvetica,sans-serif;
color: #333333;
}

</style>
</head>
<body>
<div id='maincontent'>
<h3>Wrap text around object floating right.</h3>
<p style='width:600px; display:block;'>
Below you can see three block level elements. They are #maincontent on the outside
#wrapcontainer which inherits it's width from #maincontent and floats to the left
of #maincontent. The last block level element you can see is called .sidebar-left|right. It
floats to the right of #maincontent.
</p>
<div class='wrapcontainer'>
<div class='sidebar-right'>
This text will appear inside the sidebar and will be constrained by the
width of the sidebar.
This text will appear inside the sidebar and will be constrained by the
width of the sidebar.
This text will appear inside the sidebar and will be constrained by the
width of the sidebar.
</div>
Te, vel dolor, dignissim volutpat, exerci wisi laoreet euismod et enim nulla. Vel ut eum et lobortis nisl consectetuer luptatum ad blandit, veniam dolore consequat veniam. In dolor iriure eros in odio ex, ea hendrerit, molestie, et zzril. Et facilisis, eu tation tation iriure minim et velit praesent dolore autem esse dolore dignissim, dolore blandit duis ex nisl praesent in exerci in nibh.
Facilisi veniam feugait dignissim zzril ea esse nostrud dolore veniam sit iriure te tincidunt feugait sit ut ipsum ullamcorper, facilisi minim qui, et facilisis vulputate. Ex illum consequat vulputate et velit dolore vel, consequat dolor laoreet dolore autem aliquip, suscipit, facilisi tation ullamcorper praesent minim, te eros dignissim consectetuer. Blandit, ut hendrerit exerci vel odio, iriure, lobortis vel eros enim, eu tation laoreet volutpat at aliquam. Wisi facilisis autem consectetuer vel, duis, accumsan delenit augue, aliquip qui vero hendrerit molestie euismod.
<div class='sidebar-right'>
And another<br/>
This text will appear inside the sidebar and will be constrained by the
width of the sidebar.
</div>
Feugait veniam ullamcorper iriure diam in duis zzril, in in, enim accumsan ut, iusto elit dolore feugiat odio luptatum ad tincidunt adipiscing, nulla. Commodo vulputate velit et, dolor minim blandit nonummy ex at blandit augue nostrud magna nonummy facilisis eu consequat. Lobortis odio in et ullamcorper molestie consequat wisi esse feugait dignissim feugiat ut et at, nisl nisl in, molestie, qui. Ad dolore, lorem minim vel consequat luptatum vero illum odio et ex augue. Vulputate euismod zzril commodo nulla amet exerci feugiat eum duis, autem nulla nostrud minim, te te, illum dolore nisl feugait consequat elit blandit. Hendrerit hendrerit ex dolor commodo, suscipit exerci ipsum ipsum dolore, volutpat.
Wisi volutpat at aliquam, hendrerit facilisis autem consectetuer vel, duis. Suscipit delenit augue, aliquip qui vero hendrerit molestie euismod velit, feugait nibh zzril ea delenit molestie dolore veniam quis, odio ut delenit facilisis nostrud iriure. Feugiat illum iriure in velit veniam sit tation commodo nulla facilisi consequat veniam nibh facilisis eu. At adipiscing eu lorem ipsum consequat aliquip vero blandit praesent.
<div class='sidebar-left'>
And another<br/>
This text will appear inside the sidebar and will be constrained by the
width of the sidebar.
</div>
Et in et ullamcorper molestie consequat wisi esse feugait dignissim feugiat ut et at, nisl nisl in. Nisl, qui, ut dolore, lorem minim vel consequat luptatum vero illum odio et ex augue esse euismod zzril commodo nulla amet exerci feugiat. Dolore duis, autem nulla nostrud minim, te te, illum dolore nisl feugait consequat elit. Ut erat hendrerit ex dolor commodo, suscipit exerci ipsum ipsum dolore, volutpat ea, wisi eum vulputate zzril.
Feugait veniam ullamcorper iriure diam in duis zzril, in in, enim accumsan ut, iusto elit dolore feugiat odio luptatum ad tincidunt adipiscing, nulla. Commodo vulputate velit et, dolor minim blandit nonummy ex at blandit augue nostrud magna nonummy facilisis eu consequat. Lobortis odio in et ullamcorper molestie consequat wisi esse feugait dignissim feugiat ut et at, nisl nisl in, molestie, qui. Ad dolore, lorem minim vel consequat luptatum vero illum odio et ex augue. Vulputate euismod zzril commodo nulla amet exerci feugiat eum duis, autem nulla nostrud minim, te te, illum dolore nisl feugait consequat elit blandit. Hendrerit hendrerit ex dolor commodo, suscipit exerci ipsum ipsum dolore, volutpat.
Wisi volutpat at aliquam, hendrerit facilisis autem consectetuer vel, duis. Suscipit delenit augue, aliquip qui vero hendrerit molestie euismod velit, feugait nibh zzril ea delenit molestie dolore veniam quis, odio ut delenit facilisis nostrud iriure. Feugiat illum iriure in velit veniam sit tation commodo nulla facilisi consequat veniam nibh facilisis eu. At adipiscing eu lorem ipsum consequat aliquip vero blandit praesent.
</div>
</div>
</body>
</html>
Post a Comment