My layout currently breaks on 320px resolution (.info drops below .icon and breaks the layout) and I can't figure out how to prevent it from breaking.
The .num info(number) is being loaded dynamically, and could be anything from 0 - 2147483647. If the screen resolution is not wide enough to show the .num and the .unread on one line, instead of breaking the layout, I would like the .unread to drop down to the next line (display:block applied to it?). I tried to think of a way to use only css, then though I could use js to apply a class .unread if more than 2 digits are present in .num, but this direction still doesn't seem right. If the resolution is wider and could show more digits and the .unread on one single line, I would want it to stay on one line in this case. E.G - 1000px could show many more digits.
Any suggestions?
My code is below:
<!DOCTYPE html> <html> <head> <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/normalize/3.0.1/normalize.min.css" /> <link rel="stylesheet" href="style.css" /> <script src="script.js"></script> <style> body{ padding:20px; } .wrapper { background-color:#cccccc; border-radius:20px; overflow:hidden; border:2px solid black; } .icon { font-size:40px; padding:12px; display:block; } .icon, .info { float:left; } .info { border-left:1px solid black; padding-left: 15px; } .info h3 { font-size:16px; margin:10px 0 0; } .info p { margin:10px 0; } .num { font-weight:bold; font-size:20px; } .unread { white-space: nowrap; } </style> </head> <body> <div class="wrapper"> <div> <div class="icon">X</div> <div class="info"> <h3>Header Information</h3> <p> <a class="num">23</a> <span class="unread">Unchecked Voicemails to Date</span> </p> </div> </div> </div> </body> </html>
Solved
I figured it out. I needed to add a width to the .info container and make the elements inside of .info p display:inline-block.