Forum Moderators: not2easy
I want to make a page of 2 columns. Left columns should have the minimum size necessary to display its content. Right column should take all remaining width.
I made the following html, which perfectly works in all versions if IE:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ru" lang="ru">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</head>
<body>
<div style="width: 100%; border: solid green 1px; padding: 0; margin: 10px;">
<div style="float: left; padding: 0; margin: 10px; border: solid blue 1px;">
aaaa
</div>
<div style="border: solid red 1px; float: left; padding: 0; margin: 10px; height: 100%;">
<table valign="top" border="0" cellpadding="0" cellspacing="0" style="width: 100%; margin:0; padding:0; border:0;">
<tr>
<td width="33%">aaa</td>
<td width="33%">bbb</td>
<td width="33%">ccc</td>
</tr>
</table>
</div>
</div>
</body>
</html>
But in Firefox the right column takes the whole width of the page. I have read lots of forums, and in all the cases the width of the left column is EXACTLY DEFINED either in pixels, or in percents. My site contains a complicated tree-like structure of menu, and it is internationalized. All texts have different length in different languages, so if the left column width is fixed, there may be lots of unused space. Or opposite -- some data may be hidden.
One solution is to make both columns float. But I want the right column to have 100% width. Firefox wraps floated divs to the minimal width. This is not acceptable.
Is it possible at all to do so in Firefox? Or the only solution is Javascript?
(I can do this with javascript, but hope to avoid this dirty hack)
Thanks in advance!
Is it possible at all to do so in Firefox? Or the only solution is Javascript?
1 = Yes, 2 = No
don't float the inner div (red border) instead add
overflow:auto;IE has done it wrongly for years, although
overflow: autoSummary from the inner div (red border)
remove
float: leftoverflow: auto; zoom: 1;[edited by: SuzyUK at 6:26 pm (utc) on May 25, 2009]
if you need the leftmost column to stretch all the way to the bottom of the page without the other text wrapping underneath, then the easiest way that i could find was to do the whole page as a table, and put white-space:nowrap in the leftmost cells.
not exactly ideal... but then you have got a table in your code above already, so maybe you won't mind using tables for layout.
[edit: just seen suzy beat me to the post...!]
This was so simple :) And works actually in old browsers also(IE5, IE6)!
Look at this example:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ru" lang="ru">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</head>
<style>
.subcategory{width: 100%; margin: 10px; border: solid blue 1px;}
.smallInfo{height:150px; width:250px; float: left; margin: 10px;border: solid black 1px;}
</style>
<body>
<div style="width: 100%; border: solid green 1px; padding: 0; margin: 10px;">
<div style="float: left; padding: 0; margin: 10px; border: solid blue 1px;">
aaaa
</div>
<div style="border: solid red 1px; overflow:auto; zoom: 1; padding: 0; margin: 10px; height: 100%;">
<div class="subcategory">
<div class="smallInfo">aaa</div>
<div class="smallInfo">bbb</div>
<div class="smallInfo">ccc</div>
<div class="smallInfo">ddd</div>
<div class="smallInfo">eee</div>
<div class="smallInfo">fff</div>
<div class="smallInfo">ggg</div>
<div class="smallInfo">hhh</div>
<div style="clear: both"></div>
</div>
<div class="subcategory">
<div class="smallInfo">iii</div>
<div class="smallInfo">jjj</div>
<div class="smallInfo">kkk</div>
<div class="smallInfo">lll</div>
<div class="smallInfo">mmm</div>
<div class="smallInfo">ooo</div>
<div style="clear: both"></div>
</div>
</div>
</div>
</body>
</html>
this consists of "boxes". Each box should come to the right of the previous box if there is enough space.
If the container is "float: left", and there are too many boxes inside, the container floats below the left column. But the SuzyUK solution exactly does the job!
