Tables to Divs

[objecterror]

I've had help with this before, now, it's getting a slight annoyance.

The project: Turning my entire 'table' laden layout into 'divs' which will make positioning and catoring to information easier. It will also clean up some of my code and make things look better.

The problem: Untitled Document this one div I have around my little nav bar(information due to change) is, obviously malfunctioning. I'm doing some thing wrong, but, I have to keep as much of the code in tact as a reference until I can finish 'fixing' the rest of the tables.

anyone want to look and help me out?

 

[CrazeD]

I don't see anything blatantly wrong in Firefox. However, in IE and Opera I see that there are missing images, is this your problem?

 

[objecterror]

Okay, I know the images aern't there now, I will upload them so you can take a look at the idea i've put together. I have the "navigation" links to the left along with the services the firm will offer, I just need to position a div in the space to the far right to display the information once the customer clicks. There will be a quick 'overview' of services offered though which will be there initially.

 

[CrazeD]

Like this?

 

[objecterror]

Exactly like that, but, how can I make the container fit the information that will be displayed in that div ?

 

[CrazeD]

Well to start with, there are lots of problems with your code. For one, that div is too wide to fit in that spot. You'll either have to make the div smaller or make the space it's going into wider.

Don't use absolute position on a liquid layout, that doesn't work. Also, don't use percentages for static width.

To get the div where it should be, use floats.

.oneColLiqCtrHdr #right {
	  height:inherit;
	  width:480px;
	  border:1px solid #000;
	  float:right;
	  padding: 0 4px 4px 4px;
	  margin: 0 0 10px 0px;
	  background-color: #fff;
}

Try that. Most likely you'll have to float the other div to the left.

 

[objecterror]

I was about to ask how did you know I was using liquid, until I saw the code.
I made the space of the maincontainer wider, about 800px, I floated the content div to the left. Is this the div you were talking about?
Heres the updated code:

<style type="text/css">
body {
	font: 100% Verdana, Arial, Helvetica, sans-serif;
	background: #84A4C1;
	margin: 0;
	margin-top: 2px;
	padding: 0;
	text-align: center;
	color: #000000;
}
.footer {
    FONT-SIZE:10px; 
	PADDING-TOP: 5px;  
	FONT-WEIGHT: 500; 
	COLOR: #ffffff; 	
}
H2 {
	FONT-WEIGHT: 500; 
	FONT-SIZE: 16px; 
	COLOR: #000000; 
	FONT-FAMILY: Tahoma, Arial, Verdana;
	margin-top: 0px;
	margin-bottom: 2px;
    margin-left: 0px; 
}
.h3 {
	FONT-WEIGHT: bold; 
	FONT-SIZE: 12px; 
	COLOR: #669900; 
	FONT-FAMILY: Arial, Tahoma, Verdana;
	margin-bottom: 3px;
	margin-top: 0px; 
}
#navi A, #navi A:link, #navi A:visited { 
	display:block; 
	font-family: verdana,tahoma,arial; 
	font-size: 11px; 
	text-align: left;  
}
.menu {
	margin: 0px; 
	padding: 0px; 
	color: #000; 
	width: 200px; 
	list-style: none;
	display: block;
}
.menu li {
	PADDING-top: 8px;	
	PADDING-bottom: 8px;
	PADDING-left: 15px;    
	background-COLOR: #75ace5;
	border-bottom: 1px solid #ABBE93; 	
}
.menu li a, .menu li a:visited {
	color: #fff; 
	display: block; 
	border: none; 
	background: #75ace5; 
	text-decoration: none;
}
.menu li a:hover {
	display:block;
	color:#000000;
	background-COLOR: #75ace5;		
}
TD {
    FONT-SIZE: 11px; 
	COLOR: #000000; 
	FONT-FAMILY:  Tahoma, Arial, Verdana,;
	}
.oneColLiqCtrHdr #container {
	width: 800px;
	height: 800px;
	background: #FFFFFF;
	margin: 0 auto; 
	border: 1px solid #000000;
	text-align: left; 
}
.oneColLiqCtrHdr #mainContent {
	float:left;
	padding: 0 20px;
	margin: 0 20px;
	background: #FFFFFF;
}
.oneColLiqCtrHdr #right {
	  height:inherit;
	  width:480px;
	  border:1px solid #000;
	  float:right;
	  padding: 0 4px 4px 4px;
	  margin: 0 0 10px 0px;
	  background-color: #fff;
}
.oneColLiqCtrHdr #footer { 
	padding: 0 10px;
	background:#DDDDDD;
} 
.oneColLiqCtrHdr #footer p {
	margin: 0;
	padding: 10px 0;
}
</style>

 

[CrazeD]

Can you reupload it so I can see the changes?

 

[objecterror]

Done: Untitled Document

 

[CrazeD]

Hmm, so I'm still confused on what you want the outcome to be.

Do you want the #right div to be to the right of everything, or in that little corner that it's in now, only positioned a little better?

Can you give me a Photoshop illustration of what you want it to look like?