Help wanted with CSS layout

F

Fred Emmott

-----BEGIN PGP SIGNED MESSAGE-----
Hash: SHA1

Hi - no idea why this isn't working (at least in konqueror) - the "Left"
"Centre" and "Right" divs should be in a row. Any ideas?

Thanks.

<html>
<head>
<title>CSS test</title>
<style type="text/css">
<!--
#leftcontent {
position: absolute;
left: 10px;
top: 50px;
width: 200px;
border: 1px solid black;
}
#centrecontent {
background: white;
margin-left: 201px;
margin-right: 201px;
border: 1px solid black;
}
#rightcontent {
position: absolute;
right: 10px;
top: 50px;
width: 200px;
background: white;
border: 1px solid black;
}
#banner h1 {
font-size: 14px;
padding: 10px 10px 0px 10px;
margin: 0px
}
- -->
</style>
</head>
<body>
<div id="banner"><h1>test</h1></div>
<div id="leftcontent">
Left
</div>
<div id="centrecontent">
Centre
</div>
<div id="rightcontent">
Right
</div>
</body>
</html>
- --
Fred Emmott
-----BEGIN PGP SIGNATURE-----
Version: GnuPG v1.2.3 (GNU/Linux)

iD8DBQFApKfqima0zti2BQgRAl74AJ9zY1PMm4dC3x7dZWPVKvPhfwXzvgCeKUK7
xvDyWA4kuWotDMox7+YygaE=
=ZpcK
-----END PGP SIGNATURE-----
 
M

Mitja

Fred Emmott said:
-----BEGIN PGP SIGNED MESSAGE-----
Hash: SHA1

Hi - no idea why this isn't working (at least in konqueror) - the
"Left" "Centre" and "Right" divs should be in a row. Any ideas?

Um. Left and right DIVs have margin-top:50px, the central one doesn't?

Position them all absolutely (worse, banner height is flexible) or using
floats (better).
 
M

Matthias Gutfeldt

Fred said:
-----BEGIN PGP SIGNED MESSAGE-----
Hash: SHA1

Hi - no idea why this isn't working (at least in konqueror) - the "Left"
"Centre" and "Right" divs should be in a row. Any ideas?

What exactly isn't working in Konqueror, do you have a screenshot, and
what's the URL so we can look at the original code?

The "right" property doesn't work in a number of browsers, perhaps
Konqueror suffers from that too.

And the code isn't valid, you forgot the Doctype. There's also a rogue -
near the end of the stylesheet.

BTW, getting three DIV in a row is more easily done with float. See
<http://www.w3.org/TR/CSS2/visuren.html#propdef-float>

Matthias
 
S

Steve Pugh

Fred Emmott said:
Hi - no idea why this isn't working (at least in konqueror) - the "Left"
"Centre" and "Right" divs should be in a row. Any ideas?

They are in a row, but left and right are somewhat lower. left and
right will be 50px down from the top of the page. center will be
immediately beneath banner. You've given banner margins of 0, top and
bottom padding of 10px and a font size 14px.

So center will start at
page margin/padding + 10px + line height of banner + 10px from the top
of the page. On many browsers this is going to be around 35px total.

Have you considered using floats rather than absolute positioing?
They're often more flexible.

If you really want to use absolute positioining then something like
this would work better:

<style type="text/css">
#threecols {position: relative;}
#leftcontent {
position: absolute;
left: 10px;
top: 0;
width: 200px;
border: 1px solid black;
}
#centrecontent {
margin-left: 210px;
margin-right: 210px;
border: 1px solid black;
}
#rightcontent {
position: absolute;
right: 10px;
top: 0;
width: 200px;
border: 1px solid black;
}
#banner h1 {
padding: 10px 10px 0 10px;
margin: 0;
}
</style>

<div id="banner"><h1>test</h1></div>
<div id="threecols">
<div id="leftcontent">Left</div>
<div id="centrecontent">Centre</div>
<div id="rightcontent">Right</div>
</div>

cheers,
Steve
 
S

Steve Pugh

Steve Pugh said:
You've given banner margins of 0, top and
bottom padding of 10px and a font size 14px.

Whoops, bottom margin is 0 not 10px. But that's a mere detail, the
core of my explanation remains the same.

Steve
 
W

Whitecrest

Hi - no idea why this isn't working (at least in konqueror)

Well to paraphrase Toby... don't use Konquer. That seems to be his
answer every time someone brings up an issue with IE....
 
F

Fred Emmott

-----BEGIN PGP SIGNED MESSAGE-----
Hash: SHA1

Whitecrest shared these words of wisdom:
Well to paraphrase Toby... don't use Konquer. That seems to be his
answer every time someone brings up an issue with IE....

I don't want my site to discriminate against any browser - anyway i can't
see any (important) difference between the site i referenced in one of my
other posts, and that renders fine...

anyway the konqueror in KDE 3.2 is much improved over earlier versions (the
enhancements apple made for safari made there way back into konqueror).

- --
Fred Emmott
-----BEGIN PGP SIGNATURE-----
Version: GnuPG v1.2.3 (GNU/Linux)

iD8DBQFApNcxima0zti2BQgRAvC2AKCC5SxUPouRYqxjzPeTytaMxW7R9wCfUbGG
7/IDQqQ178QnLVaEcgIIJxw=
=UeTK
-----END PGP SIGNATURE-----
 
S

Stephen T. Fox

Checking your reference http://glish.com/css/7.asp I found that they used
html>body #banner {
height:39px;
}

Added to the padding-top of 10 px you would have 49px which would line up
the three DIVs. It would be easier than making the #centrecontent absolute
positioned, although that does work.

Stephen
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Members online

No members online now.

Forum statistics

Threads
473,744
Messages
2,569,484
Members
44,903
Latest member
orderPeak8CBDGummies

Latest Threads

Top