Ripping apart a site to see how it works - CLOSE POST

[Revolution]

This is just a learning site… not a client… or even a prospective client.

I’ve come across a design that I need a little help understanding.

I like the layout… but I cannot fully - figure out how to reproduce a similar design.

I’ve tried using floating div’s and the webflow row element… to no avail.

In the site below

• there seems to be two (top / bottom) divs…

Div 1 that contains the company name and the top options.

Div 2 contains the “we are your local…” and the photo.

Div 2 appears to have a child div:position:absolute within it.

This makes the photo stick to the bottom.

I can replicate all of this… BUT

when you resize the width of the window…

• the “We are your local…” text stays BELOW the 1st div.

I cannot get this work. When I resize the window… the text moves up and covers the 1st section.

This doesn’t happen with the original site.

[Revolution]

no one knows how this is done ?

[Mogeek (Brandon Vaughn)]

Hi Revolution,

Create a wrapper div with position relative, then inside of that break it up into three sections - add a background to your wrapper div if needed/wanted.

1. Header/Nav Div (set at display block)…
2. Hero Statement Div (set as display block). (set the z-index higher for this to avoid overlap)…
3. Absolutely position your third “floating” image with a percentage from the bottom/right of the main wrapper…

[Revolution]

That’s kinda what I was doing.

I had to go back simplify it a little.

I think I was making it more complex than it should’ve been.

Working almost perfect now. Slight glitch… but I think it more related to the breakpoint.

Thanks