0

The question sounds complex but here is HTML that illustrates it:

<div id="contained" style="overflow: hidden">
 <div id="float-right" style="float: right; width: 100px">floated-right</div>
 <div id="float-left" style="float: left; width: 200px">floated-left</div>

 <div style="clear: both"></div>
</div>

If I resize #contained to less than 300px then #float-left jumps below it and is no longer visible.

Question is: How do I prevent #float-left from disappearing if I resize #contained to less than 300px? How do I make #float-right and #float-left "stick together" if #contained is less than 300px?

bodacydo
  • 75,521
  • 93
  • 229
  • 319
  • you could use a media query and max-width on the floated divs – Funk Doc Aug 20 '15 at 17:22
  • Floated div widht never changes though. Do you mean on container div? Its width also is actually not defined it changes are more elements are added to both floated right or floated left. The big question is how to make floated elements not to overflow the container. – bodacydo Aug 20 '15 at 17:23
  • then a media query that removes the floats and changes the div to display:inline-block – Funk Doc Aug 20 '15 at 17:30
  • @FunkDoc Thanks. I have never used media query. Could you illustrate how that would approximately look like (what i'd have to write?) – bodacydo Aug 20 '15 at 17:44

2 Answers2

1

It is not possible to prevent #float-left from disappearing when the container #contained is resized to less than 300px - and has overflow:hidden and a fixed height (presumably) - because #float-left and #float-right have fixed widths of 100px and 200px. If you would like them to remain side by side you would need to give them percentage widths. You could also have them stack one on top of the other if you give the #container height: auto.

<div id="contained" style="overflow: hidden">
 <div id="float-right" style="float: right; width: 33.3%">floated-right</div>
 <div id="float-left" style="float: left; width: 66.6%">floated-left</div>

 <div style="clear: both"></div>
</div>
kisabelle
  • 592
  • 1
  • 7
  • 17
  • Thanks I will try this. What about the reamining 0.1% though? – bodacydo Aug 20 '15 at 17:46
  • 1
    You could try and get closer by going to two decimal points (eg. 33.33% and 66.66%), but I recommend testing it to ensure that the divs still fit side by side in all browsers. – kisabelle Aug 20 '15 at 18:01
  • Thanks! I think I'll go 34% and 66% so that it's 100% precisely. :) – bodacydo Aug 20 '15 at 18:04
1

You can use a media query to change the style when the page is below a certain width. Example:

body { margin: 0; padding: 0; }

#contained { overflow: hidden; background: #f8f8f8; }
#float-right { float: right; width: 200px; background: #ffc; }
#float-left { float: left; width: 300px; background: #ccf; }

@media (max-width: 500px) {
  
  #float-right { width: 33.33%; }
  #float-left { width: 66.66%; }
  
}
<div id="contained">
 <div id="float-right">floated-right</div>
 <div id="float-left">floated-left</div>
</div>

Note: You don't need a clearing element inside the container, as the overflow style will make it contain its children.

Guffa
  • 687,336
  • 108
  • 737
  • 1,005