css ul position in new line

Question

i need

at this moment code look

Css

ul#content {height:1%;overflow:hidden;list-style:none;margin:0;padding:0;max-width: 1020px;}
    ul#content li{vertical-align:top;display:inline-block;margin:0 2% 26px 0;width:auto;}


    * html ul#content li{display:inline;}
    *+ html ul#content li{display:inline;}

Html

<ul id="content" >
                <li>
                    <div style="height: 420px;width: 740px;" ></div>
                </li>
                <li>

                    <ul>
                        <li>
                            <div style="min-width: 220px;">
                                text
                            </div>
                        </li>
                        <li>
                            <div style="min-width: 220px;">
                                text
                            </div>
                        </li>
                        <li>
                            <div style="min-width: 220px;">
                              text
                            </div>
                        </li>
                    </ul>

                </li>
            </ul>

Answer 1

Maybe css media queries are something you want to look in to:

http://css-tricks.com/6731-css-media-queries/

This specific tutorial explains how to make changes to the layout/styles based on screen width.

Basically it allows to conditionally set styles on elements, in this case you could make seperate styles for the ul depending on screen width. Browser support is pretty decent, and as a fallback you could supply some pretty simple js code to handle the not supporting browsers.

Answer 2

I'm guessing you need something like the following for it to look like the second image...

html:

<div id="content"></div>
<ul id="contentList">
   <li>Text</li>
   <li>Text</li>
...
</ul>

css:

#content {width:740px; height:420px}
#contentList {margin:10px 0; overflow:hidden}
#contentList li {min-width:220px; float:left; list-style:none}