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

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

P: n/a
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.

Mar 11 '07 #1
Share this Question
Share on Google+
4 Replies


P: n/a
On 2007-03-11, Francesco Moi <fr**********@usa.comwrote:
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.
Mar 11 '07 #2

P: n/a
Scripsit Ben C:
>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/

Mar 11 '07 #3

P: n/a
On Mar 11, 9:31 am, "Jukka K. Korpela" <jkorp...@cs.tut.fiwrote:
However, these three boxes are placed each in one line. What am I
doing wrong?
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.

Mar 11 '07 #4

P: n/a
On 2007-03-11, sc*************@gmail.com <sc*************@gmail.comwrote:
On Mar 11, 9:31 am, "Jukka K. Korpela" <jkorp...@cs.tut.fiwrote:
>However, these three boxes are placed each in one line. What am I
doing wrong?
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.
Mar 11 '07 #5

This discussion thread is closed

Replies have been disabled for this discussion.