CODEWITHSUNDEEP
htmlcss
proseidon
proseidon

Reputation: 2305

List Items being rendered in the same spot instead of vertically/horizontally

I'm curious as to what in my styling is causing this issue. I have three columns in each colcontainer, and all the <li>s are jumbling into each other like it was position: absolute. I just want them to stack vertically like they normally do. Anyone have any ideas?

CSS:

#slider .colcontainer {
    width: 600px;
    height: 200px;
    background: red;
    float: left;
    padding: 0;
    margin: 0;
}
#slider .col1 {
    width: 30%;
    margin-left: 1.5%;
    margin-right: 1.5%;
    background: blue;
    float: left;
    position: relative;
}
#slider .col1 ul {
    list-style: none;
    padding: 0;
    float: none;
}

HTML:

<div class="colcontainer">
                    <div class="col1">
                        <ul>
                            <li>Test</li>
                            <li>Test</li>
                            <li>Test</li>
                        </ul>
                    </div>
                    <div class="col1">
                        <ul>
                            <li>Test</li>
                            <li>Test</li>
                            <li>Test</li>
                        </ul>
                    </div>
                    <div class="col1">
                        <ul>
                            <li>Test</li>
                            <li>Test</li>
                            <li>Test</li>
                        </ul>
                    </div>
                </div>

Upvotes: 0

Views: 73

Answers (3)

Olaf Dietsche
Olaf Dietsche

Reputation: 74018

I wrapped your colcontainer into yet another div#slider, but there's no problem so far. Three columns with three items.

See JSFiddle

Upvotes: 0

isherwood
isherwood

Reputation: 61056

You don't have #slider in your code, so your styles are not applied.

http://jsfiddle.net/EZx3b/

.colcontainer {
    width: 600px;
    height: 200px;
    background: red;
    padding: 0;
    margin: 0;
}
.col1 {
    width: 30%;
    margin-left: 1.5%;
    margin-right: 1.5%;
    background: blue;
    float: left;
    overflow: auto;
}
.col1 ul {
    list-style: none;
    padding: 0;
}

Upvotes: 1

David John Smith
David John Smith

Reputation: 1864

I would start by setting:

#slider li {
  display:block;
  position:static;
}

If that doesn't work, you should inspect the element in Firebug or Chrome Inspector and see which rules are overriding it and messing up the display.

Upvotes: 0

Related Questions