hi,

i have just confronted with this situation while making a liquid layout.
the problem is

there are two columns( div ) in a div of 100% width( 100% == width of viewport)

left column has fixed width of 350px .
and right column should cover all remaining width of the viewport.

i was able to do it with tables as on http://nicequotes.net

but i was not able to find any method to do it without tables.

do anyone know a div based method for this?

please let me know

-sam

Are you kidding me ? You couldn't have searched very far, there are many methods for creating liquid layouts without tables !

http://www.positioniseverything.net/..._2_9_home.html
http://www.positioniseverything.net/articles/jello.html
http://css-discuss.incutio.com/?page=CssLayouts
..and that's just a tiny fraction.

hi,

i was reading the articles at the links given by you,

what i found is

1. they make widths of all major colums in percentage
2. or they assume that there will be only inline content( text ot P or span) or table in the columns.

none of them consider following scene.
http://nicequotes.net/test.htm

i want it to look like
http://nicequotes.net/problem.gif

please let me know if you know any possible solution.

-sam

When you use a float you MUST give the floated element a width, which you have not done on your #rightcontainer.

You must also CLEAR your floats.
This works:

html, body{ width:100%; height:100%; }
#container{width:100%; height:100%; background-color:#CCCCCC;}
#leftContainer{ width:300px; height:100%; float:left; background-color:#FFCC00; }
#rightContainer{ height:100%; float:left; background-color:#0066FF; width: 75%;}
#innerBlock{ width: 50%; height:50%; padding:1%; background-color:#00CCFF; }
.brclear{
clear:both;
height:0;
margin:0;
font-size: 1px;
line-height: 0;
}
</style>

hi,

thats the main problem,
rightContainer don't have any fixed width,
theoretically it should be

width of rightContainer = (width of viewport - width of leftContainer )

width of viewport changes as per the screen resolutions
so we don't know fixed or percentage width for rightContainer

i think the problem is very clear now,
this was the main reason i used one table to position elements.

or is there any way to use something like display:table or display:table-cell ? to simulate tables using div?

thanks
-sam

PS. the 75% width was assigned to a block in rightContainer.

If you don't want to use what I gave you, which works, don't. I told you, if you use a float you MUST define a width, that's just the way it is. There are very few reasons that I can think of to make a div act like a table.

A block level element with one of the CssRules:
float:left;
float:right;
Floated elements are removed from the ordinary flow of the document (but are still affected by it) and placed as far to the left or right as they can go within their ContainingBlock.
Their original use was the equivalent of old HTML image alignments -- images "dropped" into the text, with the text flowing around them.
However, many further uses have been devised for floats: see FloatLayouts for the list.
Width

These must have a width property specified -- this is a frequently encountered problem.
Browsers that break floats with no width in some way are not buggy.

ok,

so we can conclude that we can't achieve some fluid layouts without tables.
tables are not yet gone..

thanks for your feedback