Home/ Questions/Q 7570879
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-30T15:31:44+00:00

I’m trying to create a pattern of showing three letters or words in boxes

  • 0

I’m trying to create a pattern of showing three letters or words in boxes of equal sizes, and the boxes are connected and different colors. I finally got that accomplished with a these style items “display:inline;float:left;”. But now when I try to put text before or after it, or put two of these sets of boxes on the same screen, things go crazy.

Sample: http://jsfiddle.net/cmjmb/

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<style type="text/css">
div.test {
    border: 1px solid black;
    align: center;
    padding: 10px;
    width: 50px;
    font - size: 300 % ;
}
div.boxtype1 {
    background - color: #2BFFE3;display:inline;float:left;
}
div.boxtype2
{
background-color:# 00806F;
    display: inline;
    float: left;
}
</style>
</head>

<body>
Before
<div class='test boxtype1'>A</div>
<div class='test boxtype1'>B</div>
<div class='test boxtype2'>C</div>
After
<br /><br />

Before
<div class='test boxtype1'>A</div>
<div class='test boxtype1'>B</div>
<div class='test boxtype2'>C</div>
After
<br /><br />

</body>
</html>
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    By using float: left you take the boxes out of the normal flow of elements, they ‘float’ to the left and the normal text floats around them. Probably that’s not, what you wanted.

    If you just leave out float: left it looks more like what you described. Still there is some space between the boxes. This is the normal white space, that is inserted between two words. You can avoid that by writing the three divs on one line – with no space in between.

    • 0