How to solve this (seemingly simple) formatting problem in CSS?


Tags: html,css,css-float

Problem :

Using CSS, what is the cleanest, easiest way to format a box that has an icon on the left and text on the right:

  [Icon]   Text text text
  [____]   and more text
           and some more text

So far, I’ve used <div class=icon”> and div.icon { float: left; } to place the icon left of the text, but “and some more text” flows left (underneath the icon) instead of staying in a nice, solid column.

P.S.: I don’t want to use tables.



Solution :

why don't you use the icon as a background image?

HTML

<div class="withIcon">text text text text text text</div>

CSS

.withIcon {
 background-image: url(youricon.png);
 background-position: top left;
 padding-left: 20px; /* width of your icon */
}

    CSS Howto..

    How to set the css property of dynamic data

    How to make a CSS shape with rounded and straight edges?

    How to style an add to cart

    How to have anchors to the side of the page? [closed]

    css: how to vertically align table within div

    How to link css to html in an express project?

    CSS Sprites - How to align and make responsive?

    How to hide specific text from content wihtout calling any CSS?

    how to link css files in organization github pages

    How do you use CSS to make a group of images that flow over the edges of the browser window?

    How to change css href=“” using javascript? [duplicate]

    how to add a class to buttons attribute using css or jquery

    How to display line items in twos?

    CSS: How to fill a dynamic container that contains fixed sized elements?

    How to arrange images at middle of vertical using css?

    How to add css to linked rails imge

    How to move images in a grid box?

    How to change header size in css

    CSS how to make an element fade in and then fade out?

    Nth-child css property is counting html elements with display property set to none. How to change it?

    Show background image out of the div [closed]

    CSS: How to display an image in the background of a fixed-width, centered div?

    Fixed Header Scrollable Table - How to preserve horizontal scroll position using css jquery on page loads

    How to make a square button

    Is XSS possible via an @import, and if so how? Are there ways to protect against it?

    How to manipulate SVG element style with javascript?

    How to increase div width according to the text inside it?

    How do I align text to the middle of an element with CSS in Twitter Bootstrap?

    How can I write CSS that only applies to specific browsers?

    How to create a horizontal calendar with nested lists?