display:inline block elements

CES

All,

I was hoping that someone might be able to help me with a few questions on Aligning Block Elements properly...
Basically I have a row that has a fixed width of 900px. Within the row their is a <Divthat I want to align to the Right hand side of the <Div id=” Container “>. That div <Div id=”items”needs to be able to expand and contract based on the amount of text that is held within the <p id="p1">.

This example is as close as I can get to showing what I'm trying to achieve. However the two issues are:
1) Align is not a valid attribute of the Div element...
2) The element <div id="Items"is a fixed width. I have no idea how many items will be contained within <p id="p1"and I don't want the text to wrap. Additionally I always want to have <p id="p2"align with the left hand margin of <p id="p1">.

<body>
<style type="text/css">
#Container{
clear:both;

width:900px;
}

#Items{
width:160px;
margin:0;
padding:0;

font: bold 11px/14px Arial;
text-align:left;
color: #928D92;background-color:yellow;
}
</style>
<div id="Container" align="right">
<div id="Items" style="">
<p id="p1">
item1 • item2 • item3 • item4
</p>
<p id="p2">
item1 • item2 • item3
</p>
</div>
</div>
</body>

I've had some success with the following, as it eliminates the two problems stated above(The Align attribute and fixed width)... but I can't figure out how to get the second <p id="p2"to align with the left most margin of <p id="p1">???

<body>
<style type="text/css">
#Container{
clear:both;

width:900px;
text-align: right;
}

#Items{
display:inline;
margin:0 8px 0 0;
}

#Container p{
display:inline;
font: bold 11px/14px Arial;

color: #928D92;
background-color:yellow;
}
</style>
<div id="Container">
<div id="Items">
<p id="p1">
item1 • item2 • item3 • item4 • item5
</p>

</div>
</div>
</body>

If anyone has any clue as to how this can be accomplished I would be great full!!! Thanks in advance. - CES

Jul 8 '06 #1

Subscribe Post Reply

1951

Chris F.A. Johnson

On 2006-07-08, CES wrote:

All,

I was hoping that someone might be able to help me with a few
questions on Aligning Block Elements properly...

Basically I have a row that has a fixed width of 900px. Within the
row their is a <Divthat I want to align to the Right hand side of
the <Div id=" Container ">. That div <Div id="items">
needs to be able to expand and contract based on the amount of text
that is held within the <p id="p1">.

This example is as close as I can get to showing what I'm trying to
achieve. However the two issues are:

1) Align is not a valid attribute of the Div element...

2) The element <div id="Items"is a fixed width. I have no idea how
many items will be contained within <p id="p1"and I don't want the
text to wrap.

If you don't know how many items it will contain, and don't want to
to wrap, you obviously don't want a fixed width.

Additionally I always want to have <p id="p2"align
with the left hand margin of <p id="p1">.

><body>
<style type="text/css">
#Container{
clear:both;

width:900px;

Why 900px? You don't know how much that space will take up on my
(or anyone else's) browser window.

}

#Items{
width:160px;

See above.

margin:0;
padding:0;

font: bold 11px/14px Arial;

That could be too big or too small, depending on my browser
settings, and I may not have Arial. Use 100% or 1em for the basic
text and adjust relatively when you want larger or smaller.

text-align:left;
color: #928D92;background-color:yellow;
}
</style>
<div id="Container" align="right">
<div id="Items" style="">
<p id="p1">
item1 ? item2 ? item3 ? item4
</p>
<p id="p2">
item1 ? item2 ? item3
</p>
</div>
</div>
</body>
I've had some success with the following, as it eliminates the two
problems stated above(The Align attribute and fixed width)... but I
can't figure out how to get the second <p id="p2"to align with the
left most margin of <p id="p1">???

<body>
<style type="text/css">
#Container{
clear:both;

width:900px;
text-align: right;
}

#Items{
display:inline;
margin:0 8px 0 0;
}

#Container p{
display:inline;

If you want a <pto start on a new line, you don't want it
inline.

font: bold 11px/14px Arial;

See above...

color: #928D92;
background-color:yellow;
}
</style>
<div id="Container">
<div id="Items">
<p id="p1">
item1 ? item2 ? item3 ? item4 ? item5
</p>

