Making layout more fluid

I’m busy building my first real website. Now to begin with I’ve opted for a 960px width of my maincolumn. When I view the website on different screens and on different browsers it seems that there are huge differences. Sometimes there is a vertical scrollbar appearing, font-sizes that are different etc etc. Now I’ve read something about making a layout more fluid. I have my static layout so is it possible to make this more fluid? Can I post some code here to get some pointers? I’ve probably commited some terrible webdesign no no’s so some code reviewing would be nice so I can learn something. :slight_smile:

Thanks for the tip! Appreciate it!

I tried that but here is the real problem. Everything is fine in FF, it’s in IE that everything becomes too large. This has nothing to do with screen size I suppose but with browser size. Am I on to something here?

Absolutely, go for it. Ideally, post the whole page’s html with the CSS embedded in the head so that we can just paste the entire code into a .html file and quickly test it out. :slight_smile:

Okay, just quickly skimming over your website with firebug I noticed what you could do to avoid the scroll bar is set your content div height to 100% ( I actually think its set right now to 1% or thats what its showing) to expand to all elements inside. Fonts are simply only different on different brow

Fluid layout just contracts and expands according to contents …so measurement should be %.

No, I got this reset from Eric Meyer. I understand it is widely used?

I.m.o. the Eric Meyer reset goes way to far. You just need to reset margins and padding for certain elements:

html,body,address,blockquote,div,form,fieldset,caption,h1,h2,h3,h4,h5,h6,hr,ul,li,ol,ul,table,tr,td,th,p,img {
	margin:0; padding:0;
}

You furthermore can do some resets for list items and images:


ul, ol, li {
	list-style-type: none;	
}

img,fieldset {
	border:none;
}

Off topic: You are using a lot of resets in your page! is this a template?

For a fluid layout you should use em’s. The size of em depends on font face and font size. So you should set the font em in your html, body reset and use em accordingly in the rest of your layout

I think that some of the problems also occur with my use of images. Yes, I also used a imagemap as navigation because the menu was a little bit over my current css skills. :nono: Because of that I will post the link to the webpage. Hope you guys can give me some good pointers. Especially on the use of font sizes, padding and margin. (And I also think on images)

http://www.rockarena.be