5 replies [Last post]
patrickco
patrickco's picture
Offline
Enthusiast
Los Angeles
Last seen: 11 years 9 weeks ago
Los Angeles
Timezone: GMT-7
Joined: 2005-04-17
Posts: 157
Points: 12

Hi everyone,

I am trying to get all of my ul's to be all horizontal on one row:

http://collinatorstudios.com/scroll_test.html

css:

	<style type="text/css">
		body { 
			background: #000; 
			color: #fff; 
		}
 
		#main_box {
			border: 1px solid purple;
			width: 100px;
			height: 100px;
		        /* overflow: hidden;  when this is working, the main box will only reveal one ul at a time */
			position: relative;
		}
 
		#list_container {
			position: absolute;
			top: 0px;
			left: 0px;
			z-index: 0;
		}
 
		ul {
			white-space: nowrap;
			float: left;
			width: 100px;
			border: 1px solid red;
			list-style: none;
			padding: 0;
			margin: 0;
		}
 
		li {
			margin: 10px 0;
		}

html:

<div id="main_box">
		<div id="list_container">
 
		<ul>
			<li>Dragon's Lair</li>
			<li>Space ace</li>
			<li>Joust</li>
		</ul>
		<ul>	
			<li>Gauntlet II</li>
 
			<li>Pac-Man</li>
			<li>Pengo</li>
		</ul>
		<ul>
			<li>Star Castle</li>
			<li>Sinistar</li>
			<li>R-type</li>
 
		</ul>
		<ul>
			<li>Robotron</li>
			<li>Missle Command</li>
			<li>Centepede</li>
		</ul>
		<ul>
 
			<li>Battle Zone</li>
			<li>Asteroids</li>
			<li>Major Havoc</li>
		</ul>
		<ul>
			<li>Pole Position</li>
			<li>Track n' Field</li>
 
			<li>Food Fight</li>
		</ul>
		<ul>
			<li>Xevious</li>
			<li>Lunar Lander</li>
			<li>Popeye</li>
		</ul>
 
		<ul>
			<li>Mario Bros.</li>
			<li>Q*bert</li>
			<li>Bubbles</li>
		</ul>
	</div>
	</div>

I seem to only be able to make this happen if I assign a large width the #list_container... This is a problem because I don't know how many ul's I will have, so unless I make it something like width: 999999999999px or somthing, there's no guarantee that it will be wide enoough... so I am wondering if there is a different way to go about this?

I supposed I could use javascript to count the ul's in the container and set the width by with ul_count x 100... But I was wondering if there is another option?

-patrick

Tyssen
Tyssen's picture
Offline
Moderator
Brisbane
Last seen: 7 years 31 weeks ago
Brisbane
Timezone: GMT+10
Joined: 2004-05-01
Posts: 8201
Points: 1386

You're going to have to give #list_container a width

You're going to have to give #list_container a width because otherwise it inherits its width from the parent which you've set at 100px. Something can't be wider than its parent unless explicitly stated.

How to get help
Post a link. If you can't post a link, jsFiddle it.
My blog | My older articles | CSS Reference

Stomme poes
Stomme poes's picture
Offline
Elder
Netherlands
Last seen: 10 years 29 weeks ago
Netherlands
Timezone: GMT+2
Joined: 2008-02-04
Posts: 1854
Points: 378

You can see if the negative

You can see if the negative right margin trick works for you. It seems to give a container (if it's floated) some elasticity for floated children, so they don't have to wrap:
I don't see any reason for the list container to be abso-po'd, so float it to get funky margin benefits, and see if it works.

Optionally whitespace: nowrap on list_container (not the uls) may also stop floats from wrapping. But then your page had better always be wide enough.

This won't work in Konqueror, and Opera is picky about how much right margin you give. It has a limit, so test any number you use.

Your page is called scroll-test. Do you want it to scroll?

#main_box {
  width: 100px;
  height: 100px;
  margin: whatever;
  overflow: auto; <--not hidden
  border: optional;
}
#list_container {
  float: left;
  margin-right: -999em;
}
#list_container ul {
  float: left;
  widths;
  etc
}

You'll get a scrollbar when the number of ul's inside is wider than the main box.

I'm no expert, but I fake one on teh Internets

ljbailey
ljbailey's picture
Offline
Enthusiast
Scotland
Last seen: 11 years 27 weeks ago
Scotland
Joined: 2009-01-10
Posts: 224
Points: 59

Why has #main_box got a 100px

Why has #main_box got a 100px width anyway, when your ul's are set to 100px?

Why not take that out and just have float:left on the ul's?

Liam Bailey is director of Galloway Web Services, a Stranraer web design company, sister of SEO copywriting services company Write About Property.

Tyssen
Tyssen's picture
Offline
Moderator
Brisbane
Last seen: 7 years 31 weeks ago
Brisbane
Timezone: GMT+10
Joined: 2004-05-01
Posts: 8201
Points: 1386

ljbailey wrote: Why has

ljbailey wrote:

Why has #main_box got a 100px width anyway, when your ul's are set to 100px?

Because only one is supposed to be shown at one time with the rest accessible via scrolling horizontally.

How to get help
Post a link. If you can't post a link, jsFiddle it.
My blog | My older articles | CSS Reference

Stomme poes
Stomme poes's picture
Offline
Elder
Netherlands
Last seen: 10 years 29 weeks ago
Netherlands
Timezone: GMT+2
Joined: 2008-02-04
Posts: 1854
Points: 378

Which reminds me...

Quote:

Why has #main_box got a 100px width anyway, when your ul's are set to 100px?

#main will actually have to be taller than 100px, as scrollbars are added to the inside of a box.

So, something like 116px high. Start from that and keep adding to the height until there's no vertical scrollbar appearing (because initially one will appear).

I'm no expert, but I fake one on teh Internets