0

take two here. This problem has been paining me for a while. I have a desired layout, similar to this;

<body>
<div id="first section">
<div id="second section">
<div id="third section">
<div id="fourth section">
<body>

Essentially what i am aiming for (in basic terms) is a layout that is 400% height, with each 'section', so to speak, taking up 100% height of ALL different sized screens. I have played around alot with mix,max and height properties to no avail, including setting the body's height to 100% with each 'section' being 25% of that...

Is this possible to do with basic css or am i looking at something more technical?

bfavaretto
  • 71,580
  • 16
  • 111
  • 150
Declan Gregory
  • 1
  • 1

3 Answers3

0

Most likely you are going to need to do this by setting the DIV element's height based on the browser window height in javascript.

Community
  • 1
  • 1
JohnFx
  • 34,542
  • 18
  • 104
  • 162
0

Lemme say some suggestions.

  1. You don't have a closing tag for the div, which might inherit the styles. So close the divs.
  2. You need to close your <body> using </body>.
  3. There is no parent div for wrapping up the elements. If you want the document to have something like a single screen with the whole contents in accordion, you can do this by giving a fixed height and positioning the inner divs. But I prefer you to do the same in UL and LI.

So, a solution for your question may be like this. Have this layout...

<body>
    <div class="wrap">
        <div id="first section"></div>
        <div id="second section"></div>
        <div id="third section"></div>
        <div id="fourth section"></div>
    </div>
</body>

Now, you need to give a height for the .wrap, usually the screen's height. Now, the same screen's height should be given to the sections too. Keep the sections, positioned relatively and give overflow: hidden; to the wrap div.

.wrap {height: 100px /* just for here */; overflow: hidden;}
.wrap .section {height: 100px /* just for here */; position: relative;}

Now, when you want to show the first page, use this way:

.first {top: 0;}

Or, you can do even this way.

.section {display: none;}
.first.section {display: block;}

Check out this Fiddle for the code.

Praveen Kumar Purushothaman
  • 164,888
  • 24
  • 203
  • 252
0

Couple of pointers:

  • Your closing body tag is wrong, should be </body>
  • Your div tags aren't closed.
  • You're using the id attribute as if it were class.

If I understood your question correctly, the sections should not overlap.

Check this jsfiddle out and see if it's what you're looking for.

The Code

Markup:

<div class="first section">First section</div>
<div class="second section">Second section</div>
<div class="third section">Third section</div>
<div class="fourth section">Fourth section</div>

CSS:

html,body {
    min-height: 100%;
    height: 100%;
}

.section {
    min-height: 100%;
}
Community
  • 1
  • 1
thordarson
  • 5,943
  • 2
  • 17
  • 36