0

I want to make this layout, div2's width will not be affected by his content

-----------------------------------------
          |      |               |
   div1   |      |      div2     |      
          |      |               |       
-----------------------------------------

Here is my code:

    <html>
    <body>

    <div style="background:red;height:200px;">

        <div  style="background:black;width:100px;float:left;height:100px;">

        </div>


        <div  style="background:green;height:50px;float:left;margin:10px;">
        when here the content is too much, this div will start another line, 
which is not wanted, I want this div to be float always, also , I dont know the with.
        </div>

    </div>


    <body>
    </html>

so , how ?

user1337896
  • 1,081
  • 1
  • 10
  • 15
  • I have a solution: make the second div `style="background:green;height:50px;margin-left:110px;"` is there another solution if i don't konw the first div's width – user1337896 Nov 15 '12 at 03:13
  • Possible duplicate: [see this](http://stackoverflow.com/questions/1260122/expand-div-to-take-remaining-width). [Implementation here](http://jsfiddle.net/pxmkL/1/). – irrelephant Nov 15 '12 at 03:25

1 Answers1

1

add the css property 

max-width:100px
Jack
  • 10,943
  • 13
  • 50
  • 65
NccWarp9
  • 486
  • 1
  • 5
  • 19