</div>
</div>
</body>

If anyone has any clue as to how this can be accomplished I would be
great full!!! Thanks in advance. - CES

I suggest that you start without any stylesheet, and add only what
you need to change the content to appear the way you want it.

Does this do what you want:

<html>
<head>
<style type="text/css">
#Container{
clear:both;
}

#Items{
text-align: left;
margin-right: 0;
float:right;
}

#Items p{
white-space: nowrap;
color: #928D92;
background-color:yellow;
}
</style>
</head>
<body>
<div id="Container">
<div id="Items">
<p id="p1">
item11 • item12 • item13 • item14
</p>
<p id="p2">
item1 • item2 • item3 • item4
</p>
</div>
</div>
</body>
</html>
--
Chris F.A. Johnson, author <http://cfaj.freeshell.org>
Shell Scripting Recipes: A Problem-Solution Approach (2005, Apress)
===== My code in this post, if any, assumes the POSIX locale
===== and is released under the GNU General Public Licence

Jul 9 '06 #2

CES

CES wrote:

All,

I was hoping that someone might be able to help me with a few questions
on Aligning Block Elements properly...
Basically I have a row that has a fixed width of 900px. Within the row
their is a <Divthat I want to align to the Right hand side of the <Div
id=” Container “>. That div <Div id=”items”needs to be able to expand
and contract based on the amount of text that is held within the <p
id="p1">.

This example is as close as I can get to showing what I'm trying to
achieve. However the two issues are:
1) Align is not a valid attribute of the Div element...
2) The element <div id="Items"is a fixed width. I have no idea how
many items will be contained within <p id="p1"and I don't want the
text to wrap. Additionally I always want to have <p id="p2"align with
the left hand margin of <p id="p1">.

<body>
<style type="text/css">
#Container{
clear:both;

width:900px;
}

#Items{
width:160px;
margin:0;
padding:0;

font: bold 11px/14px Arial;
text-align:left;
color: #928D92;background-color:yellow;
}
</style>
<div id="Container" align="right">
<div id="Items" style="">
<p id="p1">
item1 • item2 • item3 • item4
</p>
<p id="p2">
item1 • item2 • item3
</p>
</div>
</div>
</body>

I've had some success with the following, as it eliminates the two
problems stated above(The Align attribute and fixed width)... but I
can't figure out how to get the second <p id="p2"to align with the
left most margin of <p id="p1">???

<body>
<style type="text/css">
#Container{
clear:both;

width:900px;
text-align: right;
}

#Items{
display:inline;
margin:0 8px 0 0;
}

#Container p{
display:inline;
font: bold 11px/14px Arial;

color: #928D92;
background-color:yellow;
}
</style>
<div id="Container">
<div id="Items">
<p id="p1">
item1 • item2 • item3 • item4 • item5
</p>

</div>
</div>
</body>

If anyone has any clue as to how this can be accomplished I would be
great full!!! Thanks in advance. - CES

All,

I finally found the solution although it's really quirky.... The solution was to use Relative Positioning for the outer div and Absolute Positioning and align the inner div to the absolute right of the container div. - CES
<style type="text/css">
.outerFrame
{
width:900px;

margin: 20px auto 0 auto;
}
.innerFrame{
width:100%;
height:auto;

background-color:white;
}
</style>
<div class="outerFrame">
<div class="innerFrame">
<div style="position:relative;height:28px;">
<div style="position:absolute;right:5px;color: #928D92;">
<h1 style="margin:0;padding:0;font: bold 11px/14px Arial;color: #928D92">
item1 • item2 • item3 • item4 • item5 • item6 • item7 • item8
</h1>
<div>
<h2 style="display:inline;position:absolute;left:0px;m argin:0;padding:0;font:bold 8px/14px Arial;color:#B5B6B5">
subItem1 • subItem2 • subItem3 • subItem4
</h2>
<h2 style="display:inline;position:absolute;right:0px; margin:0;padding:0;font:bold 8px/14px Arial;color:#B5B6B5">
subItem1 • subItem2 • subItem3
</h2>
</div>
</div>
</div>
</div>
</div>

Jul 9 '06 #3

