javascript - Dynamically sized div - fit text inside? -
javascript - Dynamically sized div - fit text inside? -
i've got layout problem in web site.
the layout right fixed it's default state (font doesn't fit page). want have page automatically stretches text in dynamically sized div (using percents).
what thought of obtain width of element using offsetwidth() - , maybe js or jquery. maybe that's way go.
i have made reconstruction of problem.
it's text want allow stretch out fill whole div. so, if there text within fits on screen - let's phone call width x , height y - on screen has half size way much text (a scrollbar appear). on screen double size text small.so i'm looking command automatically resizes text fit in div.
class="snippet-code-css lang-css prettyprint-override">#left{ position: absolute; top: 0; left: 0; width: 50%; // variable width. height: 100%; } #right{ position: absolute; top: 0; left: 50%; width: 50%; height: 100%; } class="snippet-code-html lang-html prettyprint-override"><body> <div id="left">half page of text</div> <div id="right">other half page of text</div> </body>
the thing 2 display:inline columns 50% browsers (ahem: ie) 50% isn't 50%. so, you'll have random cases columns don't flow correctly , layout jacked up. remember, you'll have accommodate margin , padding if build homebrew solution.
my personal preference going grid scheme has these bugs hammered out. there ton of them -- bootstrap has one, 960 grids stands lone well.
here's illustration 960.gs example:
<div class="container_12"> <div class="grid_6 left"> left column </div> <div class="grid_6 right"> right column </div> </div> that's it....pretty simple. in nutshell, you're taking .container-12 row in table has 12 columns in it. set in 2 divs .grid-6, or half of .container-12 each. if wanted one-quarter, three-quarter layout, you'd .grid-3 , .grid-9 grids automatically adapt size browser resizes based on percentages margins , padding accomodated for.
bootstrap takes 1 step farther allowing alter layout based on size. instance, on computer screen side-by-side, while on ipad or iphone 1 on top of other. again, can native css, it's not easy.
javascript jquery
Comments
Post a Comment