How can I create an icon and text in same div like table format


Tags: html,css,framework7

Problem :

I am using Framework 7. I need to create a div with this format.

enter image description here

I have the icon of height 80px x 80px and I can use it like this.

<i class="icon icon-clock-large"></i>

I have absolutely no idea of css. I tried using columns but they create a problem on small screen. How can I achieve this?



Solution :

Use Below code

.container {
                padding: 10px;
                width: 200px;
                color: #09cd68;
                background: #262223;
                display: block;
                font-family: verdana;
                height: 50px;
            }

            .left{
                float:left;  
            }

            .clr{
                clear:both;  
            }

            .loadingtext{
                width: 140px;
                margin: 4px 0px 0px 15px;
            }
            .pleasewait{
                font-size:13px;
            }
            .processing{
                text-transform:uppercase;
                font-size:20px;
            }
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">

<div class="container">
  <div class="left">
    <i class="fa fa-clock-o fa-3x"></i>
  </div>
  <div class="left loadingtext">
    <div class="pleasewait">Please wait<div>
      <div class="processing">PROCESSING</div>
  </div>
  <div class="clr"></div>
</div>


    CSS Howto..

    div under div - dont know how to do this

    How to increase the duration of :active in css?

    How to apply different css style for IE 10 and 11 only?

    How to prevent from loading a css and a js sheet at only one Rails controller?

    How to replace @media (max-width) using Stylish or Greasemonkey?

    HTML/CSS: how to force text within a tag to be styled with font-style: italic !important;

    Unordered List Navigation Bar: How to I make some buttons go to the right of the navigation page?

    How to build dynamic css main/sub menu's (or do I need jquery)?

    How to keep indent for second line in ordered lists via CSS?

    How could I make a menu dropdown on click

    How to fire Javascript code to be the last, when all the HTML/CSS and Javascript Codes are fired?

    How to put borders to
  • onclick in css Tabs
  • How to revert to original CSS?

    CSS: how can I force a long string (without any blank) to be wrapped in XUL and/or HTML

    How to select label for=“email” in CSS?

    CSS sliding-window rounded-corner buttons: how to avoid the “dead” area on right side of “window”?

    How to change anchor color when you hover over a list

    How to apply a defined class to a new class in my css?

    CSS: How to get rid of scroll (except when there's additional content)?

    CSS or Javascript href hover (or mouseover) showing additional clickable links

    How to add a:hover css function to this code?

    How to create a 'p' tag using css [closed]

    css3 pure: how to hover an element outside?

    Skeleton CSS - how to span the width of the screen?

    How to display (
  • ) menu items over divs - z-index not working
  • html element h1 with links as background image show them in one line

    How do you set a css class attribute with Javascript? [duplicate]

    How to make HTML design of a website extensible, reusable and flexible?

    How to ensure dynamic CSS is loaded first before AJAX content?

    How to make custom shape div, or manipulate divs