0

I have something like this:

<div class="wrap">
     <div class="first">Example</div>
     <div class="second">
         <div class="inner"></div>
     </div>
</div>

"wrap" have width (100% or 1000px)

"inner" have height and border-bottom

I want to expand "first" and "second" like this

|==================== 1000px or 100% ======================|

Example_____________________________________________________

If I add width to "first" and "second" it looks fine:

|==================== 1000px or 100% ======================|

Example_____________________________________________________

but if Example text change to longer it wraps:

|==================== 1000px or 100% ======================|

Another_____________________________________________________
Example
and
text

But if "first" and "second" have no width "second is invisible:

|==================== 1000px or 100% ======================|

Example

How to do it?

EDIT:

from this:

Expand a div to take the remaining width

It works, example:

<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>
Community
  • 1
  • 1
Nips
  • 13,162
  • 23
  • 65
  • 103

2 Answers2

0

It sounds like you are looking for min-width:

http://css-tricks.com/almanac/properties/m/min-width/

Which will set a minimum width without making that width the maximum.

JackArbiter
  • 5,705
  • 2
  • 27
  • 34
0

This is probably what you need. 

overflow:auto; and a max-height

http://jsfiddle.net/2hFs5/

Adrian.S
  • 209
  • 2
  • 12