Align text to the right and do not include any images

Question

Align text to the right and do not include any images

I am attempting to align the images back to the left under the title, while only floating the description text to the right. I am struggling with clearing the image floats.

HTML:

<div class="title">System Displays</div>
<div class="description">Lorem ipsum dolor sit amet.Lorem ipsum dolor sit amet.Lorem ipsum dolor sit amet. 
 <img src="http://dummyimage.com/400x200/000/fff" /> 
 Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. </div>

CSS:

.title {    
width: 200px;
float: left;
} 

.description{    
width: 200px;
float: right;
} 

.description img {
float: left;
clear: both; 
}

You can view the jsfiddle link for a clearer picture. Unfortunately, I am unable to add any extra HTML elements. Thank you for any advice.

EDIT: Additionally, this version [jsfiddle] is what I am aiming for visually. I am uncertain if using position: relative; would be appropriate in this case.

html css css-float

Answer 1

Answer №1

Your example code doesn't quite match your jsfiddle. Check out the updated jsfiddle demo.

.description img {    
    width: 200px;
    float: left;
}

If you want to give a fixed width to .description, you'll need a different approach. You can't float an element outside its container.

One alternative is using absolute positioning like this:

.description img {
position:absolute;
top:25px; 
left:0;
width:200px;
}

See the demo here.

Another option is using relative positioning:

.description img {
    width:200px;
    position:relative;
    left:-220px;
    float:left;
    margin-bottom:-100px;
}

Check out the demo here.

Answer 2

Your example code doesn't quite match your jsfiddle. Check out the updated jsfiddle demo.

.description img {    
    width: 200px;
    float: left;
}

If you want to give a fixed width to .description, you'll need a different approach. You can't float an element outside its container.

One alternative is using absolute positioning like this:

.description img {
position:absolute;
top:25px; 
left:0;
width:200px;
}

See the demo here.

Another option is using relative positioning:

.description img {
    width:200px;
    position:relative;
    left:-220px;
    float:left;
    margin-bottom:-100px;
}

Check out the demo here.

Align text to the right and do not include any images

Answer №1

Similar questions

The rotation of an image in Microsoft Edge results in an HTML file display

The Bootstrap dropdown functionality is not working properly and fails to open when clicked

Is it feasible to programmatically click a div button in C# using WebBrowser?

Encountering the issue "Error: Uncaught PDOException - SQLSTATE[42000] - Syntax error or access violation: 1064"

Converting an HTML page into a JSON object by scraping it

Tips for Establishing Communication Between Two Dynamic Canvas Elements

How can I store HTML5 input type date/time data accurately as Date Time in Rails?

Tips for sending two values to a PHP file using JavaScript Ajax

There was an issue encountered while attempting to utilize orgchart: The property '_aZ' of null could not be read

Dependencies in AngularJS factories

"Unexpected discrepancy: Bootstrap Glyphicon fails to appear on webpage, however, is visible

Modify the content of a div by clicking on a word or link using Javascript

Guide on updating a MongoDB document upon clicking a button on an HTML page

What is the standard way elements are displayed within a box that is positioned absolutely?

What is the best way to restrict the number of iterations in ngFor within Angular HTML

Default check reversed for radio inputs

JavaScript's onclick function for clearing dropdown fields will only work once for each specific dropdown field

What is the correct way to effectively target nested elements using CSS?

Using a single jQuery script, implement multiple modals on a webpage that are responsive on both desktop and mobile devices

Styling the Container Component in ReactJS