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

Thread: Div Positioning

  1. #1
    New Coder
    Join Date
    May 2013
    Posts
    23
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Div Positioning

    I'm having a problem with CSS positioning. Here is the complete HTML and CSS code. Please run it and look to the right div:
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
    <html>
      <head>
      <meta http-equiv="content-type" content="text/html; charset=windows-1250">
      <meta name="generator" content="PSPad editor, www.pspad.com">
      <title></title>
      <style>
    
        #header {
          float:left; 
          margin-top:10px;
          border: solid 1px #ff0000;
          width:100%;
        }
        
        #left {
          float:left;
          margin-top: 10px;
          margin-right: 10px;
          border: solid 1px #ff0000;
          width:16%;  
          overflow: auto;
        }
        
        #center {
          float: left;
          border: solid 1px #ff0000;
          width: 66%;
          margin-top: 10px;
        }
        
        #featured {
          float: left;
          border: solid 1px #ff0000;
          width: 66%;
          margin-top: 10px;
        }
        
        #right {
          float: right;
          margin-top: 10px;
          border: solid 1px #ff0000;
          width: 16%;
          overflow: auto;
        }
        
        #footer {
          float: left;
          margin: 10px 0px 0px 0px;
          border: solid 1px #ff0000;
          width: 100%
        }
    
      </style>
      </head>
      <body>
    <div id="header">
      <p>id = Header</p>
      <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Integer pretium dui sit amet felis. Integer sit amet diam. Phasellus ultrices viverra velit.</p>
    </div>
    
    <div id="left">
      <p>id = Left</p>
      <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Integer pretium dui sit amet felis. Integer sit amet diam. Phasellus ultrices viverra velit.</p>
    </div>
    
    <div id="center">
      <p>id = Center</p>
      <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Integer pretium dui sit amet felis. Integer sit amet diam. Phasellus ultrices viverra velit. Nam mattis, arcu ut bibendum commodo, magna nisi tincidunt tortor, quis accumsan augue ipsum id lorem.</p>
    </div>
    
    <div id="featured">
      <p>id = Featured</p>
      <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Integer pretium dui sit amet felis. Integer sit amet diam. Phasellus ultrices viverra velit. Nam mattis, arcu ut bibendum commodo, magna nisi tincidunt tortor, quis accumsan augue ipsum id lorem.</p>
    </div>
    
    <div id="right">
      <p>id = right</p>
      <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Integer pretium dui sit amet felis. Integer sit amet diam. Phasellus ultrices viverra velit.</p>
    </div>
    
    <div id="footer">
      <p>id = Footer</p>
      <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Integer pretium dui sit amet felis. Integer sit amet diam. Phasellus ultrices viverra velit.</p>
    </div>
    
    </body>
    </html>
    I want the top of right div to align with the top of center div.

    Can some one hel me with this?

    Thank You

  • #2
    New Coder
    Join Date
    Jul 2013
    Posts
    39
    Thanks
    0
    Thanked 2 Times in 2 Posts
    Try this code..

    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
    <html>
      <head>
      <meta http-equiv="content-type" content="text/html; charset=windows-1250">
      <meta name="generator" content="PSPad editor, www.pspad.com">
      <title></title>
      <style>
    
        #header {
          margin-top:10px;
          border: solid 1px #ff0000;
          width:100%;
        }
        
        #left {
          float:left;
          margin-top: 10px;
          margin-right:10px;
          border: solid 1px #ff0000;
          width:15%;  
          overflow: auto;
        }
    	#center_content{
    		float:left;
    		width:100%;
    		}
    	#center_container{
    		float:left;
    		width:68%;
    		
    		}
        
        #center {
          float: left;
          border: solid 1px #ff0000;
          width: 100%;
          margin-top: 10px;
    	  
        }
        
        #featured {
          float: left;
          border: solid 1px #ff0000;
          width: 100%;
          margin-top: 10px;
        }
        
        #right {
          float: right;
          margin-top: 10px;
    	  margin-left:10px;
          border: solid 1px #ff0000;
          width: 15%;
          overflow: auto;
        }
        
        #footer {
          float: left;
          margin: 10px 0px 0px 0px;
          border: solid 1px #ff0000;
          width: 100%
        }
    
      </style>
      </head>
      <body>
    <div id="header">
      <p>id = Header</p>
      <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Integer pretium dui sit amet felis. Integer sit amet diam. Phasellus ultrices viverra velit.</p>
    </div>
    <div id="center_content">
    
    
    <div id="left">
      <p>id = Left</p>
      <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Integer pretium dui sit amet felis. Integer sit amet diam. Phasellus ultrices viverra velit.</p>
    </div>
    <div id="center_container" >
    <div id="center">
      <p>id = Center</p>
      <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Integer pretium dui sit amet felis. Integer sit amet diam. Phasellus ultrices viverra velit. Nam mattis, arcu ut bibendum commodo, magna nisi tincidunt tortor, quis accumsan augue ipsum id lorem.</p>
    </div>
    
    <div id="featured">
      <p>id = Featured</p>
      <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Integer pretium dui sit amet felis. Integer sit amet diam. Phasellus ultrices viverra velit. Nam mattis, arcu ut bibendum commodo, magna nisi tincidunt tortor, quis accumsan augue ipsum id lorem.</p>
    
    </div>
    </div>
    
    <div id="right">
      <p>id = right</p>
      <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Integer pretium dui sit amet felis. Integer sit amet diam. Phasellus ultrices viverra velit.</p>
    </div>
    
    
    </div>
    <div id="footer">
      <p>id = Footer</p>
      <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Integer pretium dui sit amet felis. Integer sit amet diam. Phasellus ultrices viverra velit.</p>
    </div>
    
    </body>
    </html>

  • #3
    New Coder
    Join Date
    May 2013
    Posts
    23
    Thanks
    0
    Thanked 0 Times in 0 Posts
    That is what I want. Thank You

  • #4
    New Coder
    Join Date
    May 2013
    Posts
    23
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Well... Looking to the code now, I would prefer to do this without adding more DIVs, just using posinioning... I don't know how to do it but I belive it is possible.

    Thank You

  • #5
    Regular Coder
    Join Date
    Sep 2011
    Posts
    330
    Thanks
    3
    Thanked 35 Times in 35 Posts
    Have a look at this CSS positioning tutorial. It contains all the CSS positioning options, and should contain the best option for your case.
    Frank

    How to: Target IE in, Position in, Center in, Create a Fixed ('Sticky') Footer with, and Create a Drop-Down/Fly-Out Menu with CSS: Website Laten Maken Amsterdam.

  • #6
    New Coder
    Join Date
    May 2013
    Posts
    23
    Thanks
    0
    Thanked 0 Times in 0 Posts
    I've seen several positioning tutorials, but simple can´t understand the logic...

    Thank You anyway


  •  

    Posting Permissions

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