3 replies [Last post]
spillage
Offline
newbie
Last seen: 14 years 25 weeks ago
Joined: 2008-05-31
Posts: 2
Points: 0

Hi

Forgive me if this is a common question but have been googling with no joy.
I have only been learing html and css for a week but am stuck.
Trying to create a page with a horizontal header and three vertical columns
using div. How do I get the central column to centralize when the page size is reduced.

<?xml version="1.0" encoding="iso-8859-1"?>

Untitled Document

body {
margin:10px 10px 0px 10px;
padding: 0px;
background:#0080FF;
}
#leftcontent {
position:absolute;
left:10px;
top:50px;
width:200px;
background:#0000FF;
border-right:1px solid #000;
border-top:1px solid #000;

height:100%;

}
#centercontent {
position:absolute;
left:390px;
top:70px;
width:400px;
background:#fff;
margin-left:180px;
margin-right:180px;
border:1px solid #000;
voice-family:"\"}\"";
voice-family:inherit;
margin-left:201px;
margin-right:201px;
height:100%;
}
html>body #centercontent {
margin-left:201px;
margin-right:201px;

}
#rightcontent {
position:absolute;
right:10px;
top:50px;
width:200px;
background:#0000FF;
border-left:1px solid #000;
border-top:1px solid #000;
height:100%;

}
#banner {
background:#C0C0C0;
height:100px;
border-top: 2px solid #8000FF;
border-bottom: 2px solid #8000FF
voice-family:"\"}\"";
voice-family:inherit;
height:60px;
width: 800px;
position: absolute;
top: 10px;
left: 400px;

}
html>body #banner {
height:39px;
}
p,h1,pre {
margin:0px 10px 10px 10px;

}
p{
text-align:center;
}
h1 {
font-size:14px;
padding-top:10px;
text-align:center;
}
#banner h1 {
font-size:14px;
padding:10px 10px 0px 10px;
margin:0px;
}
#rightcontent p,h1{
font-size:14px;
color:#FFFFFF;
}
#leftcontent p,h1{
font-size:14px;
color:#FFFFFF;
}
a {
text-decoration:none;
font-weight:bold;
color:#FFFFFF
}
a:link{
color:#FFFF00;
}
a:hover{
text-decoration:underline;
}
#thebike {
position:absolute;
top: 13px;
left:215px;
}
#bike {
position:absolute;
top:180px;
left:250px;
border-width: 0px 0px 1px 1px;
border-left:#FF0000;
border-bottom:#FF0000;
}

bike

my left content. #leftcontent { position:absoulte; left:10px; top:50px; width:200px; background:#fff; border:1px solid #000; }

This is some standard text

Center content #centercontent { background:#fff; margin-left:199px; margin-right:199px; border:1px; voice-family:"\"}\""; voice-family:inherit; margin-left:201px; margin-right:201px; } html>body #centercontent { margin-left:201px; margin-right:201px; }

This is some standard text in the center.

bike

Right Content. #rightcontent { position:absolute; right:10px; top:50px; width:200px; background:#fff; border:1px solid #000; }

This is some standard text in the right.

Many thanks,

Spill.

thepineapplehead
thepineapplehead's picture
Offline
Moderator
Last seen: 31 weeks 21 hours ago
Timezone: GMT+1
Joined: 2004-06-30
Posts: 9683
Points: 819

Get rid of the XML prolog

Get rid of the XML prolog straight away, it throws IE into Quirks Mode, which won't help matters.

Then, why are you using Absolute Positioning to place the columns? You're going to have a lot of problems achieveing what you want doing it the AP way.

Verschwindende wrote:
  • CSS doesn't make pies

spillage
Offline
newbie
Last seen: 14 years 25 weeks ago
Joined: 2008-05-31
Posts: 2
Points: 0

Thanks for the advice. What

Thanks for the advice. What would you suggest using instead of ap. The main bulk of the code came from www.glist.com and I have just played around with it a bit. The prolog has been inserted automatically by my html creater and I didnt realise this would cause problems so I will put a stop to that. Only started html and css last week so its all very new.

Thanks,

Spill.

Tyssen
Tyssen's picture
Offline
Moderator
Brisbane
Last seen: 8 years 6 weeks ago
Brisbane
Timezone: GMT+10
Joined: 2004-05-01
Posts: 8201
Points: 1386

Yeah, I'd ditch what you've

Yeah, I'd ditch what you've got so far; a lot of outdated hacks in it. A good place to start for 3-col layouts: http://css-discuss.incutio.com/?page=ThreeColumnLayouts

How to get help
Post a link. If you can't post a link, jsFiddle it.
My blog | My older articles | CSS Reference