How to align text on the right side of img without using float: left so that it does not change the parent height by default

Question

How to align text on the right side of the image icon, like the one shown in the example.

Usually I used " float:left ", but for mobile responsive design I prefer not to use things like " float:left " because it destroys the red height of the div with responsive designs.

I need to align the title, subtitle and a little square image.

Answer 1

It is easy to use float: left and NOT to break the height of the red border of the div.

You need to add display: table-cell to the .app_top block. Here's the solution:

 .app_top { display: table-cell; } .app_top img { float: left; } 

See a working example. Here is the code .

Answer 2

Perhaps another option is to put the attribute in the parent div instead of the element

HTML:

 <div id="wrapper"> <div class="twoColumn"> <img src="https://pbs.twimg.com/profile_images/444650714287972352/OXTvMFPl.png" /> </div> <div class="twoColumn"> <p> this is a testingalot test</p> <button> mybutton </button> </div> </div 

CSS

 #wrapper{ border: 1px solid black; } .twoColumn{ width: 49%; float:left; border: 1px solid red; } button{ width: 50px; height: 40px; background: red; } img{ max-width: 100%; } 

http://jsfiddle.net/Equero/df2wvcet/

I hope this helps

Answer 3

Instead, you can use display: inline-block .

 #main-container { border: 5px solid #3F3F3F; width: 270px; } .container { width: 250px; height: 200px; border: 5px solid #7F0008; margin: 5px; } .box { display: inline-block; vertical-align: top; width: 85px; height: 85px; background: #446C74; margin: 5px; } .content { display: inline-block; vertical-align: top; } .title, .sub-title { margin: 0; padding: 3px 10px 3px 0; } .title { font-size: 17px; font-weight: bold; } .sub-title { font-weight: bold; color: #3F3F3F; } .img { background: url(http://placehold.it/100/25); width: 100px; height: 25px; border: 5px solid #EBEAAE; } 

 <div id="main-container"> <div class="container"> <div class="box"> </div> <div class="content"> <p class="title">Title</p> <p class="sub-title">Sub-Title</p> <div class="img"></div> </div> </div> <div class="container"> <div class="box"> </div> <div class="content"> <p class="title">Title</p> <p class="sub-title">Sub-Title</p> <div class="img"></div> </div> </div> </div> 

Answer 4

The easiest solution would be to change the layout structure by wrapping your spans in a div just like you did with the image, then add .app_top div{display:inline-block} .app_top div span{display:block}

 .top{ width: 95%; position: fixed; background-color: #f7f7f7; padding-top: 10px; padding-bottom: 10px; padding-left: 3%; padding-right: 3%; border-bottom: 1px solid #b2b2b2; } .search{ width: 100%; -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px; border: none; background-color: #e3e3e6; } .search::-moz-focus-inner { border: 0; padding: 0; } .items{ background-color: #ffffff; width: 100%; padding-top: 50px; } .app{ margin-left: 25px; margin-right: 25px; } .app_top div{display:inline-block} .app_top div span{display:block} 

 <div class="main"> <div class="top" > <input type="text" class="search" /> </div> <!-- Items --> <div class="items" style="border: 1px solid black; padding-top: "> <div class="app" style="border: 1px solid red;" > <div class="app_top"> <div> <img src="_img1.jpg" width="95"/> </div> <div> <span class="app_txt" style="border: 1px solid aqua;"> text text - House text house! Las...</span> <span class="ltd" style="border: 1px solid pink;"> textic-texttive ltd</span> <span class="" style="border: 1px solid blue;"> </span> </div> </div> <div class="app_bottom"> </div> </div> </div> 

Answer 5

.content contains all the text on the right side. If you use overflow: hidden, the height of the div will remain normal.

 img { float:left; } .content { overflow:hidden; }