Left-floated List Items stacking

Hello everyone,

I have an ordered list which has elements floated left. For some reason, they are stacking on top of each other. I’m not sure what’s up.

I’ve already checked the following things:

  • They’re not absolutely positioned.
  • They’re all on the same z-index.
  • The margin isn’t collapsing (I added a border to test)
  • They each have an explicitly set width.
  • They are all non-empty.

Unfortunately I can’t provide the code or give a live example, since it’s on an internal network and locked down. =p

So, anyone have any general ideas I could check?

Thanks.

Surely you could copy the relevant HTML and CSS. Otherwise we just have to keep guessing and asking potentially irrelevant questions.

wild guess: are they too wide for the width on the parent container?

Though yeah, ralph.m hit it on the head as this is a basic “and this is why we can’t help you”

A wild guess and if you would like to try with display property, display: block or display:inline or display:inline-block

Well, here is the odd thing. I have two pages, which as far as I can tell are structurally identical… it works on one and not the other.

Here is the CSS:


#content h2 {
	font-size: 1.2em;
	line-height: 1.33em;
	color: #FFF;
	padding: 8px 0 0;
	clear: both;
}

#content h1 {
	padding: 0 0 10px;
}

#content h1 a {
	font-size: 3.2em;
	line-height: 1.125em;
	color: #FFF;
}

.tabs {
	width: 980px;
	background: #E5E5E5;
	border: 1px solid #FAFAFA;
	-moz-box-shadow: 3px 3px 3px #666, -1px 0 1px #CCC, -1px 0 3px #666;
	-webkit-box-shadow: 3px 3px 5px #666;
	padding: 45px 10px 25px;
}

.tabs.hasJS {
	margin-top: 51px;
	border-color: #FFF;
}

.tabs.hasJS hr {
	margin: 0px 0 10px;
}

.tabs dl {
	background: #FFF;
	position: absolute;
}

.tabs.hasJS dl {
	position: relative;
}

.tabs dl h2 {
	font-size: 3em;
	line-height: 1.133em;
	font-weight: bold;
	color: #7AAE33;
}

.tabs dt {
	font-size: 1.2em;
	color: #0054A6;
}

.tabs.hasJS dt {
	display: none;
	float: left;
	margin: -40px 10px 40px;
	text-transform: uppercase;
}

.tabs.hasJS dt.active span {
	background: url(../images/triangle.gif) center bottom no-repeat;
}

.tabs.hasJS dt:first-child {
	display: block;
}

.tabs.hasJS dd {
	display: none;
	position: relative;
	height: 100%;
}

.tabs dd dt {
	display: none;
}

.tabs.hasJS dd dt {
	position: absolute;
	top: 0;
	display: inline-block;
	text-transform: none;
	border: solid #0054A6;
	border-width: 0 0 0 1px;
	padding: 0 10px 0px;
	cursor: pointer;
}

.tabs.hasJS dt span {
	padding: 0 0 16px;
}

.tabs.hasJS dd dd {
	margin: 0 0 0 10px;
	display: none;
	position: relative;
}

.tabs.hasJS .tab_links {
	margin: 0 0 0 -15px;
}

.tabs.hasJS .tab_links li {
	margin-top: -95px;
	float: left;
	height: 50px;
	background: url(../images/courseAvailButtons.jpg) no-repeat left -50px;
}

.tabs.hasJS .tab_links.courses li {
	background: url(../images/courseTabs.png) no-repeat left -50px;
}

.tabs.hasJS .tab_links li a {
	display: none;
}

.tabs.hasJS #camp_overview_tab{
	width: 167px;
}

.tabs.no_header {
	padding-top: 10px;
}

.tabs.no_header hr {
	display: none;
}

.tabs.hasJS #course_overview_tab {
	width: 167px;
	background-position: 0 -50px;
}

.tabs.hasJS #tuition_and_hours_tab {
	width: 165px;
	background-position: -167px -50px;
}

.tabs.hasJS #where_when_offered_tab {
	width: 165px;
	background-position: -332px -50px;
}

.tabs.hasJS #register_now_tab {
	width: 170px;
	background-position: -497px 0;
}

.tabs.hasJS #course_overview_tab.active {
	background-position: 0 0;
}

.tabs.hasJS #tuition_and_hours_tab.active {
	background-position: -167px -50px;
}

.tabs.hasJS #where_when_offered_tab.active {
	background-position: -332px -50px;
}

.tabs.no_header .tab_links li {
	margin-top: -60px;
}

.tabs.hasJS #camp_overview_tab.active {
	background-position: 0 0;
}

.tabs.hasJS #course_availability_tab {
	width: 165px;
	margin-left: 168px;
	background-position: -168px -50px;
}

.tabs.hasJS #course_availability_tab.active {
	background-position: -168px 0;
}

.tabs.hasJS #next_step {
	clear: both;
	display: block;
	text-align: right;
}

.tabs #camp_overview {
	left: 0;
}

.tabs #camps_offered {
	left: 108px;
}

.tabs #about_this_location {
	left: 214px;
}

.tabs #camp_activities {
	left: 344px;
}

.tabs #carpool {
	left: 542px;
}

.tabs #id_in_the_news {
	left: 656px;
}

The structure is basically like this:


<div id="content">
<!-- a div and some headers here -->
<div class="tabs">
  <ul class="tab_links">
    <li><a href="#something">Link text</a></li>
    <!-- More divs, one for each tab -->
  </ul>
  <dl class="tab_content">
    <dt id="something">Something</dt>
    <dd>
        <dl>
            <dt>Subtab 1</dt>
            <dd>Subtab content</dd>
            <!-- more dts and dds -->
         </dl>
     </dd>
     <!-- more dts and dds with dls -->
  </dl>
</div>

So, basically it is two sets of tabs, one on top (which are images… they’re the ones that stack), then more inside (which are working fine).

(If I made a typo in the HTML example, that’s not the reason it’s broken. My HTML/CSS is 100% valid… it would have just been a goofy error as I typed it).

I should also mention there is a bit of Javascript which controls the actual tabs, though none of it can affect this problem. I also use Eric Meyer’s Reset CSS.

Thanks for the help. This had me stumped all day yesterday.

just from viewing your code you are missing a closing div for Content. Could that be it or is that a typo from your paste?

Just a typo on Sitepoint. =p

The actual code is 100% valid HTML and CSS, so everything is closed and what not.