By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
435,638 Members | 2,241 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 435,638 IT Pros & Developers. It's quick & easy.

Floating DIVs and "carriage returns"

P: n/a
Hello,

Suppose I want to play with DIVs as if they were type characters. I have
a series of fixed-height (width is of no importance) blocks which must
follow one another from left to right, with a small margin between them.
This is easily done with the CSS float:left property.
But in this context, what is the proper way to do a Line Feed/Carriage
Return?
Take a look at the code below for example's sake. I have 8 DIVs and I
want to arrange them in 2 rows of 4.
DIVs on the same line are given class="d1" property to apply a left float.
I've given the 5th one class="d2" property (ie no float), and the 3
following DIVs are class="d1" again.
What do you think of this example ? Is it the right way to achieve what
I'm trying to do -- or do you know another? Can't there be issues with
margins that would prevent the "line break" to work OK?
In fact, I've tried this example in Firefox but my class="d2" element
simply doesn't show.

Thanks to those who'll take a look at the problem and to those who'll help!

Arnost
<html>
<head>
<title></title>
<style type="text/css">
<!--
div {height:24px; width:60px; background-color:#FF6666;
margin-right:1px; margin-bottom:1px;}
..d1 {float:left;}
..d2 {background-color:#CC3333;}
-->
</style>
</head>
<body>
<div class="d1"></div>
<div class="d1"></div>
<div class="d1"></div>
<div class="d1"></div>
<div class="d2"></div>
<div class="d1"></div>
<div class="d1"></div>
<div class="d1"></div>
</body>
</html>
Nov 3 '06 #1
Share this Question
Share on Google+
2 Replies


P: n/a
On 2006-11-03, Arnost Sobota <sa******@minefi.gouv.frwrote:
Hello,

Suppose I want to play with DIVs as if they were type characters. I have
a series of fixed-height (width is of no importance) blocks which must
follow one another from left to right, with a small margin between them.
This is easily done with the CSS float:left property.
But in this context, what is the proper way to do a Line Feed/Carriage
Return?
The clear property.
Take a look at the code below for example's sake. I have 8 DIVs and I
want to arrange them in 2 rows of 4.
Set both clear: left and float: left on the fifth one (.d2)
DIVs on the same line are given class="d1" property to apply a left float.
I've given the 5th one class="d2" property (ie no float), and the 3
following DIVs are class="d1" again.
What do you think of this example ? Is it the right way to achieve what
I'm trying to do -- or do you know another? Can't there be issues with
margins that would prevent the "line break" to work OK?
In fact, I've tried this example in Firefox but my class="d2" element
simply doesn't show.
It's behind the other ones. Because it's a block level box, it starts
right at the left of its container, and the floats originating in the
previous (anonymous) block box, its preceding sibling, overflow it.
><html>
<head>
<title></title>
<style type="text/css">
<!--
div {height:24px; width:60px; background-color:#FF6666;
margin-right:1px; margin-bottom:1px;}
.d1 {float:left;}
.d2 {background-color:#CC3333;}
-->
</style>
</head>
<body>
<div class="d1"></div>
<div class="d1"></div>
<div class="d1"></div>
<div class="d1"></div>
<div class="d2"></div>
<div class="d1"></div>
<div class="d1"></div>
<div class="d1"></div>
</body>
</html>
Nov 3 '06 #2

P: n/a
Thank you, Ben C, your explanations are pleasurably *clear* too!

Arnost
Nov 3 '06 #3

This discussion thread is closed

Replies have been disabled for this discussion.