467,915 Members | 1,227 Online
Bytes | Developer Community
New Post

Home Posts Topics Members FAQ

Post your question to a community of 467,915 developers. It's quick & easy.

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

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
  • viewed: 13458
Share:
4 Replies
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
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
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
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.

Similar topics

54 posts views Thread by Brandon J. Van Every | last post: by
18 posts views Thread by Tuckers | last post: by
6 posts views Thread by Mason A. Clark | last post: by
6 posts views Thread by scottyman | last post: by
9 posts views Thread by liaoo | last post: by
37 posts views Thread by Jan Wagner | last post: by
4 posts views Thread by Anastasios Hatzis | last post: by
By using this site, you agree to our Privacy Policy and Terms of Use.