hay,

 

I'm having problems trying to position some elements on this page:

 

My link

 

I cant get the Book Online and Latest News to move up into the right hand column beside 'Welcome'. I know this is seriously basic but I've always found positioning stuff a bit difficult. I'm working on third party code too so getting my head around styles etc.

 

This is the CSS for the main content area:

 

#welcome  {
width: 510px;
height: 200px;
background-color: #D8E5F3;
padding-top: 0px;
padding-left: 0px;
overflow: hidden;
}

#welcome h1  {
font-family: Georgia, "Times New Roman", Times, serif;
color: #00638F;	
font-size: 50px;
font-weight: normal;
padding-left: 15px;
}

#welcome p  {
font-family: Arial, sans-serif;
color: #00638F;	
font-weight: normal;
padding-left: 15px;
padding-right: 25px;
line-height: 11pt;

}

#quicklinks  {
width: 506px;
margin: 0px 0px 10px 0px;
}

#quicklinksleft  {
width: 251px;
}

#quicklinksleft  {
width: 251px;
float: left;
vertical-align: top;
}

.link  {
color: #ffffff;
font-size: 16px;
text-transform: uppercase;
text-decoration: none;
border-bottom: 1px dotted #fff;
padding: 15px 15px;
margin-top: 0px;
display: block;
background-color: #00638f;		
}

.link a:hover  {
background-color: #9FBFD6;	
}

/* for image rollover*/

		.boxgrid{ 
			width: 251px; 
			height: 143px; 
			margin:0px; 
			float:left; 
			background:#D8E5F3; 
			overflow: hidden; 
			position: relative; 
		}
			.boxgrid img{ 
				position: absolute; 
				top: 0; 
				left: 0; 
				border: 0; 
			}
		.boxgrid p {
			color:#FFFFFF;
			font:9pt "Lucida Grande",Arial,sans-serif;
			margin:5px 0;
			padding:3px 10px 10px;
		}

		.boxgrid p a {
			color:#00638F;
		}

		.boxcaption{ 
			float: left; 
			position: absolute; 
			background: #BFBE00; 
			height: 45px; 
			width: 100%; 
			opacity: .9; 
			/* For IE 5-7 */
			filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=80);
			/* For IE 8 */
			-MS-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=80)";
			}

	.captionfull .boxcaption {
			left:0;
			top:143px;
		}
				.caption .boxcaption {
					top: 220;
					left: 0;
			}
/* end image rollover*/

#network  {
width: 253px;
height: 34px;
}

.underline  {
border-bottom: 2px dotted #ffffff;
}

#Home2Col {
padding-top: 0px;
position: relative;
width: 506px;
overflow: hidden;
}

#Col1 {
width: 253px;
float: left;
position: relative;
clear: right;
}
#Col1Content {
padding-right: 10px;
margin-top: 10px;
background: url(../imagesnew/verticaldots.gif) repeat-y right;
}
#Col2 {
width: 253px;
float: left;
position: relative;
clear: right;
height: 100%;
}
#Col2Content {
padding-right: 10px;
margin-top: 10px;
background: url(../imagesnew/verticaldots.gif) repeat-y right;
}

#Col3 {
width: 253px;
position: relative;
height: 100%;
}
#Col3Content {
padding-right: 10px;
margin-top: 10px;
}
.ColHeader {

height: 25px;
color: #00638f;
padding-left: 10px;
border-right: 1px solid #fff;
background-color: #fff;
font-weight: bold;
font-style: normal;
text-align: left;
vertical-align: middle;
padding-top: 7px;
font-size: 16px;
}
.ColContent {
padding-top: 5px;
padding-right: 5px;
padding-bottom: 5px;
padding-left: 10px;
font-size: 8pt;
line-height: 14pt;
color:#353535;
}
.ColContent p {
margin-top: 0px;
}
.ColContent img {
margin-right: 7px;
margin-bottom: 5px;
}

 

Any help much appreciated

Hi,

 

How come the columns have position: relative; set when nothing is being absolutely positioned within them?

 

Anyway, amend the code to this:

 

#Col3 {
       width: 253px;
       float: right;
}

Hi,

 

How come the columns have position: relative; set when nothing is being absolutely positioned within them?

 

Anyway, amend the code to this:

 

#Col3 {
       width: 253px;
       float: right;
}

 

 

Hi Gareth,

 

not sure why position: relative; was used, I'm working on third party code, doing a refresh on the site, must have been relevant for the last design. Its in the right column now but there seems to be something blocking it from moving up under 'IT COURSES', I'll have to check the other divs.

 

cheers

It will be the clears on the DIV's and possibly the widths and padding. I would start from scratch to be honest, it's not that big a website and you have all the assets already complete. Should only take you a couple of hours then you'll have it the way you want it.

 

Oh ya, forgot to mention. You're Col3 DIV needs to be directly after your welcome DIV in your XHTML code. At the moment it isn't.

Oh ya, forgot to mention. You're Col3 DIV needs to be directly after your welcome DIV in your XHTML code. At the moment it isn't.

 

Brill, thanks for that Gareth. Yeah, it would have been ideal to start it from scratch but there loads of Php and MySql in with the HTML code and I havent a clue of either language (only started web design maybe a year ago and I'm working for a company as opposed to freelancing) so I'm afraid to take it out because I wont get it back in right, and theres a custom CMS working on the pages too, so I think I might try work with what's there maybe.

 

Think I will take the advice you gave here too: My link

 

cheers for the help

Not a problem. Glad to help.