CSS Liquid Layout

Hey there everyone,

I’m a new user who has been trying very hard lately to make that jump from traditional table based layouts to floating div tableless designs. To cut a long story short I have to build a business site for a software company and although I have been dabbling with designs for friends and acquaintances for years, this is the first real business site I have done so anyway…

The page that you see on the link above is how I wish to lay out the page, I want to lay out the homepage - logo, nav, content and footer but to size them all (height and width) in percentages of the page. As soon as I validated the page for xhtml, every div that I had sized in percentages disappeared and refused to display until I changed those div heights back to pixels although it did not seem to mind the widths!

I have read all sorts of strange things about these divs having to be the child of an entity which is sized in percentage (hence the body:height 100% part as I presumed they were all children of the body) but this doesnt work. I also don’t want to have to use javascript(getelementbyid) to find out whose offspring they are and then use some really complicated vector sizing algorithm LOL

Can anyone help me before I get fired ;p LOL ?

You have set your image widths are a percentage. So when I drag the right hand edge of the browser back and forth the image distorts and looks really bad.

Secondly, your original image measures 450x671px, but you start by squashing it down to 200px high by 15% wide. You are still forcing the user to download the original 450x671px image.

So forget this liquid image idea, or at least only set the width, and let the browser mess up the image less dramatically.

Kevinius, you can move from tables to tableless structure without worrying about anything in your list except browser compatibility and semantics. The rest can come later, if at all (professional designers need to understand and employ those techniques, but the OP’s didn’t say anything about doing this for a living). This is like arguing that pilots who learned to fly biplanes should move very slowly and cautiously to flying single-wings, because it’s different. We all have to move to tableless design if we haven’t already, and there’s no reason to take it slowly. Of course he should take the time to learn it properly, but there’s no reason not to take the plunge.

Yes, new (and veteran) designers often misuse, and overuse, floats. Doesn’t mean they don’t need to learn how to use them properly, and the only way to learn them is to read about them, try them, see what havoc they can wreak, and learn from the mistakes how to use them properly.

Black Max:

It’s hard to get from tables to css because it broadens the whole webevelopment ‘topic’. Now you have to worry about browser compatibility, css2/3, semantics, faux columns, sliding doors, etc. etc…

About the floats: Beginners (coming from tables) are using floats on every div, they just don’t get the whole picture of tableless design. If you tell them that they must use floats as little as possible they will look for other ways to position elements.

Um, Kevinius, if I’m reading your post right, that’s not correct at all. It’s not hard, or it shouldn’t be, to get from tables to divs, except in perhaps the way you think about constructing a site. There’s nothing at all difficult about constructing the page he’s linked to. You’re right that it isn’t particularly easy to design a page that has any real content that will fit most monitor displays without scrollbars – I’ve never even considered making such a site – but it’s not that difficult. And why use floats “as little as possible?” Like any other core CSS layout element, floats should only be used when necessary, but they are an essential tool in any layout.

You should try to avoid horizontal scrolling wherever possible, but vertical scrolling is not such a bad thing. People are used to it, and as long as there is enough good information scent “above the fold”, they will scroll down and read the rest without even noticing that they are scrolling.

In terms of computing the height needed, bear in mind that people will have different setups and font sizes, so the height needed for one element will vary from one person’s computer to another.

If I want a homepage with no scroll bars, what is the smallest screen resolution to design for to keep this page from having scroll bars on the majority of monitors?

Your site should cater for uses down to 800×600 (bear in mind that the browser viewport will be less than that, particularly vertically, once you have taken off space for the menu bars, task bar and other OS and browser chrome). The problem there is that if your homepage fits onto an 800×600 screen without scrolling, that will severely restrict how much content you can include, and it will start to look lost on larger screens.

I would aim for your site to fit on a single screen at 1024×768, but make sure that it it only scrolls vertically on 800×600.


Some thinks:

  • it’s very hard to get from tables to divs.

  • maybe you shouldn’t design ‘hard’ layouts just yet

  • what you are trying to do is something that only 1% of the sites out there are trying to do. This isn’t a standard design.

  • practice with div’s and use floats as little as possible

  • rebase websites you like, learn from them

Hi silversurfer5150, welcome to SitePoint! :slight_smile:

To be honest, I’m not really sure what your question is. Normally it’s best not to set heights on divs. As long as you have content in the divs, they will set their own height based on that content. Could you explain what the problem is in more detail?

Nah, you’ll be going around in circles if you approach it that way. Here is a nice tutorial that explains how to do what you want to do in terms of full height:

Worth reading through.

Hey yes I can see why this may be a confusing question. Basically I wanted my home page to fill the page height and width on any screen size with no scroll bars. I gather from what you and others are telling me that it is my content which controls the height of a div and that I must design according to the height in pixels of what I put into the divs which leads me to the next question.

If I want a homepage with no scroll bars, what is the smallest screen resolution to design for to keep this page from having scroll bars on the majority of monitors?