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. 4  13713 
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.
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/
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.
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. This thread has been closed and replies have been disabled. Please start a new discussion. Similar topics
by: Brandon J. Van Every |
last post by:
I'm realizing I didn't frame my question well.
What's ***TOTALLY COMPELLING*** about Ruby over Python? What makes you jump
up in your chair and scream "Wow! Ruby has *that*? That is SO...
|
by: Dan R Brown |
last post by:
I have a large form that is generated dynamically in a jsp using xml / xslt. So, to
break up this form into several "tabbed" sections, I break up the form using <div>
tags. Each <div...
|
by: Matt Adams |
last post by:
I want define for a couple of words inside a longer text with different font specifications.
I declared it like:
....text before....
<FONT class=aaa> these text should get other attributes...
|
by: Tuckers |
last post by:
My question is, if I have created my own library which lives in its own
install directory, to refer to its header file is it better to use
#include "MyLibrary.h"
or
#include <MyLibrary.h>
...
|
by: Mason A. Clark |
last post by:
LAST WORD(s):
1. MSIE6 and Firefox will go to the top of the page on
command <a href="#top">go upsy</a> even if
there is NO name="top" or id="top"
They know what a "top" is :-)
Opera...
|
by: scottyman |
last post by:
I can't make this script work properly. I've gone as far as I can with
it and the rest is out of my ability. I can do some html editing but
I'm lost in the Java world. The script at the bottom of...
|
by: liaoo |
last post by:
Dear all,
I have a question about using cout<<...
In standard C, I can use printf("%x",...) to print "hex" number. But in
Watcom C++, when using cout<<, I got the "decimal" representation !
...
|
by: Jan Wagner |
last post by:
Hi,
can't figure this one out, what's the CSS way to specify the language?
In HTML it would be simply an lang="xx" attribute, or XHTML
xml:lang="xx", but, how about in CSS? This would be...
|
by: Anastasios Hatzis |
last post by:
I'm looking for a pattern where different client implementations can use the
same commands of some fictive tool ("foo") by accessing some kind of API.
Actually I have the need for such pattern for...
|
by: Charles Arthur |
last post by:
How do i turn on java script on a villaon, callus and itel keypad mobile phone
|
by: BarryA |
last post by:
What are the essential steps and strategies outlined in the Data Structures and Algorithms (DSA) roadmap for aspiring data scientists? How can individuals effectively utilize this roadmap to progress...
|
by: nemocccc |
last post by:
hello, everyone, I want to develop a software for my android phone for daily needs, any suggestions?
|
by: Sonnysonu |
last post by:
This is the data of csv file
1 2 3
1 2 3
1 2 3
1 2 3
2 3
2 3
3
the lengths should be different i have to store the data by column-wise with in the specific length.
suppose the i have to...
|
by: marktang |
last post by:
ONU (Optical Network Unit) is one of the key components for providing high-speed Internet services. Its primary function is to act as an endpoint device located at the user's premises. However,...
|
by: Hystou |
last post by:
Most computers default to English, but sometimes we require a different language, especially when relocating. Forgot to request a specific language before your computer shipped? No problem! You can...
|
by: Oralloy |
last post by:
Hello folks,
I am unable to find appropriate documentation on the type promotion of bit-fields when using the generalised comparison operator "<=>".
The problem is that using the GNU compilers,...
|
by: jinu1996 |
last post by:
In today's digital age, having a compelling online presence is paramount for businesses aiming to thrive in a competitive landscape. At the heart of this digital strategy lies an intricately woven...
|
by: Hystou |
last post by:
Overview:
Windows 11 and 10 have less user interface control over operating system update behaviour than previous versions of Windows. In Windows 11 and 10, there is no way to turn off the Windows...
| | |
