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 2 of 2
  1. #1
    New to the CF scene
    Join Date
    May 2011
    Posts
    4
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Positioning multiple divs/sections

    I am currently working on a website in html 5 for a uni project and I am trying to place multiple sections in a line at the top. The best way to explain it is

    LOGO>BLANK CONTAINER>LOGIN FORM

    I have tried floating but that will position the left and right but the center section won't position correctly. I have tried using a wrapper and placing them inside that but no luck. I am still new to this so please outline anything I am doing wrong.

    HTML 5 Code -

    <section id="topWrapper">
    <section id="logo">
    <h1> logo here </h1>
    </section>

    <section id="centerTop">
    <h1> Blank container </h1>
    </section>

    <section id="login">
    <h1> This is where the login form will go </h1>
    </section>
    </section>

    CSS3 -

    #topWrapper {
    display:block;
    height:200px;
    width:auto;
    }

    #logo {
    display:block-inline;
    padding:0;
    height:200px;
    width:200px;
    background-color:#666666;
    }

    #centerTop {
    display:block-inline;
    height:200px;
    width:400px;
    background-color:#666666;
    }

    #login {
    height:200px;
    width:200px;
    width:200px;
    background-color:#666666;
    }


    Thank you in advance

  • #2
    Regular Coder
    Join Date
    Jan 2012
    Posts
    134
    Thanks
    0
    Thanked 32 Times in 32 Posts
    The proper CSS style is inline-block, not block-inline.

    However, HTML5 or not, I would just use a table to do this. If you're committed to the way you're doing it, then I would probably ditch the container, the use float: left on every one of your sections. You can then remove the display: inline-block attribute;

    Code:
    <html>
    <head>
      <title>form test</title>
    
    	<style type="text/css">
    
    
    		#logo {
    			float: left;
    			padding:0;
    			height:200px;
    			width:200px;
    			background-color:#666666;
    		}
    
    		#centerTop {
    			float: left;
    			height:200px;
    			width:400px;
    			background-color:#666666;
    		}
    
    		#login {
    			float: left;
    			height:200px;
    			width:200px;
    			background-color:#666666;
    		}
    
    	</style>
    
    </head>
    
    <body>
    
    
    <section id="logo">
    this is some text 
    </section>
    <section id="centerTop">
    this is some text this is some text 
    </section>
    <section id="login">
    this is some text this is some text this is some text this is some text this is some text this is some text this is some text this is some text this is some text 
    </section>
    	
    </body>
    </html>


  •  

    Posting Permissions

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