Chris F.A. Johnson

On 2006-07-09, CES wrote:

CES wrote:
>All,

I was hoping that someone might be able to help me with a few questions
on Aligning Block Elements properly...
Basically I have a row that has a fixed width of 900px. Within the row
their is a <Divthat I want to align to the Right hand side of the <Div
id=” Container “>. That div <Div id=”items”needs to be able to expand
and contract based on the amount of text that is held within the <p
id="p1">.

This example is as close as I can get to showing what I'm trying to
achieve. However the two issues are:
1) Align is not a valid attribute of the Div element...
2) The element <div id="Items"is a fixed width. I have no idea how
many items will be contained within <p id="p1"and I don't want the
text to wrap. Additionally I always want to have <p id="p2"align with
the left hand margin of <p id="p1">.

<body>
<style type="text/css">
#Container{
clear:both;

width:900px;
}

#Items{
width:160px;
margin:0;
padding:0;

font: bold 11px/14px Arial;
text-align:left;
color: #928D92;background-color:yellow;
}
</style>
<div id="Container" align="right">
<div id="Items" style="">
<p id="p1">
item1 • item2 • item3 • item4
</p>
<p id="p2">
item1 • item2 • item3
</p>
</div>
</div>
</body>

I've had some success with the following, as it eliminates the two
problems stated above(The Align attribute and fixed width)... but I
can't figure out how to get the second <p id="p2"to align with the
left most margin of <p id="p1">???

<body>
<style type="text/css">
#Container{
clear:both;

width:900px;
text-align: right;
}

#Items{
display:inline;
margin:0 8px 0 0;
}

#Container p{
display:inline;
font: bold 11px/14px Arial;

color: #928D92;
background-color:yellow;
}
</style>
<div id="Container">
<div id="Items">
<p id="p1">
item1 • item2 • item3 • item4 • item5
</p>

</div>
</div>
</body>

If anyone has any clue as to how this can be accomplished I would be
great full!!! Thanks in advance. - CES

All,

I finally found the solution although it's really quirky.... The
solution was to use Relative Positioning for the outer div and
Absolute Positioning and align the inner div to the absolute right
of the container div. - CES

That doesn't scale correctly; see <http://cfaj.freeshell.org/www/ces.jpg>.

<style type="text/css">
.outerFrame
{
width:900px;

You're still doing that; DON'T USE FIXED WIDTHS.

margin: 20px auto 0 auto;
}
.innerFrame{
width:100%;
height:auto;

background-color:white;
}
</style>
<div class="outerFrame">
<div class="innerFrame">
<div style="position:relative;height:28px;">

How do you know that 28 px is going to be enough?

<div style="position:absolute;right:5px;color: #928D92;">
<h1 style="margin:0;padding:0;font: bold
11px/14px Arial;color: #928D92">

You still can't tell whether that will be too big or too small in
my browser.

item1 • item2 • item3 • item4 • item5 • item6 • item7 • item8
</h1>
<div>
<h2 style="display:inline;position:absolute;left:0px;m argin:0;padding:0;font:bold 8px/14px Arial;color:#B5B6B5">
subItem1 • subItem2 • subItem3 • subItem4
</h2>
<h2 style="display:inline;position:absolute;right:0px; margin:0;padding:0;font:bold 8px/14px Arial;color:#B5B6B5">
subItem1 • subItem2 • subItem3
</h2>
</div>
</div>
</div>
</div>
</div>

Post the URL to a scrreenshot of what you want it to look like, so
that we can tell what you are trying to do.

--
Chris F.A. Johnson, author <http://cfaj.freeshell.org>
Shell Scripting Recipes: A Problem-Solution Approach (2005, Apress)
===== My code in this post, if any, assumes the POSIX locale
===== and is released under the GNU General Public Licence

Jul 9 '06 #4

CES

Chris F.A. Johnson wrote:

On 2006-07-09, CES wrote:
>CES wrote:
>>All,

I was hoping that someone might be able to help me with a few questions
on Aligning Block Elements properly...
Basically I have a row that has a fixed width of 900px. Within the row
their is a <Divthat I want to align to the Right hand side of the <Div
id=” Container “>. That div <Div id=”items”needs to be able to expand
and contract based on the amount of text that is held within the <p
id="p1">.

