inline ul's

**boclair** · Feb 2 '07, 03:25 AM

Re: inline ul's

hendedav@yahoo. com wrote:

Gang,
>
My subject is not quiet what I am looking for. I have a
container div with two ul's inside. I am trying to get the two ul's
to be side-by-side instead of one on top of the other. I have tried
applying the float declaration on the ul's, but that either makes them
line up to the left and if I align to the right, the two lists are
displayed backwards.

li {display:inline ;}

Louise

**dorayme** · Feb 2 '07, 03:25 AM

Re: inline ul's

In article
<1170383777.406 753.222740@j27g 2000cwj.googleg roups.com>,
hendedav@yahoo. com wrote:

Gang,
>
My subject is not quiet what I am looking for. I have a
container div with two ul's inside. I am trying to get the two ul's
to be side-by-side instead of one on top of the other. I have tried
applying the float declaration on the ul's, but that either makes them
line up to the left and if I align to the right, the two lists are
displayed backwards. I would like to keep the code as bare as
possible without encasing the ul's inside so other container (ie div
or span). I have also tried using the text-align property on the
container div, but that doesn't seem to work either. Any help with
the code below would be great. Thanks in advance.
>
<html>
<style>
#wrapper {
margin: 0px;
padding: 0px;

No... don't give up the float idea so quickly. What comes first
or second depends on order in the html and other things. Try
again with float left (you can apply some margins to help
yourself out). Just get rid of the wrapper both in the html and
css for now (you are cssing it wrong anyway). One thing at a
time. If you want right, float again but reverse the order in the
html

What do you want? The lists to be where exactly (apart from side
by side)? if your objection to right float is merely wrong order,
then this above is solution.

--
dorayme

**hendedav@yahoo.com** · Feb 2 '07, 03:55 AM

Re: inline ul's

On Feb 1, 10:17 pm, dorayme <doraymeRidT... @optusnet.com.a uwrote:

In article
<1170383777.406 753.222...@j27g 2000cwj.googleg roups.com>,
>
>
>
hende...@yahoo. com wrote:

Gang,

>

My subject is not quiet what I am looking for. I have a
container div with two ul's inside. I am trying to get the two ul's
to be side-by-side instead of one on top of the other. I have tried
applying the float declaration on the ul's, but that either makes them
line up to the left and if I align to the right, the two lists are
displayed backwards. I would like to keep the code as bare as
possible without encasing the ul's inside so other container (ie div
or span). I have also tried using the text-align property on the
container div, but that doesn't seem to work either. Any help with
the code below would be great. Thanks in advance.

>

<html>
<style>
#wrapper {
margin: 0px;
padding: 0px;

>
No... don't give up the float idea so quickly. What comes first
or second depends on order in the html and other things. Try
again with float left (you can apply some margins to help
yourself out). Just get rid of the wrapper both in the html and
css for now (you are cssing it wrong anyway). One thing at a
time. If you want right, float again but reverse the order in the
html
>
What do you want? The lists to be where exactly (apart from side
by side)? if your objection to right float is merely wrong order,
then this above is solution.
>
--
dorayme

If I reverse the order of the code, that will make it ackward when
viewing or trying to follow. The overall goal with the project is to
have to wrapper div's or span's that contain two ul's in each. Two of
the ul's in the left wrapper will need to be aligned to the left, and
the two ul's on the right need to be aligned to the right. I just
coded that section above for simplicity. To make things even more
complicated, the wrappers will have variable sizes depending on the
size of the browser (they will both have an overall size of 50%).

I would like the lists (in the provided example) to be aligned to the
top and right of the container div. Is there any other way I can make
the ul's align to the right without reversing their order in the code?

If this is to confusing, I can code up a sample real quick to see what
I am talking about. BTW, how can I css the wrapper div correctly?

**hendedav@yahoo.com** · Feb 2 '07, 03:55 AM

Re: inline ul's

On Feb 1, 10:15 pm, boclair <bocl...@bigpon d.net.auwrote:

hende...@yahoo. com wrote:

Gang,

>

My subject is not quiet what I am looking for. I have a
container div with two ul's inside. I am trying to get the two ul's
to be side-by-side instead of one on top of the other. I have tried
applying the float declaration on the ul's, but that either makes them
line up to the left and if I align to the right, the two lists are
displayed backwards.

>
li {display:inline ;}
>
Louise

Thanks for the help Louise, but that will simply make the li's in the
ul inline. I am trying to make the entire ul's be aligned to the
right while maintaining a vertical list. Any other suggestions will
be greatly appreciated though.

**boclair** · Feb 2 '07, 05:05 AM

Re: inline ul's

hendedav@yahoo. com wrote:

On Feb 1, 10:15 pm, boclair <bocl...@bigpon d.net.auwrote:

>hende...@yahoo .com wrote:

>>Gang,
>> My subject is not quiet what I am looking for. I have a
>>container div with two ul's inside. I am trying to get the two ul's
>>to be side-by-side instead of one on top of the other. I have tried
>>applying the float declaration on the ul's, but that either makes them
>>line up to the left and if I align to the right, the two lists are
>>displayed backwards.

>li {display:inline ;}
>>
>Louise

>
Thanks for the help Louise, but that will simply make the li's in the
ul inline. I am trying to make the entire ul's be aligned to the
right while maintaining a vertical list. Any other suggestions will
be greatly appreciated though.
>

Misunderstood.

Perhaps something like the following (maybe reconsider px widths?)

Louise

___style rules_____
#wrapper {
width: 400px;
/*border: 1px solid red;*/ /*wrapper will not contain the height
of the floats.*/
}
ul { float:right;} /* width set by li */
ul li {
list-style: none;
text-decoration: none;
border: 1px solid black;
text-align: left;
width: 100px;
}

</style>

______markup___ __

<div id="wrapper">
<ul>
<li>asdf</li>
<li>zxcv</li>
<li>qerw</li>
<li>asdf</li>
</ul>
<ul>
<li>1234</li>
<li>5678</li>
<li>9012</li>
<li>3456</li>
</ul>
</div>

**Ben C** · Feb 2 '07, 08:35 AM

Re: inline ul's

On 2007-02-02, hendedav@yahoo. com <hendedav@yahoo .comwrote:

Gang,
>
My subject is not quiet what I am looking for. I have a
container div with two ul's inside. I am trying to get the two ul's
to be side-by-side instead of one on top of the other. I have tried
applying the float declaration on the ul's, but that either makes them
line up to the left and if I align to the right, the two lists are
displayed backwards. I would like to keep the code as bare as
possible without encasing the ul's inside so other container (ie div
or span). I have also tried using the text-align property on the
container div, but that doesn't seem to work either.

text-align won't affect floats, although it will work just how you want
on inline-blocks. But display:inline-block is not widely supported.

If it were, you'd just set display:inline-block on each column and
text-align:right on the wrapper.

Realistically your options are floats or tables. Two right floats will
be positioned rightmost-first, as you've discovered.

There is no problem however that cannot be solved with another level of
nesting. You can put another wrapper inside wrapper that's width:auto
and float:right[1]. Then each col is float:left.

Like this:

<div id="wrapper" 400px wide
<div id="wrapper2" floats right, auto width
<ul>...</ul floats left, 100px wide
<ul>...</ul floats left, 100px wide

But I don't know if the additional level of nesting is more desirable
than having to reverse the order of the columns.

[1] Requires CSS 2.1 specification for auto-width floats, not CSS 2.
Don't know of existence of any browser implementing CSS 2 in this
respect.

**hendedav@yahoo.com** · Feb 2 '07, 01:55 PM

Re: inline ul's

On Feb 1, 11:57 pm, boclair <bocl...@bigpon d.net.auwrote:

hende...@yahoo. com wrote:

On Feb 1, 10:15 pm, boclair <bocl...@bigpon d.net.auwrote:

hende...@yahoo. com wrote:
>Gang,
> My subject is not quiet what I am looking for. I have a
>container div with two ul's inside. I am trying to get the two ul's
>to be side-by-side instead of one on top of the other. I have tried
>applying the float declaration on the ul's, but that either makes them
>line up to the left and if I align to the right, the two lists are
>displayed backwards.
li {display:inline ;}

>

Louise

>

Thanks for the help Louise, but that will simply make the li's in the
ul inline. I am trying to make the entire ul's be aligned to the
right while maintaining a vertical list. Any other suggestions will
be greatly appreciated though.

>
Misunderstood.
>
Perhaps something like the following (maybe reconsider px widths?)
>
Louise
>
___style rules_____
#wrapper {
width: 400px;
/*border: 1px solid red;*/ /*wrapper will not contain the height
of the floats.*/
}
ul { float:right;} /* width set by li */
ul li {
list-style: none;
text-decoration: none;
border: 1px solid black;
text-align: left;
width: 100px;
}
>
</style>
>
______markup___ __
>
<div id="wrapper">
<ul>
<li>asdf</li>
<li>zxcv</li>
<li>qerw</li>
<li>asdf</li>
</ul>
<ul>
<li>1234</li>
<li>5678</li>
<li>9012</li>
<li>3456</li>
</ul>
</div>

