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 style a outgoing email from contact form with CSS

    How to make a grid with one style?

    How do browsers read and interpret CSS?

    How to change iframe pages without the parent page changing with external links using CSS

    How do I create a mobile version of Nav Bar [closed]

    How can I pipe the output from gulp-w3c-css to the console

    how to align in centre using html css

    How to change font on css?

    How to insert a div below dynamic divs row after onclick

    How can I stay organized when writing CSS? [duplicate]

    How to get a small div bar to slide down a menu on mouseover

    How I can replace an existing html val with a value calculated later using html and/or css?

    How can .css('display') be block, [0].hidden be false, and .is(':hidden') be true?

    How to make the div at the screen center not lower right corner?

    How to align Facebook, Twitter, Google+ and LinkedIn buttons on the right?

    How to change the CSS after image lazy loading (jQuery)? [closed]

    how to position a css sprite as background for another class

    Slideshow won't accept fixed height

    Dropdown container not showing right padding

    How do I make CSS hover transitions animate on mouse off AND mouse over, and replicate that in jQuery?

    How to Align CSS form

    How do I make an element scale down to nothing using a CSS transition on the iPhone?

    How do you get the width of an element without a defined width?

    How to change html background dynamically

    How to disable scrollbars in Webmethods 8?

    How can I use CSS to code a 3-sided box (no left side) with rounded corners and a shadow?

    How to overlap 2 charaters with CSS

    a div with height:1px appears very thicker in internet explorer 6. How to reduce it?

    How to get the css with in inline styles using jquery

    How to align a flash movie to center with “overflow: hidden”?