This example is as close as I can get to showing what I'm trying to
achieve. However the two issues are:
1) Align is not a valid attribute of the Div element...
2) The element <div id="Items"is a fixed width. I have no idea how
many items will be contained within <p id="p1"and I don't want the
text to wrap. Additionally I always want to have <p id="p2"align with
the left hand margin of <p id="p1">.

<body>
<style type="text/css">
#Container{
clear:both;

width:900px;
}

#Items{
width:160px;
margin:0;
padding:0;

font: bold 11px/14px Arial;
text-align:left;
color: #928D92;background-color:yellow;
}
</style>
<div id="Container" align="right">
<div id="Items" style="">
<p id="p1">
item1 • item2 • item3 • item4
</p>
<p id="p2">
item1 • item2 • item3
</p>
</div>
</div>
</body>

I've had some success with the following, as it eliminates the two
problems stated above(The Align attribute and fixed width)... but I
can't figure out how to get the second <p id="p2"to align with the
left most margin of <p id="p1">???

<body>
<style type="text/css">
#Container{
clear:both;

width:900px;
text-align: right;
}

#Items{
display:inline;
margin:0 8px 0 0;
}

#Container p{
display:inline;
font: bold 11px/14px Arial;

color: #928D92;
background-color:yellow;
}
</style>
<div id="Container">
<div id="Items">
<p id="p1">
item1 • item2 • item3 • item4 • item5
</p>

</div>
</div>
</body>

If anyone has any clue as to how this can be accomplished I would be
great full!!! Thanks in advance. - CES

All,

>I finally found the solution although it's really quirky.... The
solution was to use Relative Positioning for the outer div and
Absolute Positioning and align the inner div to the absolute right
of the container div. - CES

That doesn't scale correctly; see <http://cfaj.freeshell.org/www/ces.jpg>.

> <style type="text/css">
.outerFrame
{
width:900px;

You're still doing that; DON'T USE FIXED WIDTHS.

> margin: 20px auto 0 auto;
}
.innerFrame{
width:100%;
height:auto;

background-color:white;
}
</style>
<div class="outerFrame">
<div class="innerFrame">
<div style="position:relative;height:28px;">

How do you know that 28 px is going to be enough?

> <div style="position:absolute;right:5px;color: #928D92;">
<h1 style="margin:0;padding:0;font: bold
11px/14px Arial;color: #928D92">

You still can't tell whether that will be too big or too small in
my browser.

> item1 • item2 • item3 • item4 • item5 • item6 • item7 • item8
</h1>
<div>
<h2 style="display:inline;position:absolute;left:0px;m argin:0;padding:0;font:bold 8px/14px Arial;color:#B5B6B5">
subItem1 • subItem2 • subItem3 • subItem4
</h2>
<h2 style="display:inline;position:absolute;right:0px; margin:0;padding:0;font:bold 8px/14px Arial;color:#B5B6B5">
subItem1 • subItem2 • subItem3
</h2>
</div>
</div>
</div>
</div>
</div>

Post the URL to a scrreenshot of what you want it to look like, so
that we can tell what you are trying to do.

Chris,
The outerframe is suppose to be a fixed width.
The container div only holds 2 lines of text so the height of the div is set to 28px because the line height is 14 for each of the 2 lines... however I shouldn't have to set the height at all, but it's the only way i can get the div to play nice with the next div which isn't displayed in this example.
The example above was only for test purposes in my real world the two H2 only hold 4 and 3 small words respectively and the Nav dive holds at least 8 items in it. so I will never get the issue your seeing where the two h2 overlap...
Thanks - CES

Jul 10 '06 #5

Chris F.A. Johnson

On 2006-07-10, CES wrote:

Chris F.A. Johnson wrote:
>On 2006-07-09, CES wrote:
>>CES wrote:
All,

I was hoping that someone might be able to help me with a few questions
on Aligning Block Elements properly...
Basically I have a row that has a fixed width of 900px. Within the row
their is a <Divthat I want to align to the Right hand side of the <Div
id=” Container “>. That div <Div id=”items”needs to be able to expand
and contract based on the amount of text that is held within the <p
id="p1">.

