467,915 Members | 1,718 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.

HELP | How can I display DIVs block by block INLINE? | key: div display:inline

the HTML is:
----------------------------------------------
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN"
"http://www.w3.org/TR/REC-html40/strict.dtd">
<html>
<head>
<title>foo</title>
<style type="text/css">
<!--
..b {
width:200px;
height:100px;
}
#one {
background: #900;
}
#two {
background: #090;
}
#three {
background: #009;
}
#four {
background: #099;
}
#five {
background: #909;
}
->
</style>
</head>
<body>

<div class="b" id="one">111111</div>
<div class="b" id="two">222222</div>
<div class="b" id="three">3333</div>
<div class="b" id="four">44444</div>
<div class="b" id="five">55555</div>

</body>
</html>
---------------------------------------------------
now, they dispaly like:
+-------------+
|11111 |
+-------------+
|22222 |
+-------------+
|33333 |
+-------------+
|44444 |
+-------------+
|55555 |
+-------------+

but I want it to display like:
+-------------+-------------+-------------+-------------+-------------+
|11111 |22222 |33333 |44444 |55555 |
+-------------+-------------+-------------+-------------+-------------+

so I added "display:inline" to .b:
..b {
display:inline; /*added*/
width:200px;
height:100px;
}

but the "width" and "height" are not working!
I mean, they display one by one, not block by block.

I need your help, thank you!

Feb 4 '06 #1
  • viewed: 2143
Share:
4 Replies
On Sat, 04 Feb 2006 04:32:05 +0100, <tx****@gmail.com> wrote:

so I added "display:inline" to .b:
.b {
display:inline; /*added*/
width:200px;
height:100px;
}

but the "width" and "height" are not working!


Inline elements (or elements pretending to be inline) don't have a width
or height. If you want the block elements to keep a specific height and
width, you have to let them be block elements.

What you could try is to float them left. If you don't want a line break
to a new line if the viewport is too narrow to display them all in line,
you could wrap them in a containing div and add the property/value
'white-space:nowrap;'.

This layout is usually used for a menu bar. An example for a basic
horizontal menu bar you can find in
<URL:http://www.pretletters.net/_test/voorbeeld_horizontaal-menu.html>.
But I'm guessing this is what you might want, because you're not very
specific about the functionality it is you're adding to your page.
--
______PretLetters:
| weblog | http://www.pretletters.net/weblog/weblog.html |
| webontwerp | http://www.pretletters.net/html/webontwerp.html |
|zweefvliegen | http://www.pretletters.net/html/vliegen.html |
Feb 4 '06 #2
tx****@gmail.com wrote:
the HTML is:
Don't post code to the group, upload it, post the url
Subject: HELP | How can I display DIVs block by block INLINE? | key: div display:inline


If you have a question, make sure it's not just in the header, repeat it
in the message body.

Search the group's archive for "inline-block".

--
Spartanicus
Feb 4 '06 #3
thank you.
I will remind myself.

Feb 4 '06 #4
thank you.
I learned much.
the semi-manufactured goods:
http://blog.blogwhy.com/txican

Feb 4 '06 #5

This discussion thread is closed

Replies have been disabled for this discussion.

Similar topics

4 posts views Thread by Axel Dahmen | last post: by
23 posts views Thread by Mat | last post: by
1 post views Thread by Jeff Thies | last post: by
5 posts views Thread by Haines Brown | last post: by
12 posts views Thread by Vadim Guchenko | last post: by
11 posts views Thread by totalstranger | last post: by
2 posts views Thread by Steve Richter | last post: by
By using this site, you agree to our Privacy Policy and Terms of Use.