Divide HTML page into 5 parts

Question

I am developing mobile application using jQuery Mobile and Phonegap. I want to divide a page into 5 parts and responsive depend on the height of the screen. I tried this:

<div data-role="content" style="width:100%; height:100%">   
    <img src="www/image/1.png" style="width:100%; height:20%">
    <img src="www/image/2.png" style="width:100%; height:20%">
    <img src="www/image/3.png" style="width:100%; height:20%">
    <img src="www/image/4.png" style="width:100%; height:20%">
    <img src="www/image/5.png" style="width:100%; height:20%">
</div> 

What I want is: emaple

Thanks!

Answer 1

Okay, here you go. I added in some titles and such and a media query so you can see how things can easily be restyled depending on screen size / browser window. You would obviously need your html, head, and body tags.

Here's the working fiddle.

If you still need an explanation let me know. I personally use this method because it's fast and is pure html and css2/3. Instead of the background colors, you would put in the path to your images as I showed in my first reply.

I also adding 2px of padding just to show you that it won't break. You can make it higher, but in the small jsfiddle area it would make the text overflow without a font resize.

HTML

<div class="wrap">
    <div class="box box1">
        <h2>Title 1</h2>
        <p>meaningless text</p>
    </div>
    <div class="box box2">
    <h2>Title 2</h2>
        <p>meaningless text</p>
    </div>
    <div class="box box3">
        <h2>Title 3</h2>
        <p>meaningless text</p>
    </div>
    <div class="box box4">
        <h2>Title 4</h2>
        <p>meaningless text</p>
    </div>
    <div class="box box5">
        <h2>Title 5</h2>
        <p>meaningless text</p>
    </div>
</div>

CSS

html, body {width:100%; height:100%; margin:0; padding:0; font-family:'Helvetica Neue', Helvetica, sans-serif; font-size:16px}
div {-webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box}
.wrap {width:100%; height:100%}
.box {width:100%; height:20%; text-align:center; padding:2px}
.box1 {background:#555}
.box2 {background:#777}
.box3 {background:#999}
.box4 {background:#aaa}
.box5 {background:#ccc}
h2 {color:#fff;font-size:1.3em;margin-bottom:0}
p {font-size:.85em; font-weight:300; color:#ffcc00; margin-top:-4px}
@media only screen and (max-width: 360px) {
    h2 {font-size:.9em}
    p {font-size:.7em}
}

Edit: And here's the fiddle with hover states added.

Answer 2

As you are using jQuery Mobile, the first thing to do is size the content div to fill the screen. Have a look at this: http://jqmtricks.wordpress.com/2014/02/06/content-div-height-fill-page-height/.

The script to keep the content at the height of the device screen is:

function ScaleContentToDevice(){
    scroll(0, 0);
    var content = $.mobile.getScreenHeight() - $(".ui-header").outerHeight() - $(".ui-footer").outerHeight() - $(".ui-content").outerHeight() + $(".ui-content").height();
    $(".ui-content").height(content);
}

$(document).on( "pagecontainershow", function(){
    ScaleContentToDevice();        
});

$(window).on("resize orientationchange", function(){
    ScaleContentToDevice();
});

Next put your 5 images within the content div, e.g.:

<div data-role="page" id="page1">
    <div role="main" class="ui-content">
        <img src="http://lorempixel.com/800/300/technics/1/" />
        <img src="http://lorempixel.com/800/300/technics/2/" />
        <img src="http://lorempixel.com/800/300/technics/3/" />
        <img src="http://lorempixel.com/800/300/technics/4/" />
        <img src="http://lorempixel.com/800/300/technics/5/" />
    </div> 
</div>  

Finally use CSS to size the images:

.ui-content {
    -webkit-box-sizing: border-box; 
    -moz-box-sizing: border-box; 
    box-sizing: border-box;
    padding: 0;
    border: 0;
    border-image-width: 0;
}
img {
    display: block;
    width:100%; 
    height:20%;
    padding: 0;
    margin: 0;
    border: 0;
    border-image-width: 0;
    -webkit-box-sizing: border-box; 
    -moz-box-sizing: border-box; 
    box-sizing: border-box;
}

The first rule removes all padding, margin, borders, etc. from the content div. The second one sizes the images so each one is 20% of the content div.

Here is a DEMO

This also works if you decide to include a header and/or footer on the page as the scaling code takes this into account.

DEMO which includes header

Answer 3

The first answer is correct, but you may find this useful as well.

It may be easier to wrap your images in divs, or use divs and set the images as backgrounds using CSS, unless you just want straight images, which may prove difficult to overlay anything else on top unless you plan on using lots of nesting and absolute positioning. I do this all the time and it works great in all browsers (old IE of course sucks but I don't code for it anymore), AND if you have clients that don't want images easily pulled from a page, putting images in backgrounds is an easy way that will deter most users who won't dig into the code.

Using css3 box-sizing will make your life much easier when dealing with percentage-based divs, as you may decide to add padding to your divs which will make things go nuts. Just check caniuse dot com to make sure that the mobile versions you are targeting support box-sizing. Most of them do, and there should be some polyfills at this link if you want fall-backs for old browsers. They are usually JS files you include in the head or footer with minimal coding.

It is also advised not to use inline CSS if it can be helped, and to use external stylesheets. Pretty standard now unless you're doing HTML emails. I understand you may know that and just put up this snippet as an example, but figure I'd mention it just in case.

Here's what I'd do in your situation:

HTML

<div class="wrap" data-role="content">   
    <div class="box1"></div>
    <div class="box2"></div>
    <div class="box3"></div>
    <div class="box4"></div>
    <div class="box5"></div>
</div>

and the css (albeit simplified for this example)

div {-webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box}
.wrap {width:100%; height:100%}
.wrap div {width:100%; height:20%}
.box1 {background:url('www/image/1.png') top left no-repeat; background-size:cover}
.box2 {background:url('www/image/2.png') center center no-repeat; background-size:100%}
.box3 {background:url('www/image/3.png') top center no-repeat; background-size:contain}
.box4 .......

you get the idea. and there's more than one way to size backgrounds which is why I showed three, and I don't know what your images are so I can't be sure how you should size them. Modern browsers don't need to have '' around the file path, but I added it for posterity.

Using the above code, you could then add this line of CSS without breaking the page:

.box1, .box2, .box3, .box4, .box5 {padding:20px}

then you could add in text, extra divs, headers, or whatever you wanted, as long as you sized them right. such as:

<div class="box1"><h2>some title</h2><p>some meaningless text</p></div>

As long as you use CSS to position those other elements, things will work fine, and you might just need to add a few @media queries to make sure they align and size properly on various screens.

also, you could use CSS3 flex-box, but support for it is still a bit buggy, and it's more complex, and you might need a bunch of fallbacks for it. You can read more about flex-box at css-tricks. I can't add more than two links to this to give you the direct links.

Hope that helps.

Answer 4

html,body{ height:100%; width:100%}

it will set height of page