This example is as close as I can get to showing what I'm trying to
achieve. However the two issues are:
1) Align is not a valid attribute of the Div element...
2) The element <div id="Items"is a fixed width. I have no idea how
many items will be contained within <p id="p1"and I don't want the
text to wrap. Additionally I always want to have <p id="p2"align with
the left hand margin of <p id="p1">.

<body>
<style type="text/css">
#Container{
clear:both;

width:900px;
}

#Items{
width:160px;
margin:0;
padding:0;

font: bold 11px/14px Arial;
text-align:left;
color: #928D92;background-color:yellow;
}
</style>
<div id="Container" align="right">
<div id="Items" style="">
<p id="p1">
item1 • item2 • item3 • item4
</p>
<p id="p2">
item1 • item2 • item3
</p>
</div>
</div>
</body>

I've had some success with the following, as it eliminates the two
problems stated above(The Align attribute and fixed width)... but I
can't figure out how to get the second <p id="p2"to align with the
left most margin of <p id="p1">???

<body>
<style type="text/css">
#Container{
clear:both;

width:900px;
text-align: right;
}

#Items{
display:inline;
margin:0 8px 0 0;
}

#Container p{
display:inline;
font: bold 11px/14px Arial;

color: #928D92;
background-color:yellow;
}
</style>
<div id="Container">
<div id="Items">
<p id="p1">
item1 • item2 • item3 • item4 • item5
</p>

</div>
</div>
</body>

If anyone has any clue as to how this can be accomplished I would be
great full!!! Thanks in advance. - CES

All,

>>I finally found the solution although it's really quirky.... The
solution was to use Relative Positioning for the outer div and
Absolute Positioning and align the inner div to the absolute right
of the container div. - CES

That doesn't scale correctly; see <http://cfaj.freeshell.org/www/ces.jpg>.

>> <style type="text/css">
.outerFrame
{
width:900px;

You're still doing that; DON'T USE FIXED WIDTHS.

>> margin: 20px auto 0 auto;
}
.innerFrame{
width:100%;
height:auto;

background-color:white;
}
</style>
<div class="outerFrame">
<div class="innerFrame">
<div style="position:relative;height:28px;">

How do you know that 28 px is going to be enough?

>> <div style="position:absolute;right:5px;color: #928D92;">
<h1 style="margin:0;padding:0;font: bold
11px/14px Arial;color: #928D92">

You still can't tell whether that will be too big or too small in
my browser.

>> item1 • item2 • item3 • item4 • item5 • item6 • item7 • item8
</h1>
<div>
<h2 style="display:inline;position:absolute;left:0px;m argin:0;padding:0;font:bold 8px/14px Arial;color:#B5B6B5">
subItem1 • subItem2 • subItem3 • subItem4
</h2>
<h2 style="display:inline;position:absolute;right:0px; margin:0;padding:0;font:bold 8px/14px Arial;color:#B5B6B5">
subItem1 • subItem2 • subItem3
</h2>
</div>
</div>
</div>
</div>
</div>

Post the URL to a scrreenshot of what you want it to look like, so
that we can tell what you are trying to do.

Chris,
The outerframe is suppose to be a fixed width.

Why? It may overflow the window, or appear as a small column.

The container div only holds 2 lines of text so the height of the
div is set to 28px because the line height is 14 for each of the 2
lines...

So that text may be unreadably small, or it could be enlarged and
not fit in the space you allow for it.

however I shouldn't have to set the height at all,

True.

but it's the only way i can get the div to play nice with the next
div which isn't displayed in this example.

Then perhaps you need to fix the next div?

The example above was only for test purposes in my real world the
two H2 only hold 4 and 3 small words respectively and the Nav dive
holds at least 8 items in it. so I will never get the issue your
seeing where the two h2 overlap...

That depends on the user's text size.

--
Chris F.A. Johnson, author <http://cfaj.freeshell.org>
Shell Scripting Recipes: A Problem-Solution Approach (2005, Apress)
===== My code in this post, if any, assumes the POSIX locale
===== and is released under the GNU General Public Licence

Jul 10 '06 #6

display:inline block elements

Similar topics