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..

    CSS: How to shrink first div in container instead of going outside of container (second container should be shown just after first) [closed]

    How to make simple_form input field wider with CSS?

    Transition instant set border, show slowly

    CSS: How to create special shape

    How do I make two arrows in css

    How to prevent a p:menubar from being overlapped by the contents of a CSS template?

    website div won't stretch from left to right, how do you fix css?

    How to stop people from viewing my HTML and CSS [closed]

    How to fix background image inside div

    How to style parent li elements of headers using CSS?

    how to move canvas along with a centered canvas

    How can I get the font size of an element as it was set by css

    How to replace a text-align: -webkit-center?

    How to hide a column in the Webgrid in aspasp.net MVC?

    How Do I Limit Scrolling to a Fixed Div?

    How to have “onmouseover” highlight in css?

    How to resize dynamic images coming from database in a responsive bootstrap website

    How to generate a elongated hexagon shape with two circular sides?

    How to use first-child?

    make the div (in css) to grow bottom-up? how?

    How do I force span elements to remain in place between variable length text and an image element?

    How to have different table styles in CSS

    How to set vertical alignmetn of text in bootstrap select control?

    How would I write css to access the following class “total total_plus hidden_elem” or “total total_plus”?

    How do I make my div scale to larger than it's original size using css animation?

    How to make an entire div clickable with CSS [closed]

    How to delete white space between two div element when they display as inline-block [duplicate]

    How to blur a banner photo in CSS Style?

    How to add arrow beside some links in CSS?

    Inner div has borders - how to override with a class on an outer div?