html - Force margin to use all width -


js fiddle example

i need these boxes in example placed same size out of each other on same line. how possible make? also, if resize window , 1 box drops down, in center in start of example.

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

edit: first

second

third

first, suggest using divs instead of <ul> , <li> otherwise have reset styles on them (for example, chrome adds -webkit-margin-before/after , other css properties can mess layout).

fiddle divs.

if need keep html markup, here

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%; } 

Comments

Popular posts from this blog

windows - Single EXE to Install Python Standalone Executable for Easy Distribution -

c# - Access objects in UserControl from MainWindow in WPF -

javascript - How to name a jQuery function to make a browser's back button work? -