Max-width does not work with float

Question

I am trying to create a responsive page. I have 2 divs with the same height. Both of them have the max-width property, and max-width works. When I add the float: left property, max-width does not affect them.

Here is an example: jsfiddle

<div class="color1"> Some Text </div> <div class="color2"> Bla </div> <div style="clear: both;"> 

and CSS:

 div{ height: 100px; float: left; } .color1{ background-color: #6AC1FF; max-width: 400px; } .color2{ background-color: #BDBCF4; max-width: 100px; } 

I want them to be vertically aligned. Is there any other way to do this otherwise than swim and keep the maximum width?

Answer 1

Use specific percentages of width and float: http://jsfiddle.net/dEEW5/3/

 div{ height: 100px; display:block; float:left; } .color1{ background-color: #6AC1FF; width: 80%; max-width:400px; } .color2{ background-color: #BDBCF4; width: 20%; max-width:100px; } 

Use specific percentages of width with inline block: http://jsfiddle.net/dEEW5/4/

 body{font-size:0} div{ height: 100px; display:inline-block; font-size:16px; } .color1{ background-color: #6AC1FF; width: 80%; max-width:400px; } .color2{ background-color: #BDBCF4; width:20%; max-width:100px; } 

An inline block, where the second block falls when it can no longer be inserted into the container instead of shortening: http://jsfiddle.net/dEEW5/5/

 body{font-size:0} div{ height: 100px; display:inline-block; font-size:16px; } .color1{ background-color: #6AC1FF; width: 100%; max-width:400px; } .color2{ background-color: #BDBCF4; width:100%; max-width:100px; } 

Answer 2

If max-width: 400px gone so that the div expands to this, you must combine it with min-width: (value);

Answer 3

When floating, your divs do not have the specified width; thus, by default they have a width of content (therefore, they do not have a width of 400px / 100px).

Answer 4

Use a specific px width for your largest view, and then set "max-width: 100%".

eg.

  div{ height: 100px; display:block; float:left; } .color1{ background-color: #6AC1FF; width: 400px; max-width:100%; } .color2{ background-color: #BDBCF4; width: 100px; max-width:100%; } 

For my site, I was pleased that both divs were displayed 100% when the screen size was too small to display them side by side. But if you want another step in the response, you can add an additional @media request to select an intermediate step before switching to 100% width.

Answer 5

I started using flex, and I thought this might be a good answer to my own question. I added a container with display: flex and set each div a flex-grow .

Example

HTML

 <div class="cont"> <div class="color1"> Some Text </div> <div class="color2"> Bla </div> <div style="clear: both;"> </div> 

CSS

 div{ height: 100px; } .cont{ display: flex; } .color1{ background-color: #6AC1FF; flex-grow: 4; max-width: 400px; } .color2{ background-color: #BDBCF4; flex-grow: 1; max-width: 100px; }