Three "<div class=foo>" boxes in the same line, is it possible?

#1 March 11th, 2007, 11:15 AM

Hi.

I'm trying to place three "<div class=foo>" boxes in the same line:

----html--------------------
<HTML><HEAD>
<link href="test.css" rel="stylesheet" type="text/css" />
</HEAD>
<body>
<div>
<div class="foo">1</div>
<div class="foo">2</div>
<div class="foo">3</div>
</div>
</body>
</HTML>
-------------------------

-------test.css----------
..foo
{
font-family: sans-serif;
font-size: 290%;
background-color: red;
margin: 5px;
width: 100px;
}
-----------------------

However, these three boxes are placed each in one line. What am I
doing wrong?

Thank you very much.

#2 March 11th, 2007, 11:15 AM

On 2007-03-11, Francesco Moi <francescomoi@usa.comwrote:

Quote:

Hi.
>
I'm trying to place three "<div class=foo>" boxes in the same line:
>
----html--------------------
><HTML><HEAD>
><link href="test.css" rel="stylesheet" type="text/css" />
></HEAD>
><body>
><div>
><div class="foo">1</div>
><div class="foo">2</div>
><div class="foo">3</div>
></div>
></body>
></HTML>
-------------------------
>
-------test.css----------
.foo
{
font-family: sans-serif;
font-size: 290%;
background-color: red;
margin: 5px;
width: 100px;
}
-----------------------
>
However, these three boxes are placed each in one line. What am I
doing wrong?

It's because div is display: block by default, and blocks start new
"lines", or at least, go beneath one another.

Add display: inline-block to .foo, or if you need it to work in FF or
IE, add float: left instead.

For completeness, display: inline is no good because you want to set the
widths on these boxes.

#3 March 11th, 2007, 03:45 PM

Scripsit Ben C:

Quote:

>However, these three boxes are placed each in one line. What am I
>doing wrong?

>
It's because div is display: block by default, and blocks start new
"lines", or at least, go beneath one another.
>
Add display: inline-block to .foo, or if you need it to work in FF or
IE, add float: left instead.

Alternatively, set position: relative for the outer div and use "absolute"
positioning for the inner divs. "Absolute" positioning then means
positioning relative to the outer div.

In a simple case, float: left is probably simplest. Remember to use clear:
both for the element after the divs to stop floating.

--
Jukka K. Korpela ("Yucca")
http://www.cs.tut.fi/~jkorpela/

#4 March 11th, 2007, 07:25 PM

On Mar 11, 9:31 am, "Jukka K. Korpela" <jkorp...@cs.tut.fiwrote:

Quote:

However, these three boxes are placed each in one line. What am I
doing wrong?

Quote:

Add display: inline-block to .foo, or if you need it to work in FF or
IE, add float: left instead.

>
Alternatively, set position: relative for the outer div and use "absolute"
positioning for the inner divs. "Absolute" positioning then means
positioning relative to the outer div.

Alternatively, use nobr tag.

#5 March 11th, 2007, 08:05 PM

On 2007-03-11, scripts.contact@gmail.com <scripts.contact@gmail.comwrote:

Quote:

On Mar 11, 9:31 am, "Jukka K. Korpela" <jkorp...@cs.tut.fiwrote:

Quote:

>However, these three boxes are placed each in one line. What am I
>doing wrong?

>

Quote:

Add display: inline-block to .foo, or if you need it to work in FF or
IE, add float: left instead.

>>
>Alternatively, set position: relative for the outer div and use "absolute"
>positioning for the inner divs. "Absolute" positioning then means
>positioning relative to the outer div.

>
Alternatively, use nobr tag.

The drawback with using position: absolute is that you will have to set
the "left" property on each block to position it on the line. With float
or inline-block, the browser works out those positions for you.

The problem with using the nobr tag is that, apart from being
nonstandard (the white-space property is preferred) it only affects how
inline boxes are broken to fit across lines. Since the OP wants to set
width on these boxes, they cannot be inline, and will therefore be
unaffected by nobr.

Three "<div class=foo>" boxes in the same line, is it possible?

Popular Articles

What is Bytes?