* { box-sizing: border-box; } section { float: left; } .app { width: 100%; } .menu { width: 200px; margin: 20px; } .menu ul { margin: 0; padding: 0; } .menu li { display: block; cursor: pointer; } .nav { margin-bottom: 5px; } .nav.empact { font-weight: 600; } .nav.header { color: #aaa; cursor: default; margin-top: 20px; } .menu .nav a:before { display: block; float: left; width: 3px; height: 32px; border-radius: 3px; background-color: #f39d41; content: ''; margin-right: 10px; } .menu .nav a { display: inline-block; line-height: 32px; width: 100%; color: #222; text-decoration: underline; border-radius: 3px; } .menu .nav a.active { background-color: #f9d4be; } .content { width: calc(100% - 260px); margin-top: 20px; } .content .left, .content .right { float: left; width: 50%; } .info-block { width: 100%; height: 100px; margin-bottom: 20px; } .info-block .img { float: left; width: 100px; height: 100px; background-position: center; background-size: 100% auto; margin-right: 20px; border-radius: 3px; } .info-block h1 { font-size: 32px; line-height: 32px; margin: 0; font-weight: 400; } .info-block p { max-width: 100%; margin-right: 20px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }