By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
443,742 Members | 1,227 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 443,742 IT Pros & Developers. It's quick & easy.

inline ul's

P: n/a
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;
text-align: right; /* attempt to align the ul's to the right */
width: 400px;
border: 1px solid red;
}
#col1 {
list-style: none;
text-decoration: none;
border: 1px solid black;
text-align: left;
width: 100px;
}
#col2 {
list-style: none;
text-decoration: none;
border: 1px solid green;
text-align: left;
width: 100px;
}
</style>
<body>

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

</body>
</html>

Feb 2 '07 #1
Share this Question
Share on Google+
18 Replies


P: n/a
he******@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
Feb 2 '07 #2

P: n/a
In article
<11**********************@j27g2000cwj.googlegroups .com>,
he******@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
Feb 2 '07 #3

P: n/a
On Feb 1, 10:17 pm, dorayme <doraymeRidT...@optusnet.com.auwrote:
In article
<1170383777.406753.222...@j27g2000cwj.googlegroups .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?

Feb 2 '07 #4

P: n/a
On Feb 1, 10:15 pm, boclair <bocl...@bigpond.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.

Feb 2 '07 #5

P: n/a
he******@yahoo.com wrote:
On Feb 1, 10:15 pm, boclair <bocl...@bigpond.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>
Feb 2 '07 #6

P: n/a
On 2007-02-02, he******@yahoo.com <he******@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.
Feb 2 '07 #7

P: n/a
On Feb 1, 11:57 pm, boclair <bocl...@bigpond.net.auwrote:
hende...@yahoo.com wrote:
On Feb 1, 10:15 pm, boclair <bocl...@bigpond.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.

Feb 2 '07 #8

P: n/a
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?

Feb 2 '07 #9

P: n/a
On 2007-02-02, he******@yahoo.com <he******@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.
Feb 2 '07 #10

P: n/a
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

Feb 2 '07 #11

P: n/a
In article
<11**********************@h3g2000cwc.googlegroups. com>,
he******@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
Feb 2 '07 #12

P: n/a
dorayme <do************@optusnet.com.auwrites:
In article
<11**********************@h3g2000cwc.googlegroups. com>,
he******@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
Feb 2 '07 #13

P: n/a
In article <m2************@Sherm-Pendleys-Computer.local>,
Sherm Pendley <sp******@dot-app.orgwrote:
dorayme <do************@optusnet.com.auwrites:
In article
<11**********************@h3g2000cwc.googlegroups. com>,
he******@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
Feb 2 '07 #14

P: n/a
On Feb 2, 6:24 pm, dorayme <doraymeRidT...@optusnet.com.auwrote:
In article <m2irekb58w....@Sherm-Pendleys-Computer.local>,
Sherm Pendley <spamt...@dot-app.orgwrote:
dorayme <doraymeRidT...@optusnet.com.auwrites:
In article
<1170448418.083389.289...@h3g2000cwc.googlegroups. 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.

Feb 3 '07 #15

P: n/a
he******@yahoo.com wrote:
On Feb 1, 11:57 pm, boclair <bocl...@bigpond.net.auwrote:
>hende...@yahoo.com wrote:
>>On Feb 1, 10:15 pm, boclair <bocl...@bigpond.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.

___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;
}

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.
Taking note of Sherm Pendley's observation, the only another method of
positioning the lists, rather than float, seems to be called for.

Another method is to use the positioning property. Something like this,
amending the top, left and right top achieve the desired pattern.

Now if CSS in not enabled, the uls, col1 and col2 will retain the same
order but vertically rather than horizontally

Louise

_____style rules______

div#wrapper {
position:relative;
width: 400px;
}

div#wrapper ul {
border: 1px solid black;
list-style: none;
margin-left:0; /* removes li default inset */
padding-left:0; /* removes li default inset */
position:absolute;
top:0;
width:100px;
}

div#wrapper ul.col1 {
left:0;
}
div#wrapper ul.col2 {
right:0;
}

____markup______

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

Feb 3 '07 #16

P: n/a
In article
<11**********************@v45g2000cwv.googlegroups .com>,
he******@yahoo.com wrote:
On Feb 2, 6:24 pm, dorayme <doraymeRidT...@optusnet.com.auwrote:
In article <m2irekb58w....@Sherm-Pendleys-Computer.local>,
Sherm Pendley <spamt...@dot-app.orgwrote:
dorayme <doraymeRidT...@optusnet.com.auwrites:
In article
<1170448418.083389.289...@h3g2000cwc.googlegroups. 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.
I can see I am not going to succeed! <gIn the example OP opened
with, I could see no particular reason for the couple of lists to
be in any particular order in the html for semantic reasons. So I
thought, take advantage of this happy situation. If one can mate
in 4 moves but it does not look good positionally, I would always
go the tactical response. To do otherwise is to have a too
precious view of the purpose of positional play. Even gods strike
when the iron is hot!

These would emerge if OP posted the likely or realistic url with
more of what is going to go into the page and how it is to be
styled as a whole. There are many ways to skin different cats as
well as the same cat.

There may be reasons however. Perhaps I am taking the OPs example
too literally. I am a very down to earth being, paradoxically
enough, martians are like that. Boom boom!

--
dorayme
Feb 3 '07 #17

P: n/a
On Feb 2, 9:02 pm, dorayme <doraymeRidT...@optusnet.com.auwrote:
In article
<1170465777.866511.186...@v45g2000cwv.googlegroups .com>,

hende...@yahoo.com wrote:
On Feb 2, 6:24 pm, dorayme <doraymeRidT...@optusnet.com.auwrote:
In article <m2irekb58w....@Sherm-Pendleys-Computer.local>,
Sherm Pendley <spamt...@dot-app.orgwrote:
dorayme <doraymeRidT...@optusnet.com.auwrites:
In article
<1170448418.083389.289...@h3g2000cwc.googlegroups. 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.

I can see I am not going to succeed! <gIn the example OP opened
with, I could see no particular reason for the couple of lists to
be in any particular order in the html for semantic reasons. So I
thought, take advantage of this happy situation. If one can mate
in 4 moves but it does not look good positionally, I would always
go the tactical response. To do otherwise is to have a too
precious view of the purpose of positional play. Even gods strike
when the iron is hot!

These would emerge if OP posted the likely or realistic url with
more of what is going to go into the page and how it is to be
styled as a whole. There are many ways to skin different cats as
well as the same cat.

There may be reasons however. Perhaps I am taking the OPs example
too literally. I am a very down to earth being, paradoxically
enough, martians are like that. Boom boom!

--
dorayme

I ended up reordering the ul's so the float: right; was the route I
took. All the other responses I had gotten weren't routes I wanted to
take either. Doing the float method seemed the lesser of the evils...
so...

In regards to the posting of the url, there isn't one. This isn't for
a website, it is the frontend to an application (script) that I have
been working on. If you would like to see that, I would have to email
it to you to as an attachment.

Regardless, I appreciate your help - as well as all of those who have
generously posted.

Feb 3 '07 #18

P: n/a
In article
<11**********************@k78g2000cwa.googlegroups .com>,
he******@yahoo.com wrote:
I ended up reordering the ul's so the float: right; was the route I
took. All the other responses I had gotten weren't routes I wanted to
take either. Doing the float method seemed the lesser of the evils...
so...
Often the way!
In regards to the posting of the url, there isn't one. This isn't for
a website, it is the frontend to an application (script) that I have
been working on.
No worries... good luck.

--
dorayme
Feb 3 '07 #19

This discussion thread is closed

Replies have been disabled for this discussion.