3 replies [Last post]
mattgloss
Offline
newbie
Glasgow Scotand
Last seen: 18 years 12 weeks ago
Glasgow Scotand
Joined: 2004-04-14
Posts: 9
Points: 0

Hi I'm new to this forum n a designer.

I'm trying to get 2 flexible columns in between to absolute columns (that will run down the left and right) like this:

| absolute | flexible | flexible | absolute |

I tried to place 2 layers<div> inside another like this but i cant get the 2nd column to appear parallel to the first? any ideas?

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>css table</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
<!--
#centerleftcolumn {
	background:#fff;
	margin-top: 4px;
  	margin-left: 188px;
   	margin-right:184px;
	border:1px solid #000;
}

#centerleftcolumn001 {
	background:#A5CBBA;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 10px;
	font-weight: normal;
	width:50%;
	padding: 3px;
	border-top: 1px solid #82B7A3;
	border-bottom: 1px solid #82B7A3;
}

#centerleftcolumn002 {
	background:#A5C55A;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 10px;
	font-weight: normal;
	width:50%;
	padding: 3px;
	border-top: 1px solid #82B553;
	border-bottom: 1px solid #82B553;
}
-->
</style>
</head>

<body>
<div id="centerleftcolumn">
  <div id="centerleftcolumn001">column001
  </div>
   <div id="centerleftcolumn002">column002
  </div>
</div>

</body>
</html>

ClevaTreva
ClevaTreva's picture
Offline
Guru
A hilly place, UK
Last seen: 3 years 35 weeks ago
A hilly place, UK
Joined: 2004-02-05
Posts: 2902
Points: 0

flexable table help

Hi

I don't know if two flexible width columns are possible, but who knows?

www.pmob.co.uk has a working four column design.

But thinking about it, imagine you had two columns side by side, both with % widths (make sure these don't total over 98%, IE may have probs).

Inside the left column put another div, floated left and with the fixed width.

Inside the right column put another div, floated rigth and with fixed width.

Would that work?

Trevor

mattgloss
Offline
newbie
Glasgow Scotand
Last seen: 18 years 12 weeks ago
Glasgow Scotand
Joined: 2004-04-14
Posts: 9
Points: 0

flexable table help

I think my only option is for them all to be flexable. Cheers for the reply.

MattyUK
Offline
Regular
Last seen: 18 years 11 weeks ago
Joined: 2004-04-22
Posts: 36
Points: 0

flexable table help

Quote:
I tried to place 2 layers<div> inside another like this but i cant get the 2nd column to appear parallel to the first? any ideas?

Have you tried playing with the display property?

display: inline; /*means it doesn't get a break and new line.*/
display: block; /*means that it gets a new line to itself.*/

Not sure but I think divs have default of block and that could be why you get them on a new line.

At very least it gives you something to play with. You may also want to play with the vertical-align property once you have inline rendering to remove any confusing vertical indents. Had I more time I would code an example but as it is am struggling with my own layout problem. Hope this helps however.

Carrots encourage. Sticks enforce. Which is needed here?