Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 6 of 6
  1. #1
    Regular Coder
    Join Date
    Mar 2009
    Posts
    101
    Thanks
    14
    Thanked 1 Time in 1 Post

    Question Making a DIV fall below another?

    Hi.
    I've a page that looks just like I want, but now I need to make a pared-down mobile style sheet for it. And I need to get a DIV (1) that appears within a DIV wrapper before another DIV (2) to fall below it (DIV 2) -- and I just can't find a way to do it.
    The best I can come up with is to use absolute positioning, but that's not a preferred solution!
    Is there some combination of relative or float positionings I can use that I haven't hit on yet?

    The normal page is:
    http://www.girlscoutsmoheartland.org...100th-expo.php
    with the DIV I want to have fall being "leftnavexpo" seen as the left-side bar, needing it to fall below "content" which is the main section in the middle.

    And here's what I can do with absolutes:
    http://www.girlscoutsmoheartland.org....php?mobtest=1
    which is, as I said, not ideal.

    Thanks for any suggestions!!
    Liam

  • #2
    Senior Coder
    Join Date
    Aug 2010
    Location
    High Point, NC
    Posts
    3,335
    Thanks
    5
    Thanked 363 Times in 360 Posts
    Divs are block level elements and unless styled(floated) will automatically render one under the other.
    Teed

  • #3
    New Coder
    Join Date
    Mar 2012
    Location
    Tulsa, OK
    Posts
    31
    Thanks
    0
    Thanked 3 Times in 3 Posts
    Quote Originally Posted by teedoff View Post
    Divs are block level elements and unless styled(floated) will automatically render one under the other.
    What he wants to do is take something that is on the left side of the screen (first in code), and render it below the object in the center of the screen (last in code).

    Try to get the red block below the green block, using css only.

    Code:
    <html>
    <head>
    <style type="text/css">
    #left {
    	display: block;
    	width: 250px;
    	height: 500px;
    	background: #ff0000;
    }
    
    #center {
    	display: block;
    	width: 450px;
    	height: 600px;
    	background: #00ff00;
    }
    </style>
    
    
    <div id="left">
    <p>&nbsp;</p>
    </div>
    
    <div id="center">
    <p>&nbsp;</p>
    </div>
    
    </body>
    </html>

  • #4
    Senior Coder
    Join Date
    Aug 2010
    Location
    High Point, NC
    Posts
    3,335
    Thanks
    5
    Thanked 363 Times in 360 Posts
    Quote Originally Posted by telekovar View Post
    What he wants to do is take something that is on the left side of the screen (first in code), and render it below the object in the center of the screen (last in code).

    Try to get the red block below the green block, using css only.

    Code:
    <html>
    <head>
    <style type="text/css">
    #left {
    	display: block;
    	width: 250px;
    	height: 500px;
    	background: #ff0000;
    }
    
    #center {
    	display: block;
    	width: 450px;
    	height: 600px;
    	background: #00ff00;
    }
    </style>
    
    
    <div id="left">
    <p>&nbsp;</p>
    </div>
    
    <div id="center">
    <p>&nbsp;</p>
    </div>
    
    </body>
    </html>
    Yes I know that was what he wanted, which is why I hinted to the fact that he has floated elements therefore nonfloated elements would be under each other.
    Teed

  • #5
    New Coder
    Join Date
    Mar 2012
    Location
    Tulsa, OK
    Posts
    31
    Thanks
    0
    Thanked 3 Times in 3 Posts
    Quote Originally Posted by teedoff View Post
    Yes I know that was what he wanted, which is why I hinted to the fact that he has floated elements therefore nonfloated elements would be under each other.
    Yes, but in the wrong order. That's what makes this a little more complex.

  • #6
    New Coder
    Join Date
    Mar 2012
    Location
    Tulsa, OK
    Posts
    31
    Thanks
    0
    Thanked 3 Times in 3 Posts
    Sorry about double posting... firstly.
    Secondly, this is a quirk. It does NOT work in IE 5.x, but does work in IE6, 7, FF, Opera, Safari and Chrome. It is standards compliant, and functions the way the specifications say it should..

    The concept:
    Code:
    <html>
    <head>
    <style type="text/css">
    #wrapper{
    	background: #0000ff;
    	position: relative;
    }
    #left {
    	width: 250px;
    	height: 500px;
    	background: #ff0000;
    	position: absolute;
    	top: 100%;
    }
    
    #center {
    	width: 450px;
    	height: 600px;
    	background: #00ff00;
    }
    
    </style>
    
    <div id="wrapper">
    <div id="left" class="reorder">
    <p>&nbsp;</p>
    </div>
    
    <div id="center" class="reorder">
    <p>&nbsp;</p>
    </div>
    </div>
    
    </body>
    </html>
    Your code:
    Code:
    <style type="text/css">
    #container{
    	position: relative;
    }
    
    #leftnavexpo {
    	display: block;
    	position: absolute;
    	top: 100%;
    }
    
    #content {
    	display: block;
    }
    </style>
    Last edited by telekovar; 03-07-2012 at 06:09 AM. Reason: Fixed some stuff.


  •  

    Posting Permissions

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