wordpress - CSS horizontal alignment for divs inside div container? -
having trouble wp 3.0.4 not displaying css styling horizontal alignment of 4 boxes (divs) inside container div. note: same css styling works fine html 4.01 transitional//en on hand-coded html/php website. wp 3.0.4 displays 4 boxes stepped down each other, staircase.
i'm using firefox 3.6.13, btw.
css:
div .box-container { display: inline; margin: 0.63em 0pt; padding: 10px; width: 640px; background-color: rgb(229, 231, 225); position: relative; float: left; overflow: hidden; } div .small-box { border: 1px solid rgb(153, 51, 102); margin: 10px 5px; padding: 0.325em; float: left; background-color: rgb(255, 244, 227); width: 128px; line-height: 0.85em; max-height: 8em; min-height: 8em; position: relative; }
html goes this:
<div class="box-container"> <div class="small-box">some text & image</div> <div class="small-box">some text & image</div> <div class="small-box">some text & image</div> <div class="small-box">some text & image</div> </div>
the box-container div width specified @ 640px, notice padding extends beyond this. in case, plenty large accommodate 4 small boxes, total 512px plus total 40px margin, plus 20px padding on box-container div.
i don't understand why padding pushes size of box-container div. when tried use max-width: 640px, observed boxes lined vertically, , box-container div no wider 170px.
the small-box divs same size, contents consist of text & image.
help?
some things try: * display: block in container * !important in proprieties * font-size declare ( using 16px font-size? , in theme has value? ) * display: block in small boxes
[]'s
Comments
Post a Comment