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

PHP Table Sorting Functionality

Using ajax to submit a form in CodeIgniter and displaying the returned data in a table view

How to Set a Button as Inline Text in a React Native Component

Error: The function execute_script() is expecting between one and two arguments, however three arguments were provided

Extraction of data post logging into the webpage (modem authentication page)

The functionality of Access-Control-Allow-Origin is not effective in Chrome, yet it operates successfully in Firefox

Craving assistance in coding permutations

Steps to import an excel file by clicking a button in an Angular application

HTML 5 File selection on iOS and Android using Cordova/Phonegap

How can I add text to a bar or table using CSS/HTML?

The HTML source code in the browser varies from the output obtained through Python requests

Is there a way to prevent the second ul from appearing?

What do you notice about interactions involving 'input type=text' in HTML and JavaScript?

Guide on achieving horizontal scrolling in Ionic 3

`On mobile devices, the Bootstrap button no longer displays focus changes once clicked.`

Is it possible to place Angular Material components using code?

Issue with confirming deletion of tabulated records

What is causing the additional space at the bottom?

Utilize viewport activation to determine browser width

Having trouble achieving the desired effect with inline block