Positioning multiple divs/sections [Archive]

drumlegend19

02-01-2012, 12:51 PM

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

KuriosJon

02-01-2012, 01:04 PM

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;

<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>