Fri, 2013-08-02 07:54
So here is the problem. I am designing a responsive site and using images in an ol. I have 8 images total but only want 4 per line. I have figured the sizes out but they don't work. The fourth image gets kicked to the next line. Here is the code.
Here's the HTML:
<section> <ul> <li id="One"><a href="some_site"><img src="_images/coming_soon_03.png"/></a></li> <li id="Two"><a href="some_site"><img src="_images/coming_soon_03.png"/></a></li> <li id="Three"><a href="some_site"><img src="_images/coming_soon_03.png"/></a></li> <li id="Four"><a href="some_site"><img src="_images/coming_soon_03.png"/></a></li> <li id="Five"><a href="some_site"><img src="_images/coming_soon_03.png"/></a></li> <li id="Six"><a href="some_site"><img src="_images/coming_soon_03.png"/></a></li> <li id="Seven"><a href="some_site"><img src="_images/coming_soon_03.png"/></a></li> <li id="Eight"><a href="some_site"><img src="_images/coming_soon_03.png"/></a></li> </ul> </section>
The reset for these items:
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video { margin: 0; padding: 0; border: 0; font-size: 100%; font: inherit; } ol, ul { list-style: none; }
Main CSS:
section, footer { background-color: rgba(0,0,0,.4); border-top-left-radius: 25px; border-top-right-radius: 25px; border-bottom-left-radius: 25px; border-bottom-right-radius: 25px; border-bottom: 3px solid rgba(255,238,191,1); border-top: 3px solid rgba(255,238,191,1); border-left: 3px solid rgba(255,238,191,1); border-right: 3px solid rgba(255,238,191,1); } section { width:86.09%; /*1176px of 1366px*/ margin: -6px auto auto auto; } section ul { width: 96.08%; /* 1130 of 1176*/ margin: 1.75em auto 1em auto; background: red; text-align: center; } section li { display: inline-block; width: 22.12%; /* 250 of 1130 */ } section img { max-width: 100%; } #One { } #Two { margin-left: 3.8%; } #Three { margin-left: 3.8%; } #Four { margin-left: 3.8% } #Five { } #Six { margin-left: 3.80%; } #Seven { margin-left: 3.80%; } #Eight { margin-left: 3.80%; }
Everything adds up to under 100% so why is this not displaying all 4 images on one line?
Sat, 2013-08-03 07:50
#1
Strange, floating the Li give
Strange, floating the Li give four to a row.
Not sure why this is happening could be a rounding issue on the % values.
Sat, 2013-08-03 17:55
#2
Everything adds up to 99.88%
Everything adds up to 99.88% in this example but in order to get the 4th image back on the top line I have to take the margins down quite a bit into the 1.5% range.
I'm not opposed to buying someone lunch for a detailed explanation and solution