html - Make inner div width dynamic -
i want give remaining width .inner div. @ same time it's siblings (a & span tags) can of dynamic width.
any idea? code below & @ https://jsfiddle.net/pge8rqw0/
.top {} .inner { border-bottom: 1px solid black; background-color: green; width: auto; float: left; width: 50px; } { float: left; } span { float: right; background-color: red; }
<div class="top"> <a href="http://www.w3schools.com">visit w3schools.com!</a> <div class="inner"></div> <span>html good</span> </div>
thanks
solution using display: flex
.
.top { display: flex; } .inner { border-bottom: 1px solid yellow; background-color: green; min-width: 50px; flex: 1; } { background-color: #f5f5f5; } span { background-color: red; }
<div class="top"> <a href="http://www.w3schools.com">visit w3schools.com!</a> <div class="inner"></div> <span>html good</span> </div>
Comments
Post a Comment