This is Interesting: Free Magazines for Graphics designers and webmasters
Home > Archive > Stylesheets > March 2007 > Three "<div class=foo>" boxes in the same line, is it possible?
You are viewing an archived Text-only version of the thread.
To view this thread in it's original format and/or if you want to reply to
this thread please [click here]
| Author |
Three "<div class=foo>" boxes in the same line, is it possible?
|
|
| Francesco Moi 2007-03-11, 7: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.
| |
|
| On 2007-03-11, Francesco Moi <francescomoi@usa.com> wrote:
> 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.
| |
| Jukka K. Korpela 2007-03-11, 7:19 pm |
| Scripsit Ben C:
>
> 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/
| |
| scripts.contact@gmail.com 2007-03-11, 7:19 pm |
| On Mar 11, 9:31 am, "Jukka K. Korpela" <jkorp...@cs.tut.fi> wrote:
[color=darkred]
>
> 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.
| |
|
| On 2007-03-11, scripts.contact@XXXXXXXXXX <scripts.contact@XXXXXXXXXX> wrote:
> On Mar 11, 9:31 am, "Jukka K. Korpela" <jkorp...@cs.tut.fi> wrote:
>
>
> 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.
|
|
|
| | Copyright 2003 - 2008 forum4designers.com Software forum Computer Hardware reviews |
|