aligning images in a div 1

[Dweezel]

I'm sure this is quite simple, but I've been messing with this for about an hour and can't seem to get it to work.

I've got an outer div which is centered using margin-right:auto and margin-left:auto.

I've got a div within that which will be the header of the page which is set to 720px wide and 74px high. Within the header I want a logo image to align left and a navbar (which consists of 7 images next to each other) aligning to the bottom right of the header div.

The way that I've designed the buttons means that they have to butt right up to the right edge and bottom edge of the div.

I've tried floating the logo to the left, and putting the nav images in a div and floating those to the right, but it's getting the nav bar to sit perfectly on the bottom of the div which is the bigest problem.

Any suggestions appreciated.

 

[cLFlaVA]

Well, if your nav bar images are a certain height, and your header div is a certain height, subtract the height of the nav bar from the height of the header div. Then, give that value to the margin-top style of the nav bar.

In other words, add a line of style:

#myNavBar {
    height: 20px;
    margin-top: 54px;
}

Notice that [tt]54 + 20 = 74[/tt].

*cLFlaVA
----------------------------
[tt]tastes great, less filling.[/tt]

 

[cLFlaVA]

[ and don't forget the complete doctype ]​

*cLFlaVA
----------------------------
[tt]tastes great, less filling.[/tt]

 

[Dweezel]

I knew the solution would be simple

Thanks a lot ClFlava.

 

[cLFlaVA]

n-problemo.

*cLFlaVA
----------------------------
[tt]tastes great, less filling.[/tt]