What's the Difference Between a Fixed and Fluid Layout?

With the Headway Theme, you have the option of making your header and/or footer fixed, or fluid.

A true fluid layout uses the full width and height of the browser. It’s very difficult to do well – it’s something like the Holy Grail of web design. Considering how flexible the Visual Editor is – and how many different possible configurations that users may try – it’s not possible with the Headway Visual Editor (I haven’t tried this using Custom CSS) to achieve a truly fluid layout.

That said, you can achieve some of the same aesthetic that you get from a fluid layout with the Headway visual editor.  See this site? An example of a fluid header in action – the header area of the site is fluid and will always take up 100% of the width of the screen. I don’t utilize a footer on this site right now, but I would probably make that fluid, too, and it would also take up 100% of the browser width.

To Set a Fluid Header or Footer

  1. Go to the Visual Editor
  2. Click Site Configuration
  3. Click Header (or Footer)
  4. Click Header Options (or Footer Options)
  5. Toggle the radio option to Fluid Header (or Fluid Footer)
  6. Click on Design Editor
  7. Choose, from the drop down, the Header Container (or Footer Container) and style as needed. If creating a fluid header, you also need to style the Navigation container. Note that the Header and Footer elements from that drop down may also need styling, as they are elements nested within the “containers”.

See the video to the right for a demonstration!

Spread the word!

6 Responses

  1. I’d like to try to put my “tagline” to the right of my header image (am using a fluid header space). How hard would that be to do?

    Would I have to:

    –use CSS to make the header space smaller, clearing space on the right for the tag?

    or

    –have one image created that includes the tag?

    I’d rather have the tag be separate since it would nice for it to be clickable somehow.

    Thanks!

    • @Lisa E, You need to use CSS to make the header area narrower and the same for the tagline area – then use CSS to position. something like div#header {width: 45%; float:left;} and h1#tagline {width: 45%; float right;}

      Might need some tweaking but that should get you started I think.

  2. Are there advantages of having fluid over fixed? Is it mostly asthetic? Can you do a post on adding things to the header like your form or a search box? Thank you!

Leave a reply

Copyright © 2016 Vesped Inc. All Rights Reserved. Proudly Powered by Headway and WordPress