两列布局<ul>

Question

I have been trying to create a simple two column layout with css without using floats. I found several that suggested using an <ul> and each <li> would be a column. I tried that and I can't seem to get it to work. Here is my sample code.

<ul id="blogWrapper">
    <li id="testBlogCol1">Column 1</li>
    <li id="testBlogCol2">Column 2</li>
</ul>

#blogWrapper {
    width: 65%;
    height: auto;
    min-width: 45%;
    margin: 0 auto;
    border: 1px solid #cccccc;
    background-color: #fff;
}

#blogWrapper ul li {
    display: inline;
}

#testBlogCol1 {
    width: 40%;
    height: auto;
    background-color: #f5f5f5;
}

#testBlogCol1 {
    width: 60%;
    height: auto;
    background-color: #fff;
}

Instead of the <li> 's seperating into two columns like I want it to, they just stack on top of each other like normal. Any suggestions?

Answer 1

write inline-block instead of inline because inline element didn't take width, height, vertical margin & vertical padding .

write like this:

#blogWrapper ul li {
    display: inline-block;
    *display:inline;/* For IE7*/
    *zoom:1;/* For IE7*/
    vertical-align:top;
}

Answer 2

Use the following CSS:

#blogWrapper {
    width: 65%;
    height: auto;
    min-width: 45%;
    margin: 0 auto;
    border: 1px solid #cccccc;
    background-color: #fff;
}
#blogWrapper
{
  overflow: hidden;    
}
#blogWrapper li {
    float: left;
    display: block;
}

#testBlogCol1 {
    width: 40%;
    height: auto;
    background-color: #f5f5f5;
}

#testBlogCol2 {
    width: 50%;
    height: auto;
    background-color: #fff;
}

Currently using overflow: hidden to stretch the UL as long as the LI is. Otherwise the content after the UL will be shown on the same spot as the UL.

You currently write #blogWrapper ul while #blogWrapper is your UL. So that CSS will have no effect.
The CSS you are using contains #testBlogCol1 twice.

Live fiddle: http://jsfiddle.net/wHz94/