Divs stacking on top of each other.

[Neil1]

I am working on a responsive website whereby each element resizes / repositions based on CSS media queries. I want the page to scroll vertically but to 'fit' horizontally. So all elements are in an absolute positioned div where width is maximum allowed based on minimum viewport width media query, left: 50%, margin-left: -(half the elements width) To position everything centrally.

This is all working perfectly on each individual element, however obviously for some elements (eg: text) as width narrows height increases as it takes up more lines, and for others (eg: images) as width increases height increases to maintain aspect ratio. Therefore setting the height and vertical position absolutely would be a nightmare.

So I have put each element containing div into a 100% width container div, which I assumed would simply stack up in order on the page, however they are all appearing on top of each other at the top of the page.

With no positioning on container divs the top one displays fine all others appear behind it, with position:relative or float:left the first and last display fine but the middle ones (I have five in total but this will increase) are all hidden.

Basically what I'm looking for is numerous divs of 100% width appearing one after the other down the page, I am pretty new to this and self-teaching so chances are I'm missing something simple! But could do with a pointer to know if its likely a mistake somewhere earlier in my code, something silly I'm missing, or simply trickier than I was anticipating!

[Beverleyh]

It's hard to suggest anything without seeing your page markup and css. Please post a link to that. in the meantime, maybe this will help http://www.sitepoint.com/easy-respon...-grid-layouts/

[Neil1]

Thanks again Beverleyh, that article was definitely interesting and I will be referring it in the future, but I don't think it helps with the problem I am having at the moment.... although there is a good chance I am simply not understanding it fully!

I was thinking of posting my code when I posed the question but was a) a bit embarrassed and b) worried it would just be even more confusing than not having it
there! I am trying to teach myself mostly for fun, so basically my page is a mess of a ton of stuff that is probably wrong or superfluous, but here it is as it stands http://www.pleasted.co.uk It is a combination of 'stolen' snippets I've played around with to see what does what, things I've learnt from online tutorials, etc.

But the relevant bits to the problem I'm having are likely either in the html or base.css.

The components header.css, navigation.css and intro.css and the related html all cover the horizontal positioning and all work perfectly if I add any of them individually to their own page. But when I put them in containing divs and try to place them all on the same page I get the 'stacking' issue. At the moment they are all in a class of .sectioncontainer which is simply set to width:100%; and position:relative; (in base.css) but I have tried giving them individual IDs rather than a universal class, I have tried float:left, not giving them any positioning, but always get the same stacked result.

My understanding was the absolute positioning I have used for the horizontal aspect would only relate to positioning within parent div not the page as a whole, and without any positioning the container divs would simply appear in the order they appear in the html, so with 100% with taken up by each one the subsequent one would simply start below it? This isn't happening so either my assumption was wrong or I've done something wrong, but my knowledge isn't yet at a level where I can fathom where, how and why.

Relevant parts in brief:

HTML

   <div class="sectioncontainer"> 

      <div id="myparallaxslider" class="parallaxslider">

            [Contents removed for sake of briefness]

      </div>

   </div>

   <div class="sectioncontainer"> 

      <div id="navigation">

         <a href="#"><img src="img/nav.png"  onClick="menu1.toggle(); return false" class="toggleitem" id="navlink"</img></a>
		
      </div>

   </div>

   <div class="sectioncontainer"> 
		
      <div id="intro">

            [Contents removed for sake of briefness]

      </div>

   </div>

CSS (outer containing div from base.css)

 	.sectioncontainer {
				  background-color:#d3d3d3;
				  width:100%;
				  position:relative;
				  }

CSS (example of one of the horizontally positioned child divs within .sectioncontainer from intro.css)

			@media (min-width:1701px) and (max-width:1750px) {
  	
				#intro{
				position:absolute;
				width:1680px;
				left:50%;
				margin-left:-840px;
				top:0px;
				}

(each of the sections have their own .css as I've been working on each one individually but the bits relating to positioning are basically the same in each and all in the format of the example listed above)


Fingers crossed this makes my problem clearer rather than just confusing it further!

[Beverleyh]

I'm looking at the demo page and I see a banner stacked on top with a "blah, blah" text box underneath (IE11). Have you fixed it?

I'm not sure what I'm looking at. If the problem is still there can you post mock up of what the page *should* looks like so I can compare with what it *actually* looks like.

Also say which browser you're using and post any noted differences between others you've tested in (if you get different results in different browsers)

[Neil1]

In what you were looking at there should have been two more sections between the header and the 'blah blah blah' text, but they were appearing underneath the other content not showing. I have tried in Chrome and Firefox, and based on what you described seeing the same problem occurring in IE.

I have taken all content out and just used a series of divs with different background colours to make problem easier to see. http://pleasted.co.uk has a series of divs with 100% width (Alternating black and white) The black ones should be gaps and the white ones should be the page content. At the moment within the first white div there is red div and within the second one there is a yellow div...

<div id="breaker1"></div> (Black)


<div id="container1"> (white)

<div id="headerouter"> (red)

</div>

</div>


<div id="breaker2"></div> (black)


<div id="container2"> (white)

<div id="content"> (yellow)

</div>

</div>


<div id="breaker3"></div> (black)


Which should, I both thought and hoped, give me something like this:



However the red and yellow divs are being positioned in relation to the page not their containing divs, so are appearing stack on top of each other at the top of the page. I am using media queries to size the red and yellow divs so am wondering if this is to blame?

[Beverleyh]

Its looks like you're overthinking the layout and media queries. Does this help?;

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Pleasted</title>

<style>
html, body { margin:0; padding:0; height:100%; background:#ccc }
.wrapper { max-width:64em; height:100%; margin:auto; background:#fff }
.breaker { background:#000; min-height:2em }
.container { background:#fff; padding:1.5em }
#headerouter { background:#f00; min-height:8em }
#content { background:#ff0; min-height:8em }
</style>

</head>
<body>

<div class="wrapper">

	<div id="breaker1" class="breaker"></div>

	<div id="container1" class="container">
		<div id="headerouter">
		</div>
	</div>

	<div id="breaker2" class="breaker"></div>

	<div id="container2" class="container">
		<div id="content">
		</div>
	</div>

	<div id="breaker3" class="breaker"></div>

	<div id="container3" class="container"></div>

	<div id="breaker4" class="breaker"></div>

	<div id="container4" class="container"></div>

	<div id="breaker5" class="breaker"></div>

	<div id="container5" class="container"></div>

</div><!-- closing ".wrapper" -->

</body>
</html>

[Neil1]

Hopefully yes It is working perfectly on the sample page I sent. The reason my media queries and layout were over thought is because when I come to adding content to the content divs the layout within them will change depending on screen width, eg: an image or video with text below it on small screens and beside it on larger screens, but hopefully when I get to that stage I will be able to work it out based on the working layout you have provided, thanks again you've been a great help.