Doing that method will cause the ul's to be backwards in the respect
that the numbered ul will show before the lettered ul. That is what I
am trying to avoid as well as adding addiitonal nesting. Thanks for
the continued support though.

**hendedav@yahoo.com** · Feb 2 '07, 02:05 PM

Re: inline ul's

On Feb 2, 3:24 am, Ben C <spams...@spam. eggswrote:

On 2007-02-02, hende...@yahoo. com <hende...@yahoo .comwrote:
>

Gang,

>

My subject is not quiet what I am looking for. I have a
container div with two ul's inside. I am trying to get the two ul's
to be side-by-side instead of one on top of the other. I have tried
applying the float declaration on the ul's, but that either makes them
line up to the left and if I align to the right, the two lists are
displayed backwards. I would like to keep the code as bare as
possible without encasing the ul's inside so other container (ie div
or span). I have also tried using the text-align property on the
container div, but that doesn't seem to work either.

>
text-align won't affect floats, although it will work just how you want
on inline-blocks. But display:inline-block is not widely supported.
>
If it were, you'd just set display:inline-block on each column and
text-align:right on the wrapper.
>
Realistically your options are floats or tables. Two right floats will
be positioned rightmost-first, as you've discovered.
>
There is no problem however that cannot be solved with another level of
nesting. You can put another wrapper inside wrapper that's width:auto
and float:right[1]. Then each col is float:left.
>
Like this:
>
<div id="wrapper" 400px wide
<div id="wrapper2" floats right, auto width
<ul>...</ul floats left, 100px wide
<ul>...</ul floats left, 100px wide
>
But I don't know if the additional level of nesting is more desirable
than having to reverse the order of the columns.
>
[1] Requires CSS 2.1 specification for auto-width floats, not CSS 2.
Don't know of existence of any browser implementing CSS 2 in this
respect.

Ben thanks for you help as well. I knew about the inline-block and
that it isn't widely supported, so thats why I didn't even try to play
with that. I would probably shy away from using tables because the
li's may contain objects and I know using tables to perform object
placement is considered bad form. I was also trying to stay away from
doing nested div's because I am trying to keep the code as managable
and easy to follow as possible (also why I was reluctant to reverse
the order of the ul's if doing the float: right; approach). Would it
be a bad idea to maybe put in a "filler" div or something so that it
will take up all the space to the right of the two ul's forcing them
to be "aligned" to the right?

**Ben C** · Feb 2 '07, 04:25 PM

Re: inline ul's

On 2007-02-02, hendedav@yahoo. com <hendedav@yahoo .comwrote:

On Feb 2, 3:24 am, Ben C <spams...@spam. eggswrote:

>On 2007-02-02, hende...@yahoo. com <hende...@yahoo .comwrote:
>>

Gang,

>>

My subject is not quiet what I am looking for. I have a
container div with two ul's inside. I am trying to get the two ul's
to be side-by-side instead of one on top of the other. I have tried
applying the float declaration on the ul's, but that either makes them
line up to the left and if I align to the right, the two lists are
displayed backwards. I would like to keep the code as bare as
possible without encasing the ul's inside so other container (ie div
or span). I have also tried using the text-align property on the
container div, but that doesn't seem to work either.

[snip]

Would it be a bad idea to maybe put in a "filler" div or something so
that it will take up all the space to the right of the two ul's
forcing them to be "aligned" to the right?

You mean "filler" on the left, floated left, and the two uls float left
but go to the right of the filler?

The problem is setting the width on the filler. Too narrow and the uls
won't go all the way to the right. Too wide and at least one of them
will jump down.

I think an extra wrapper as described is likely to be easier-- and it
doesn't pollute the markup any more than adding a filler div.

**hendedav@yahoo.com** · Feb 2 '07, 08:45 PM

Re: inline ul's

On Feb 2, 11:17 am, Ben C <spams...@spam. eggswrote:

On 2007-02-02, hende...@yahoo. com <hende...@yahoo .comwrote:
>

On Feb 2, 3:24 am, Ben C <spams...@spam. eggswrote:

On 2007-02-02, hende...@yahoo. com <hende...@yahoo .comwrote:

>

Gang,

>

My subject is not quiet what I am looking for. I have a
container div with two ul's inside. I am trying to get the two ul's
to be side-by-side instead of one on top of the other. I have tried
applying the float declaration on the ul's, but that either makes them
line up to the left and if I align to the right, the two lists are
displayed backwards. I would like to keep the code as bare as
possible without encasing the ul's inside so other container (ie div
or span). I have also tried using the text-align property on the
container div, but that doesn't seem to work either.

