CODEWITHSUNDEEP
htmlcsslist
iwazovsky
iwazovsky

Reputation: 1927

Force margin to use all width

JS Fiddle example

I need these boxes in example to be placed the same size out of each other on the same line. How it could be possible to make? Also, if you resize window and one box drops down, then it would be in the center like it is now in the start of the example.

<div id='wrapper'>
    <ul>
        <li>
        </li>
        <li>
        </li>
    </ul>
</div>

EDIT: First

Second

Third

Upvotes: 1

Views: 79

Answers (1)

web-tiki
web-tiki

Reputation: 103780

First, I would suggest using divs instead of <ul> and <li> otherwise you will have to reset styles on them (for example, chrome adds -webkit-margin-before/after and other css properties that can mess up your layout).

Fiddle with divs.

If you really need to keep you HTML markup, here is a

FIDDLE taht works in chrome.

HTML :

<div id='wrapper'>
    <ul>
        <li><span></span>
        </li>
        <li><span></span>
        </li>
        <li><span></span>
        </li>
    </ul>
</div>

CSS :

html, body {
    width:100%;
    margin:0;
    overflow: hidden;
}
#wrapper {
    width: 100%;
    height: 220px;
    background-color: #000;
}
ul {
    -webkit-margin-before: 0;
    -webkit-margin-after: 0;
    -webkit-margin-start: 0px;
    -webkit-margin-end: 0px;
    -webkit-padding-start:0;
}
ul > li {
    float:left;
    display:block;
    width:33.33%;
    height: 220px;
    list-style-type: none;
}
ul > li > span {
    background-color: red;
    display:block;
    margin:0 auto;
    width:200px;
    height:100%;
}

Upvotes: 2

Related Questions