PDA

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.