user3222169 user3222169 - 3 months ago 7
HTML Question

If 100% DIV is narrower than 300 px, than no float

Code: https://jsfiddle.net/w5aref0L/ (please resize the window to better understand what is my code doing)

<div class="left">
<div class="first">a a a</div>
<div class="second"><p>a a a</p></div>
</div>

.left{ width: auto; padding-left: 300px; overflow: auto; }
.first{ width: 300px; margin-left: -300px; background: red; float: left; }
.second{ width: 100%; min-width: 50%; background: blue; float: right; }


What I want to achieve: If blue DIV is narrower than 300 px, than I want him to jump under red DIV. Not float next to him.


  • I tried to set him min-width, but it doesn't work.

  • I don't want to use javascript

  • I don't want to use @media


Answer

If I understand what you want to achieve exactly, the solution is to use width:calc(100% - 300px) for the second div, rather than 100%, and to float it to the left.

.first {width:300px; background:red; float:left;}
.second {width:calc(100% - 300px); min-width:300px; background:blue; float:left;}
<div class="left">
<div class="first">a a a</div>
<div class="second"><p>a a a</p></div>
</div>

I also took the liberty of removing the negative margins, since that looked like it was a left-over from some failed attempts at getting it to work.

If this is not what you want, let me know and we can work something out!

Comments