Any way to Update sibling element css based on width of preceding element in a responsive layout?

1 reply [Last post]

Thu, 2014-08-28 11:06

purewebdesigner

Offline

Enthusiast

Washington DC

Last seen: 3 years 31 weeks ago

Washington DC

Timezone: GMT-5

Joined: 2007-04-22

Posts: 234

Points: 95

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>