Results 1 to 7 of 7

Thread: Divs stacking on top of each other.

  1. #1
    Join Date
    May 2014
    Posts
    32
    Thanks
    16
    Thanked 0 Times in 0 Posts

    Default Divs stacking on top of each other.

    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!

  2. #2
    Join Date
    Jul 2008
    Location
    Derbyshire, UK
    Posts
    3,033
    Thanks
    25
    Thanked 599 Times in 575 Posts
    Blog Entries
    40

    Default

    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/
    Focus on Function Web Design
    Fast Edit (A flat file, PHP web page editor & CMS. Small, FREE, no database!) | Fast Edit BE (Snippet Manager) (Web content editor for multiple editable regions!) | Fast Apps

  3. #3
    Join Date
    May 2014
    Posts
    32
    Thanks
    16
    Thanked 0 Times in 0 Posts

    Default

    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:
    Code:
    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!

  4. #4
    Join Date
    Jul 2008
    Location
    Derbyshire, UK
    Posts
    3,033
    Thanks
    25
    Thanked 599 Times in 575 Posts
    Blog Entries
    40

    Default

    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)
    Focus on Function Web Design
    Fast Edit (A flat file, PHP web page editor & CMS. Small, FREE, no database!) | Fast Edit BE (Snippet Manager) (Web content editor for multiple editable regions!) | Fast Apps

  5. The Following User Says Thank You to Beverleyh For This Useful Post:

    Neil1 (09-26-2014)

  6. #5
    Join Date
    May 2014
    Posts
    32
    Thanks
    16
    Thanked 0 Times in 0 Posts

    Default

    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:

    Click image for larger version. 

Name:	Publication1.jpg 
Views:	215 
Size:	6.4 KB 
ID:	5529

    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?

  7. #6
    Join Date
    Jul 2008
    Location
    Derbyshire, UK
    Posts
    3,033
    Thanks
    25
    Thanked 599 Times in 575 Posts
    Blog Entries
    40

    Default

    Its looks like you're overthinking the layout and media queries. Does this help?;
    Code:
    <!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>
    Focus on Function Web Design
    Fast Edit (A flat file, PHP web page editor & CMS. Small, FREE, no database!) | Fast Edit BE (Snippet Manager) (Web content editor for multiple editable regions!) | Fast Apps

  8. The Following User Says Thank You to Beverleyh For This Useful Post:

    Neil1 (09-26-2014)

  9. #7
    Join Date
    May 2014
    Posts
    32
    Thanks
    16
    Thanked 0 Times in 0 Posts

    Default

    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.

Similar Threads

  1. StepCarousel z-index stacking.
    By cupofnestor in forum Dynamic Drive scripts help
    Replies: 7
    Last Post: 08-26-2010, 06:26 PM
  2. stacking order for menu?
    By discdemo in forum Dynamic Drive scripts help
    Replies: 8
    Last Post: 05-09-2010, 05:49 PM
  3. Resolved Things are stacking instead of ...
    By ModernRevolutions in forum HTML
    Replies: 1
    Last Post: 12-29-2009, 01:24 PM
  4. Stubborn Sprite Stacking
    By imanbushara in forum CSS
    Replies: 0
    Last Post: 05-11-2009, 04:08 PM
  5. div stacking
    By rayray1 in forum CSS
    Replies: 3
    Last Post: 04-12-2008, 07:52 AM

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •