Condor Condor - 1 year ago 55
Javascript Question

Dynamically sized div - fit text inside?

I want to create a browser-based ebook reader, using the .xml files inside the .epub files as the content.

Now the thing is, a book has 2 pages to look at, and I experience some problems reconstructing it for various screen sizes. Especially the font.
Depending on the screen size, and dynamically in case of maximized/fullscreen/resizing the font should change accordingly to fit the two pages just right.

Below is some code I tried.

position: absolute;
top: 0;
left: 0;
width: 50%; // so a variable width.
height: 100%;
position: absolute;
top: 0;
left: 50%;
width: 50%;
height: 100%;

<div id="left">Half page of text</div>
<div id="right">Other half page of text</div>

Answer Source

The thing about 2 display:inline columns 50% is that with some browsers (ahem: IE) 50% isn't always 50%. So, you'll have random cases where columns don't flow correctly and your layout is jacked up. Remember, you'll also have to accommodate for margin and padding if you build a homebrew solution.

My personal preference is going with a grid system that has all these bugs hammered out. There are a ton of them -- Bootstrap has a good one, 960 grids stands alone well.

Here's an example with for example:

<div class="container_12">
   <div class="grid_6 left">
     Left Column
   <div class="grid_6 right">
     Right Column

That's it....pretty simple. In a nutshell, you're taking a .container-12 which would be like a row in a table that has 12 columns in it. Then you put in two divs that are .grid-6, or half of .container-12 each. If you wanted a one-quarter, three-quarter layout, you'd do .grid-3 and .grid-9 The grids automatically adapt to size as the browser resizes based on percentages with margins and padding accomodated for.

Bootstrap takes it one step further by allowing you to change your layout simply based on size. For instance, on a computer screen it could be side-by-side, while on an iPad or iPhone it could be one on top of the other. Again, you can do this with native CSS, but it's not nearly as easy.