Horizontal List

Hello,

I have the following HTML:
<div id = "content" class = "content">
<ul id = "list" class = "list">
<li id = "first" class = "first">
</li>
<li id = "second" class = "second">
</li>
</ul>
</div>

Basically, I want to make the list items to be side by side. I want
the list to be 400px with.
First item should have 40% of the width and second item 60%.

I tried the following CSS:
..content
{
border: solid 1px black;
overflow: hidden;
}

ul.list
{
border: solid 1px red;
list-style-type: none;
margin: 0px;
padding: 0px;
}

ul.list li
{
display: inline;
}

li.first
{
width: 40%;
}

li.first
{
width: 60%;
}

Why overflow?
I have no idea but when I don't use this the list gets wider then

the container div

Why margin and passing set to 0?
I also don't know but if I don't use it I get a space between the

div and the list.

Finally, I am not able to set the width of both list items.

Could someone please help me out?

Thank You,
Miguel

In article
<1191201410.293502.91520 (AT) d55g2000hsg (DOT) googlegroups.com>,
shapper <mdmoura (AT) gmail (DOT) com> wrote:

Hello,

I have the following HTML:
div id = "content" class = "content"

Why both id and class?

Basically, I want to make the list items to be side by side. I want
the list to be 400px with.

Which means it will break badly when font-size is adjusted by the
user.

First item should have 40% of the width and second item 60%.


li.first
{
width: 40%;
}

li.first
{
width: 60%;
}

Notice that you have "first" twice here? A typo?

Why overflow?
I have no idea but when I don't use this the list gets wider then
the container div

Did you ask these questions and answer them? Where did the
questions come from? Perhaps you do not know that some of us do
not use Google. At least I see no other posts in this thread?
Maybe it is just my newsreader?

Why margin and passing set to 0?
I also don't know but if I don't use it I get a space between the
div and the list.

One thing to watch out for is that list items have markers and
these are defaulted by padding/margin differently in different
browsers - *even* when no list items are displayed. You can zero
these out and set your own margins. See my example later.

Finally, I am not able to set the width of both list items.

Look at this:

One thing to watch out for is that list items have markers and
these are defaulted by padding/margin differently in different
browsers - *even* when no list items are displayed. You can zero
these out and set your own margins. See later.

Look at this html:

<ul>
<li class="first">first item</li><li class="second">second
item</li>
</ul>

and now look at this css:

* {margin: 0; padding: 0;}

ul {

list-style-type: none;
width: 400px;
border: 1px dotted #999;
}

li {
background: #ccc;}


li.first {

width: 40%;
background: #fcc;
}

li.second {

width: 60%;
background: #ccf;
}

You will see that the percentages here work, at least in respect
to the list item area (the text will overflow at big user font
adjustment). But as soon as you add display: inline; to the li
css, you are turning these into objects like words in text,
inline objects; width control is now set by the content...

if you need so much control, forget about inline lists, it may be
easier for you to use just divs, and float them all left,
supplying widths and appropriate left margins.

Or best of all, by all means use the inline lists, useful things,
but forget about trying to tame their individual percentage
widths, let them find their own, just set margins and paddings
and you can make them look nice. Forget about making a design
that "requirs" the ul or its container to be 400px wide. You are
storing up trouble.

--
dorayme

On 2007-10-01, shapper <mdmoura (AT) gmail (DOT) com> wrote:
[...]

Basically, I want to make the list items to be side by side.
[...]
ul.list li
{
display: inline;
}
[...]
Finally, I am not able to set the width of both list items.

You can't set width on things that are display: inline, it just gets
ignored, that's what the spec says should happen.

If you want to set their widths and have them side-by-side, they should
to be display: inline-block, but that isn't widely-enough supported, so
use float: left instead.

It doesn't work quite like inline but is probably similar enough.

So leave display alone and set float: left. Or also set display to block
so that the list item markers go away (or use list-style-type: none and
leave them as display: list-item. Display: list-item is just like
display-block except for the markers, or should be.)