...

View Full Version : Aligning divs



wincode
05-01-2011, 10:15 AM
Hello, I have this page with this code:

<html>
<head>
<style type="text/css">
body{
background:#f1f1f1;
margin: auto;
}
#header{
width:100%;
background:#000;
height:100px;
}

#menu{
width:900px;
margin: auto;
height: 30px;
background: #aaaaaa;
vertical-align: bottom;
}

#mainc{
width: 900px;
background:#fff;
margin: auto;
}

</style>
</head>


<body>
<div id="header">
<div id="menu">
Menu
</div>
</div>
<div id="mainc">
Main
</div>

</body>
</html>

which produces this: http://i.imgur.com/UcDGt.jpg
but I want to have the menu to be aligned on the bottom part of the "header" div. how could I go about doing this? I'm trying to make it look like this: http://i.imgur.com/NLOBp.jpg
Appreciate any help! :)

Wojjie
05-01-2011, 03:11 PM
Vertical align mainly works on tables I believe.

What I would do is position the menu using margin-top, or put position:relative on #header and position:absolute;top:80px; on the #menu. You might need to play with the positioning a bit.

AndrewGSW
05-01-2011, 03:13 PM
I've been wrestling with this - it's not as easy as it first appears.

I had to pull the 'menu' out of the header - sorry! Then position it relatively so I could use a negative 'top' value to pull it back into the header. But I then had to do the same with 'mainc', otherwise it leaves a 30px gap.

(Note: you can't now put anything immediately under 'mainc' unless you, again, pull it up by 30px).

'margin:auto' achieves the horizontal centre-ing, but 'vertical-align:bottom' doesn't achieve anything and could be deleted. This property is applicable to in-line text elements.

body{
background: #f1f1f1;
margin: auto;
}
#header {
width: 100%;
background: #000;
height: 100px;
}
#menu {
position: relative;
top: -30px;
width: 900px;
margin: auto;
height: 30px;
background: #aaaaaa;
/* vertical-align: bottom; -- not relevant */
}
#mainc {
position: relative;
top: -30px;
width: 900px;
background:#fff;
margin: auto;
}

<div id="header">
</div>
<div id="menu">
Menu
</div>
<div id="mainc">
Main
</div>

AndrewGSW
05-01-2011, 03:16 PM
What I would do is position the menu using margin-top, or put position:relative on #header and position:absolute;top:80px; on the #menu. You might need to play with the positioning a bit.
I did try this (and other varieties..) but when the vertical alignment is achieved it then throws out the horizontal centre-ing. Andy.

Wojjie
05-01-2011, 03:28 PM
Can create a container div to help align it:




body{
background: #f1f1f1;
margin: auto;
}
#header {
position:relative;
width: 100%;
background: #000;
height: 100px;
}
#menuc {
position: absolute;
top: 70px;
height: 30px;
width: 100%;
}
#menu {
width: 900px;
margin: auto;
height: 30px;
background: #aaaaaa;
}
#mainc {
position: relative;
width: 900px;
background:#fff;
margin: auto;
}




<div id="header">
<div id="menuc">
<div id="menu">
Menu
</div>
</div>
</div>
<div id="mainc">
Main
</div>

AndrewGSW
05-01-2011, 04:47 PM
Thank you :thumbsup: (an alternative solution :))

Seems a shame to add an extra element, but it is very difficult to achieve the desired effect without doing this (or by moving the menu outside of the header). Andy.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum