Results 1 to 6 of 6

Thread: position problem

  1. #1
    Join Date
    Oct 2013
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default position problem

    I want to make a site, with a wrapper centered on the screen, with contnet in the wrapper.
    This works with plain text in the wrapper
    This works well. Now i want to positionthe content in a specific place: the wrapper does not reacht the bottom of the page
    This happens if want want to position content in a div-container
    As you can see, if you scroll down, things go wrong.
    What did i do wrong?

  2. #2
    Join Date
    Jul 2008
    Location
    Derbyshire, UK
    Posts
    1,933
    Thanks
    16
    Thanked 303 Times in 302 Posts
    Blog Entries
    9

    Default

    Id probably do it this way - with another div;
    Code:
    <!DOCTYPE HTML>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Untitled Document</title>
    
    <style>
    html, body { margin:0; padding:0; height:100% }
    
    body {
    	background-color: blue;/*create 2 sidebars so to put content in the middle section*/
    	font-family: Calibri, Arial, Helvetica, sans-serif;	
    }
    
    #wrapper { /*content must come in here*/
    	position:relative;
    	background: #FFFF99;
    	left: auto;
    	width: 1024px;
    	margin: 0 auto;
    	border: none;
    	height: 100%;
    	min-height: 100%;
        	height: auto;
    	padding: 0px 5px 30px 5px;
    	overflow:hidden;
    }
    
    #inner { margin-bottom:-99999px; padding-bottom:99999px; }
    
    #container {
    	position: absolute; /*i want the content in a specific place*/
    	top: 200px;
    	left: 200px;
    	width: 200px;
    	height: 805px;
    	z-index: 1;
    }
    </style>
    
    </head>
    <body>
    
    <div id="wrapper"><div id="inner">
    
    	<div id="container">content</div>
    
    </div></div>
    
    </body>
    </html>
    Focus on Function Web Design | Latest News RSS | Facebook | Twitter |
    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 |
    The only limit to creativity is imagination: JemCon.org

  3. #3
    Join Date
    Sep 2007
    Location
    The Netherlands
    Posts
    1,321
    Thanks
    30
    Thanked 137 Times in 132 Posts
    Blog Entries
    29

    Default

    Using position: fixed you can do it with less styles:
    <!DOCTYPE HTML>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>Untitled Document</title>

    <style>
    body { background-color: blue; font-family: Calibri, Arial, Helvetica, sans-serif; }
    </style>

    </head>
    <body>

    <div style="position: fixed; left:17%; top: 0px; right: 17%; bottom: 0px; background: #FFFF99">
    <div style="position: absolute; top: 200px; left: 100px; width: 200px; height: 805px; ">
    Content here.<br>nnn<br>mmm
    </div>
    </div>

    </body>
    </html>

  4. #4
    Join Date
    Sep 2007
    Location
    The Netherlands
    Posts
    1,321
    Thanks
    30
    Thanked 137 Times in 132 Posts
    Blog Entries
    29

    Default

    Sorry, that was not good enough for large content. You should have this instead:
    <!DOCTYPE HTML>
    <html >
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>Untitled Document</title>

    <style>
    body { background-color: blue; font-family: Calibri, Arial, Helvetica, sans-serif; }
    </style>

    </head>
    <body>


    <div style="position: fixed; left:17%; top: 0px; right: 17%; bottom: 0px; background: #FFFF99; overflow-y: auto">
    <div style="position: absolute; top: 200px; left: 100px; width: 400px; ">
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus. Phasellus viverra nulla ut metus varius laoreet. Quisque rutrum. Aenean imperdiet. Etiam ultricies nisi vel augue. Curabitur ullamcorper ultricies nisi. Nam eget dui.<br><br>

    Etiam rhoncus. Maecenas tempus, tellus eget condimentum rhoncus, sem quam semper libero, sit amet adipiscing sem neque sed ipsum. Nam quam nunc, blandit vel, luctus pulvinar, hendrerit id, lorem. Maecenas nec odio et ante tincidunt tempus. Donec vitae sapien ut libero venenatis faucibus. Nullam quis ante. Etiam sit amet orci eget eros faucibus tincidunt. Duis leo. Sed fringilla mauris sit amet nibh. Donec sodales sagittis magna. Sed consequat, leo eget bibendum sodales, augue velit cursus nunc, quis gravida magna mi a libero. Fusce vulputate eleifend sapien. Vestibulum purus quam, scelerisque ut, mollis sed, nonummy id, metus. Nullam accumsan lorem in dui. Cras ultricies mi eu turpis hendrerit fringilla. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; In ac dui quis mi consectetuer lacinia.<br><br>

    Nam pretium turpis et arcu. Duis arcu tortor, suscipit eget, imperdiet nec, imperdiet iaculis, ipsum. Sed aliquam ultrices mauris. Integer ante arcu, accumsan a, consectetuer eget, posuere ut, mauris. Praesent adipiscing. Phasellus ullamcorper ipsum rutrum nunc. Nunc nonummy metus. Vestibulum volutpat pretium libero. Cras id dui. Aenean ut eros et nisl sagittis vestibulum. Nullam nulla eros, ultricies sit amet, nonummy id, imperdiet feugiat, pede. Sed lectus. Donec mollis hendrerit risus. Phasellus nec sem in justo pellentesque facilisis. Etiam imperdiet imperdiet orci. Nunc nec neque. Phasellus leo dolor, tempus non, auctor et, hendrerit quis, nisi.<br><br>

    Curabitur ligula sapien, tincidunt non, euismod vitae, posuere imperdiet, leo. Maecenas malesuada. Praesent congue erat at massa. Sed cursus turpis vitae tortor. Donec posuere vulputate arcu. Phasellus accumsan cursus velit. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Sed aliquam, nisi quis porttitor congue, elit erat euismod orci, ac placerat dolor lectus quis orci. Phasellus consectetuer vestibulum elit. Aenean tellus metus, bibendum sed, posuere ac, mattis non, nunc. Vestibulum fringilla pede sit amet augue. In turpis. Pellentesque posuere. Praesent turpis.
    </div>
    </div>


    </body>
    </html>

  5. #5
    Join Date
    Oct 2013
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    Thank you mr. molendijk, that helps a lot. But why the 17%?

  6. #6
    Join Date
    Sep 2007
    Location
    The Netherlands
    Posts
    1,321
    Thanks
    30
    Thanked 137 Times in 132 Posts
    Blog Entries
    29

    Default

    You can have other values, but use percentages as they ensure that everything looks about the same with other screen resolutions.
    The best thing to do is to experiment with it.

Similar Threads

  1. Carousel Position Problem
    By Galil in forum Dynamic Drive scripts help
    Replies: 1
    Last Post: 07-18-2012, 10:50 PM
  2. position problem in IE 6
    By monicasaha in forum CSS
    Replies: 11
    Last Post: 12-31-2008, 11:41 AM
  3. Problem with dynamic div position
    By oviya78 in forum JavaScript
    Replies: 1
    Last Post: 01-15-2008, 03:48 AM
  4. <div> position problem
    By Hound in forum CSS
    Replies: 13
    Last Post: 01-18-2007, 08:37 PM
  5. Tool Tip Position Problem
    By atul in forum JavaScript
    Replies: 2
    Last Post: 08-04-2006, 12:47 PM

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
  •