0

I need to design a landscape page for mobile Web app like this: (CSS3 and jQuery allowed)

enter image description here

A, C and E share same width in percentage (maybe 50%, maybe more or less). B, D and F to fill the remaining width..

Headers A and B to stick at top. Containers C and D to fill the middle part. Footers E and F to stick to the bottom of the viewport.

I need to setup header and footer with fixed heights in pixels or percentage and they will contain absolute positioned images or DIV tags.

The C container will receive various tags with absolute positioning in percent (from left or right, top or bottom of that container).

I need the D container to receive long text with overflo-Yw and the content must be scrollable with finger gesture (Android / iPhone) whithout the rest of the page being scrolled.

Does some CSS guru have a sample to show, with similar design?

Didier Levy
  • 3,393
  • 9
  • 35
  • 57

1 Answers1

0

The HTML 

<div class="left">
  <div class="header"></div>
  <div class="content"></div>
  <div class="footer"></div>
</div>
<div class="right">
  <div class="header"></div>
  <div class="content"></div>
  <div class="footer"></div>
</div>

THE CSS

.left,.right{
 float:left;
 width:48,5%
}
.left{
 margin:0 3% 0 0;
}
.header{
height:20px;
width: 100%;
}
.content{
height:500px;
width: 100%;
}
.footer{
height:20px;
width: 100%;
}
Simon Dragsbæk
  • 2,367
  • 3
  • 30
  • 53
  • Thanks :-) I tried it but the middle containers (C and D) have fixed height in your solution. When the window size changes, this design doesn't adapt. What can be done inorderto make the center part adaptative? – Didier Levy Feb 11 '13 at 10:10
  • For dynamic hight just remove the height on the .content – Simon Dragsbæk Feb 12 '13 at 11:54