Trouble with liquid layout...

Question

Hi,
I am trying to layout a site with CSS in a liquid style. This
is the first time im using a liquid layout and find it pretty
confusing.... The site is
here. The problem im currently
having is the block of text and image in the main content area (in
white with the guy with the megaphone) looks different in Internet
Explorer and Firefox and i cant work out why this is. Firefox
places it higher up the page and explorer places it lower down the
page....
How can i get them to be the same distance from the top? Any
ideas?
Thanks....

Answer 1

Hello
You should validated your code. I think one of your problems
is that you might have a missing </div> tag. There are one or
two other easily repaired problems highlighted in the validator. I
think the bottom of your page needs to look like this:
<div id="footer">
<ul>
<li><a href="#">home</a></li>
<li><a href="#">about us</a></li>
<li><a href="#">lessons</a></li>
<li><a href="#">contact</a></li>
<li><a href="#">resources</a></li>
</ul>
</div>
</div>
</body>
</html>
If you want your page centered, you're missing margin: 0
auto; in your CSS for #wrapper; like so:
#wrapper {
background-color:#FFFFFF;
max-width:1000px;
min-width:810px;
padding:10px;
text-align:left;
width:90%;
margin: 0 auto;
You need to think whether using relative positioning is a
good idea if you don't need it. If you need to fiddle about with
placement of elements in your page I'd suggest researcing the float
property and the Box Model. There's plenty out there to read.
I add the caveat that I am clinging by my fingernails to the
level slightly above "Novice." I don't use relative positioning for
example, because I don't understand it!
Kind regards
Martin