How is the page layout coded please? Absolute Positioning?

HTML & CSS
1

Hello,

I came across this website and I have don’t all the dissecting and probing to see how this layout was coded. My very first impression was “Absolute Positioning”, I wonder if anyone can have a look share their thoughts. The part of the page that I am curious about are the:

  1. Logo Div
  2. Content Div

Here is the live link to the site: http://theblue.hyatt.com/en/hotel/home.html

Thank you for all your help.

2

You can look under the hood with the browser’s developer tools to see what’s going on. It’s a great way to learn.

  1. Logo Div

Yes, that’s position: absolute;, but inside an empty div that is centered, set to position: relative and has a width of 980px.

  1. Content Div

That’s pretty much a standard, centered content div with a set width.

3

… and dragged on top of the slideshow with a negative top margin.



#mainContent {
    background: #FFFFFF;
    margin-top: -78px;
    position: relative;
    width: 842px;
}