Placing items along a horizontal line

[fulio pen]

Hello,

My problem is in the following web page:

http://www.pinyinology.com/zianpan/design/zianpan.html

Thanks for help.

fulio pen

 

[dorayme]

You forgot a few...

#w {float:left; } /* no need for clear */
#x {float:left; }
#y {float:left; }
#z {float:left; }

You will also have to add a clear, either to the <p> or write another
class rule:

<p style='clear: both;'>
<b>Note:</b> ...

It would be simpler to CLASS, not ID all the <div>s and use one rule,
instead of an individual rule for each div, unless you have further plans
more intricate than your demo.

div.flt {float: left; }

Then all divs would be <div class='flt'>

Or, if you can only have DIVS in the relevant part, perhaps

<div class="littleboxes">
<div>a</div>
<div>b</div>
<div>c</div>
<div>d</div>
</div>

<div class="littleboxes">
<div>w</div>
<div>x</div>
<div>y</div>
<div>z</div>
</div>

with

.littleboxes {
margin-bottom: 1em;
overflow: hidden;
font-size: 2em;
line-height: 1em;
}

.littleboxes div {
float: left;
border: 1px solid red;
width: 1em;
height: 1em;
padding: .2em;
margin-right: .5em;
text-align: center;
}


Or, of course, if SPANs are allowed, the inner DIVs could be SPANs.
The latter are lighter and should be used where DIVS are not strictly
needed because - rest assured, I have it on higher authority - that
when Judgement Day comes, wastage of spiritual weight will count
against you and could tip the balance between going up and going down.

 

[fulio pen]

Or, if you can only have DIVS in the relevant part, perhaps

<div class="littleboxes">
<div>a</div>
<div>b</div>
<div>c</div>
<div>d</div>
</div>

<div class="littleboxes">
<div>w</div>
<div>x</div>
<div>y</div>
<div>z</div>
</div>

with

   .littleboxes {
      margin-bottom: 1em;
      overflow: hidden;
      font-size: 2em;
      line-height: 1em;
   }

   .littleboxes div {
      float: left;
      border: 1px solid red;
      width: 1em;
      height: 1em;
      padding: .2em;
      margin-right: .5em;
      text-align: center;
   }

Or, of course, if SPANs are allowed, the inner DIVs could be SPANs.
The latter are lighter and should be used where DIVS are not strictly
needed because - rest assured, I have it on higher authority - that
when Judgement Day comes, wastage of spiritual weight will count
against you and could tip the balance between going up and going down.

Dear Sirs,

Thanks a lot for your help. Following is the web page which is exactly
what I need thus far. I will study the code carefully. SPANs are
definitely needed, but I have to learn how to use them.

http://www.pinyinology.com/zianpan/design/dorayme2b.html

Thanks again.

fulio pen

 

[dorayme]

Dear Sirs,

Thanks a lot for your help. Following is the web page which is exactly
what I need thus far. I will study the code carefully. SPANs are
definitely needed, but I have to learn how to use them.

http://www.pinyinology.com/zianpan/design/dorayme2b.html

All you need to do for this is change the children of the two
container DIVs of class "littleboxes" to SPANs, simply substitute
"span" for "div" for these.

.littleboxes {
margin-bottom: 1em;
overflow: hidden;
font-size: 2em;
line-height: 1em;
}

.littleboxes span {
float: left;
border: 1px solid red;
width: 1em;
height: 1em;
padding: .2em;
margin-right: .5em;
text-align: center;
}


<div class="littleboxes">
<span>a</span>
<span>b</span>
<span>c</span>
<span>d</span>
</div>

<div class="littleboxes">
<span>w</span>
<span>x</span>
<span>y</span>
<span>z</span>
</div>

The one practical advantage (apart from the spiritual one I mentioned
before) is that it will look more like you want it to look if a user's
browser does not use the CSS. The SPAN is an inline element, it is
styled by default to be displayed as inline. The DIV, on the other
hand, is a block element and will naturally divide the two blocks of
four letters onto two lines (as you seem to want).

If you do use SPANs, you don't particularly need to float. One of the
functions of your original floats was to force the block element of
DIV to go side by side with others. You could instead just:

.littleboxes {
margin-bottom: 1em;
overflow: hidden;
font-size: 2em;
}

.littleboxes span {
border: 1px solid red;
width: 1em;
height: 1em;
padding: 0 .2em 0 .2em;
margin-right: .5em;
text-align: center;
}

 

[Jonathan N. Little]

The one practical advantage (apart from the spiritual one I mentioned
before) is that it will look more like you want it to look if a user's
browser does not use the CSS. The SPAN is an inline element, it is
styled by default to be displayed as inline. The DIV, on the other
hand, is a block element and will naturally divide the two blocks of
four letters onto two lines (as you seem to want).

If you do use SPANs, you don't particularly need to float. One of the
functions of your original floats was to force the block element of
DIV to go side by side with others. You could instead just:

.littleboxes {
margin-bottom: 1em;
overflow: hidden;
font-size: 2em;
}

.littleboxes span {
border: 1px solid red;
width: 1em;
height: 1em;
padding: 0 .2em 0 .2em;
margin-right: .5em;
text-align: center;
}

But the problem with spans is dims width and height will not apply. Note
with above example that the "W" box is wider...to get the "block effect
use inline-block to get rid of the float:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">

<html>

<head>

<title>Inline-Block</title>
<style type="text/css">
.littleboxes {
margin-bottom: 1em;
overflow: hidden;
font-size: 2em;
}

.littleboxes span {
display: inline-block;
border: 1px solid red;
width: 1em;
height: 1.5em;
padding: 0 .2em 0 .2em;
margin-right: .5em;
text-align: center;
}
</style>

</head>

<body>

<div class="littleboxes">
<span>a</span>
<span>b</span>
<span>c</span>
<span>d</span>
</div>

<div class="littleboxes">
<span>w</span>
<span>x</span>
<span>y</span>
<span>z</span>
</div>

</body>
</html>

 

[dorayme]

....

But the problem with spans is dims width and height will not apply. Note
with above example that the "W" box is wider...to get the "block effect
use inline-block to get rid of the float:

Yes, you are right, if OP does not use the original DIVs, then
inline-block is better than SPANs if he wants identical bordered
boxes. With the same advantages about if styling is off in a visitor's
browser,

 

[j]

You forgot a few...

#w {float:left; } /* no need for clear */
#x {float:left; }
#y {float:left; }
#z {float:left; }

You will also have to add a clear, either to the <p> or write another
class rule:

<p style='clear: both;'>
<b>Note:</b> ...

It would be simpler to CLASS, not ID all the <div>s and use one rule,
instead of an individual rule for each div, unless you have further plans
more intricate than your demo.

div.flt {float: left; }

Then all divs would be <div class='flt'>

We have gotten to the point that when you have float, every problem
needs float.

This is so much cleaner with inline-block:

div.flt{
display:inline-block;
}

Not only can you set a vertical-align to either top, middle or bottom,
but you don't have to worry about the parent container not having
height. Not to mention line wrapping problems with containers of uneven
height.

Note that IE7 and lower might have issues with inline-block (for divs,
not spans), I no longer care about IE7. Now, if IE8 and IE9 would die
off also...

Jeff