ansaurus

Question

Answer 1

A:

Im not sure if this is the answer you are expecting but, why don't you set the width of Tree to 'auto' and width of 'View' to 100% ?

2009-08-11 12:49:25

Because that will put the second float below the first because it's too wide.

cletus 2009-08-11 12:50:28

Answer 2

+4 A:

This would be a good example of something that's trivial to do with tables and hard (if not impossible, at least in a cross-browser sense) to do with CSS.

If both the columns were fixed width, this would be easy.

If one of the columns was fixed width, this would be slightly harder but entirely doable.

With both columns variable width, IMHO you need to just use a two-column table.

cletus 2009-08-11 12:49:59

yes looks like two column table is simplest way

Anurag Uniyal 2009-08-12 06:22:56

Answer 3

A:

If both of the widths are variable length why don't you calculate the width with some scripting or server side?

<div style="width: <=% getTreeWidth() %>">Tree</div>

<div style="width: <=% getViewWidth() %>">View</div>

amischiefr 2009-08-11 12:52:59

How does the server know how the client's layout engine will work?

Kev 2009-08-11 13:07:54

Simple: develop it for 90% of the browsers out there :) IE 7+ , FF3+ and Safari support CSS 3. You could also include the standard IE6 <!--[if lte IE 6]> element. By the way, what browser doesn't support style="width: %" ??

amischiefr 2009-08-11 13:25:55

I don't know how It can be done server side, but yes some javscript may do it but i want to avoid it unless css/html can't do it

Anurag Uniyal 2009-08-12 05:59:45

Which it can't. Therefore, if you want both to be dynamic then you have to do it in either script or server side.

amischiefr 2009-08-12 12:21:46

Answer 4

A:

Have a look at the available CSS layout frameworks. I would recommend Simpl or, the slightly more complex, Blueprint framework.

If you are using Simpl (which involves importing just one simpl.css file), you can do this:

<div class="ColumnOneHalf">Tree</div>
<div class="ColumnOneHalf">View</div>

, for a 50-50 layout, or :

<div class="ColumnOneQuarter">Tree</div>
<div class="ColumnThreeQuarters">View</div>

, for a 25-75 one.

It's that simple.

2009-08-11 13:11:48

will both columns be variable width?

Anurag Uniyal 2009-08-12 06:00:51

Answer 5

+2 A:

Here, this might help...

<html>
<head>
<style type="text/css">
div.box { background: #EEE; height: 100px; width: 500px; }
div.left { background: #999; float: left; height: 100%; width: auto; }
div.right { background: #666; height: 100%; }
div.clear { clear: both; height: 1px; overflow: hidden; font-size:0pt; margin-top: -1px; }
</style>
</head>
<body>
<div class="box">
   <div class="left">Tree</div>
   <div class="right">View</div>
   <div class="clear" />
</div>
</body>
</html>

a6hi5h3k 2009-08-11 13:16:09

+1 because your example seems to work, but in my real scenario some how contents from 'view' creep into 'tree' div, as tree div is not 100%, may be some javascript forces it to be small and after height of tree I see view contents

Anurag Uniyal 2009-08-12 06:21:56

In that case, if u know the max-width of the left column, u can either give it a style max-width (does not work in IE) or think of margin-left (beware of double-margin bug on IE) or padding-left.

a6hi5h3k 2009-08-15 01:13:05

Answer 6

+16 A:

The solution to this is actually very easy, but not at all obvious. You have to trigger something called a "block formatting context", which interacts with floats in a specific way.

Just take that second div, remove the float, and give it overflow:hidden instead. Any overflow value other than auto makes the block it's set on become a BFC. BFCs don't allow descendant floats to escape them, nor do they allow sibling/ancestor floats to intrude into them. The net effect here is that the floated div will do it's thing, then the second div will be an ordinary block, taking up all available width except that occupied by the float.

This should work across all current browsers, though you may have to trigger hasLayout in IE6 and 7. I can't recall.

Xanthir 2009-11-19 23:16:41

+1: excellent explanation.

BalusC 2009-11-19 23:20:53

+1, sounds nice, can you add an example

Anurag Uniyal 2009-11-20 03:30:39

Thank you for such a clear, concise explanation - a whole new door of CSS understanding has just been opened.

Rabid 2010-03-18 17:20:02

Perfect - thanks

Robert Morgan 2010-07-22 09:59:03

Answer 7

A:

Thanks for the plug of Simpl.css!

remember to wrap all your columns in .ColumnWrapper like so.

<div class="ColumnWrapper">
    <div class="ColumnOneHalf">Tree</div>
    <div class="ColumnOneHalf">View</div>
</div>

I am about to release version 1.0 of Simpl.css so help spread the word!

Shaggy 2009-12-13 01:02:11

Answer 8

A:

Thanks, Xanthir, your insight is worth a ton of gold!

Milen Kirilov 2010-05-13 07:53:22

ansaurus

tags:

views:

answers:

Expand div to take remaining width

related questions