How do you create a webpage with a floating image, top left, bottom right, and with wrapping text in the middle


Tags: html,css,css-float

Problem :

I'm trying to figure out how to create a webpage where I have text and floating images to the top left and bottom right. I would like to use the floats using CSS and not the tag if thats possible. I have looked at several examples here at Stackoverflow and on the web, but I'm not finding the answer I'm looking for. The URL I have included shows exactly what I'm trying to accomplish.

enter image description here


**CSS**

.boxframe {
 width: 675px;
 height: 800px;
 left: 243px;
 top: 400px;
 padding: 32px;
 position: absolute;
 background: #FBF4C7; 
 border: 2px solid brown;
 z-index: 1
}

.portrait {
 float:left;
 width: 244px;
 height: 294px;
 margin: 20px;
 padding: 0px;
 background: url('portrait.png');
 }

**HTML**

<div class="boxframe">
<div class="portrait">
</div>
 <p>Text Text Text Text Text</p>


Solution :

Something like this:

HTML

<div id="content">

        <img src="http://placehold.it/100x100" class="align-left">
    <p>
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Neque beatae voluptatum illo cupiditate culpa temporibus quasi sapiente aperiam eius quas? Ullam, maiores, perspiciatis dolore mollitia tempore optio cupiditate d aperiam eius quas? Ullam, maiores, perspiciatis dolore mollitia tempore optio cupiditate delectus iure?
    </p>  

    <p>
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Neque beatae voluptatum illo cupiditate culpa temporibus quasi sapiente aperiam eius quas? Ullam, maiores, perspiciatis dolore mollitia tempore optio cupiditate delectus iure? ribus quasi sapiente aperiam eius quas? Ullam, maiores, perspiciatis dolore mollitia tempore optio cupiditate delectus iure?
    </p>  
             <img src="http://placehold.it/100x100" class="align-right">
    <p>
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Neque beatae voluptatum illo cupiditate culpa temporibus quasi sapiente aperiam eius quas? Ullam, maiores, perspiciatis dolore mollitia tempore optio cupiditate delectus iure?
    </p>  

</div>

CSS

.align-left { float:left; margin:0 10px 0 0; }
.align-right { float:right; margin:0 0 0 10px; }
img { display:block }

#content { width:500px;}

JSFiddle Demo


    CSS Howto..

    How to do HTML/CSS form helpers/popover

    How do I put 2 columns beside each other

    How do I place a DIV class in a specific position over another DIV class?

    how to add css file to node js(not express) code

    How to resolve css incompabilities/differences between different versions of IE?

    How to apply SVG filter to an element?

    How do I make everything on this page centered and fully responsive for all browsers?

    How to build a mobile responsive menu that will always have a 100% height and show all its list items

    How to I make the width of my CSS wrapper relative to the size of the monitor?

    CSS - How to prevent ul/ol li's second row of text from going further left than the first line?

    How to change the background colour of a QWidget inside QStackedWidget using css?

    How to CSS select all cells with colspan set?

    CSS: how to make a list item containing a form “submittable”?

    How to make an svg masked image compatible with Internet Explorer

    links are showing up on each line, instead of inline

    How to add a css on a div by finding a children class on its sibling div by jquery

    HTML & CSS: Vertical Flow Layout (columnar style), how to implement?

    How to word wrap text in HTML?

    How to center two pieces of text using CSS and Bootstrap?

    How to display a tree in HTML/CSS? nested left-floating divs and wrapping

    Jsoup html parsing style="display:none; dont show the link

    Symfony2: How to link CSS to HTML part?

    How to put all Array values in $_GET[]

    CSS: How to get thumbnails into a horizontal line?

    How to override CSS to change of bootstrap

    How to achieve a silk-screen effect (a dotted shadowy effect) on an image with javascript/jquery?

    How to change a css element based on other element

    Horizontal
      navigation - how to vertical align contents of

    How to get two divs the same height depending on which one has the bigger height in CSS [duplicate]

    how to revert to original css values after .css() method