css - Setting the width of HTML div's with %'s -
here relevant html:
<div class="row"> <div class="arrow box">◄</div>month year<div class="daymonth box"></div>►<div class="arrow box"></div> </div>
here css .html file above html in links to:
* { margin: 0; padding: 0; } body { font-family: "times new roman"; font-size: 12pt; } .daymonth { width: 80%; } .arrow { width: 10%; } .row { width: 58em; background-color: gray; margin-right: auto; margin-left: auto; } .box { float: left; text-align: center; }
this output:
the "row" centering in browser right stuff inside (the 2 arrows , month year) aren't doing want.
what think should doing is, because there 2 arrows , both of widths sent 10% , daymonth width 80% divs should take entire "row" (because sum 100%) , text "month year" should centered within "row" because .daymonth css class says should centered in div , because div should center 80% of "row". this, obviously, isn't happening though.
i don't want different solution (per se) want know why code i've written doesn't express idea want express, doesn't work way want to.
i think must misunderstanding how %'s governs widths. http://www.w3schools.com/css/pr_dim_width.asp says %'s "defines width in percent of containing block" though , looks %'s should intend them i'm thoroughly confused.
where have gone wrong?
this works fine me in opera.
i did notice have "month year" outside of <div>
. try putting inside , see if fixes it.
edit
, again last arrow, it's outside <div>
tag well.
your html should this:
<div class="row"> <div class="arrow box">◄</div><div class="daymonth box">month year</div><div class="arrow box">►</div> </div>
also, once this, row <div>
not have height might want explicitly set height (try 20px).
Comments
Post a Comment