>
[snip]
>

Would it be a bad idea to maybe put in a "filler" div or something so
that it will take up all the space to the right of the two ul's
forcing them to be "aligned" to the right?

>
You mean "filler" on the left, floated left, and the two uls float left
but go to the right of the filler?
>
The problem is setting the width on the filler. Too narrow and the uls
won't go all the way to the right. Too wide and at least one of them
will jump down.
>
I think an extra wrapper as described is likely to be easier-- and it
doesn't pollute the markup any more than adding a filler div.

Thanks for the continued help Ben. After the earlier post, I went
ahead and reversed the order of the ul's (for the two to be aligned to
the right). It isn't that bad, but I sure wish the developers and
people who made the standards would have done it a different way.
But! What can you do.

After thinking about it myself, I agreed that the "filler" idea was a
bad idea and would be as much in coding as would be adding a nested
div. So... right aligned it went. If you can ever think of a
different way (or anyone else), please let me know (send to personal
email as well, not just group).

Thanks,
Dave

**dorayme** · Feb 2 '07, 09:45 PM

Re: inline ul's

In article
<1170448418.083 389.289260@h3g2 000cwc.googlegr oups.com>,
hendedav@yahoo. com wrote:

After the earlier post, I went
ahead and reversed the order of the ul's (for the two to be aligned to
the right).

I have been wondering from the start what it is that you don't
like about this in your particular case? Does it matter what the
order is in the html in your case?

--
dorayme

**Sherm Pendley** · Feb 2 '07, 09:55 PM

Re: inline ul's

dorayme <doraymeRidThis @optusnet.com.a uwrites:

In article
<1170448418.083 389.289260@h3g2 000cwc.googlegr oups.com>,
hendedav@yahoo. com wrote:
>

>After the earlier post, I went
>ahead and reversed the order of the ul's (for the two to be aligned to
>the right).

>
I have been wondering from the start what it is that you don't
like about this in your particular case? Does it matter what the
order is in the html in your case?

The "natural" order will affect how they're displayed if stylesheets are
unsupported and/or disabled.

sherm--

--
Web Hosting by West Virginians, for West Virginians: http://wv-www.net
Cocoa programming in Perl: http://camelbones.sourceforge.net

**dorayme** · Feb 2 '07, 11:35 PM

Re: inline ul's

In article <m2irekb58w.fsf @Sherm-Pendleys-Computer.local> ,
Sherm Pendley <spamtrap@dot-app.orgwrote:

dorayme <doraymeRidThis @optusnet.com.a uwrites:
>

In article
<1170448418.083 389.289260@h3g2 000cwc.googlegr oups.com>,
hendedav@yahoo. com wrote:

After the earlier post, I went
ahead and reversed the order of the ul's (for the two to be aligned to
the right).

I have been wondering from the start what it is that you don't
like about this in your particular case? Does it matter what the
order is in the html in your case?

>
The "natural" order will affect how they're displayed if stylesheets are
unsupported and/or disabled.
>
sherm-

This was not my question. I know how it matters in general. I
will ask it again: why does it matter to the OP in his particular
situation?

--
dorayme

**hendedav@yahoo.com** · Feb 3 '07, 01:35 AM

Re: inline ul's

On Feb 2, 6:24 pm, dorayme <doraymeRidT... @optusnet.com.a uwrote:

In article <m2irekb58w.... @Sherm-Pendleys-Computer.local> ,
Sherm Pendley <spamt...@dot-app.orgwrote:
>
>
>

dorayme <doraymeRidT... @optusnet.com.a uwrites:

>

In article
<1170448418.083 389.289...@h3g2 000cwc.googlegr oups.com>,
hende...@yahoo. com wrote:

>

>After the earlier post, I went
>ahead and reversed the order of the ul's (for the two to be aligned to
>the right).

>

I have been wondering from the start what it is that you don't
like about this in your particular case? Does it matter what the
order is in the html in your case?

>

The "natural" order will affect how they're displayed if stylesheets are
unsupported and/or disabled.

>

sherm-

>
This was not my question. I know how it matters in general. I
will ask it again: why does it matter to the OP in his particular
situation?
>
--
dorayme

The only reason I was against that style of programming was because if
someone were to read the source to a project it might be more
difficult to discern what is going on. It just doesn't follow a
logical succession. Beyond that, I have no problems. Just
readability.

inline ul's

inline ul's

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment