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>
