How to align text to the left and image to the right using CSS

I'm fairly new to CSS and struggling with a design issue. I want to display a series of stacked divs on my page, each containing text and one or more images.

My goal is to have the text left-aligned and vertically centered, while the images are right-aligned. Additionally, I need the height of the div to adjust based on the variable image heights.

The desired layout for each div is as follows:

While I've been able to achieve some of these requirements individually, I haven't been successful in implementing them all at once. Is it even possible to accomplish this using pure CSS, or should I consider using a table instead?

csshtmllayout

Answer №1

Hey there! I have a great solution for you, check out this link http://jsfiddle.net/8mQc4/15/.

This solution makes use of properties such as:

float and vertical-align.

With this code, you can achieve flexible height and width for images, while centering the text vertically within its container. Give it a try with larger texts or images!

Answer №2

Wow, I have an exciting solution for you that could potentially be effective and is definitely a solid idea!

If you use the image as a background, you can avoid the need for floating or positioning.

.section {
   background: url(http://jpowell43.mydevryportfolio.com/flatDesign/images/tab-2.svg) no-repeat rgba(255, 255, 0, 0.4);
   background-position: center right;
   background-size: contain;
   width: 100%;
}

The only drawback I foresee is that the image size will depend on the content inside the div.

Check out the JSFIDDLE example here

This approach allows for a fixed size of the image, but it relies more on text than the image itself for determining size. :/

background-size: 80px 60px;

View the example with fixed size here

By using min-height: whatever;, you can still achieve the desired outcome, although it may not be optimal.

See the min-height example here

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

The hidden overflow seems to be inconsistently effective

I've been working on creating some buttons with a rollover state. I have an image inside a div with overflow:hidden to hide the inactive state, but sometimes it doesn't work properly. What's even stranger is that when I inspect the page usi ...

htmloverflowcss

Using Javascript to Highlight a Single Row in a Table

Greetings esteemed members of the skilled community at StackOverflow, I must humbly ask for your expertise in solving a dilemma that I am currently facing. The situation is as follows: I have a table generated from an SQL query, and it is crucial for the ...

javascripthtmlhtml-table

Problem with Labels Overlapping and Blocking Text Fields

My issue is that when I interact with the text field, the label "Type your New Task here" moves up and gets covered by what looks like a white overlay. How can I fix this so that the label stays visible at all times? Prior to engagement: https://i.stack.i ...

cssreactjsmaterial-uilabeloverlay

Can one determine if a webpage is being displayed within an Infragistics igDialog?

Occasionally, my web page is displayed without a container and other times it's embedded within an igDialog of another container page, based on the user's navigation throughout our web application. Is there a way, using pure javascript or jQuery ...

javascriptjqueryhtmlinfragisticsignite-ui

Use setTimeout and setInterval with the initial input without parentheses or double quotation marks

<!DOCTYPE HTML> <html> <head> <script type="text/javascript"> var count=0; function increaseCount(){ document.getElementById('txt').value=count; count++; setTimeout(increaseCount(),1000); } </script> </head&g ...

javascriptjquerynode.jshtml

JavaScript Button with the Ability to Input Text in a TextArea?

For instance, imagine a scenario where you click on a button and it then displays various options for you to select from. Whatever option you pick will be automatically inserted into the text area. ...

javascriptjqueryhtml

Establishing connection to the database

I am in the process of developing a small-scale project on creating Universal Identification Numbers, similar to that of college level projects. My goal is to design a page with tabs for different databases, so that when I press the key 'A' for a ...

phpmysqlhtml

Adjust the stacking order to remove focus from the text field

Currently, I am facing an issue with my search box not unfocusing when clicked. My goal is to have the search box lose focus when anything on the page is clicked, especially the background (div.bb). The elements positioned above the background are set to p ...

jqueryhtmlcss

The position of the jQuery VirtualKeyboard is not displaying correctly

I'm currently experiencing an issue with the placement of the keyboard while using the Mottie/Keyboard plugin. The images provided below illustrate my desired outcome and the current behavior: https://i.sstatic.net/GULve.png Despite my attempts, the ...

javascriptjquerycssvirtual-keyboard

Changing `margin-top` will also affect adjacent sibling elements

Currently, I am in the process of designing an About page for my website. Within this layout, there is a main parent element named maindiv, which utilizes a flexbox to house two children: leftcont and rightcont. My goal is to implement an animation using m ...

htmlcssanimationcss-animationsmargin

Excessive spacing in the <td> elements - TABLE

I am encountering some problems with my table layout. The spacing between the field names and text boxes appears to be too large. Could there be mistakes I'm making that are causing this issue? How can I minimize the gaps? Please refer to the image b ...

htmlcsshtml-table

Gather information from "div" tag with the class attribute using Python

I am looking to extract specific financial data (referred to as the Key data) that is housed within <div> </div> tags. I then aim to consolidate this extracted information into an excel sheet which already contains additional harvested data. Th ...

htmlpython-3.xbeautifulsoup

Unable to make changes to the data

Journey Route::resource('/videofile', 'VideoController'); VideoController public function update(Request $req, $id){ $video = Video::findOrFail($id); if($req->hasFile('UserVideo')){ $vid = $req->file(& ...

phpjqueryajaxhtmllaravel-5

Initiate the transmission of numerous files immediately following a specified URL

It's interesting how websites like Facebook are able to directly send their .js and .css files when you visit the site. Most "normal" sites typically send back the index.html or index.php first, followed by the necessary .js and .css files later on. ...

phphtml

Error: The PHP contact form is displaying field names instead of the actual values being entered

I am completely new to this and would appreciate some guidance. I have set up a contact form on a website, but I seem to be encountering some errors. Here is the email content I receive from the contact form: <p>$usersname has contacted you from you ...

javascriptphphtmlajaxforms

``Fixing the focus background color for mobile devices and iPads using React and Material io: A Step-by-Step

My custom button has a background and a :hover color. It works fine on the web, but on mobile devices, the color of the :hover persists even after clicking the button when the mouse is not over it. I am looking for a solution to fix this issue because the ...

cssreactjsmaterial-ui

Align the inline text at the center as if it were an inline-block element

Currently working on a design that appears deceptively simple, yet I'm encountering challenges in centering it while keeping the text aligned to the left. https://i.sstatic.net/qhf6p.png In an attempt to have the background span only the actual text ...

javascripthtmlcss

CSS3 :not does not exclude a selector by id

Hello wonderful community of Stackoverflow, Here is my CSS code: .text:not(#overview > *) { margin-top: 10px; margin-bottom: 10px; } I am trying to apply a 10px top and bottom margin to everything with the class "text", except for elements ma ...

htmlcss

Trouble with visibility of Bootstrap navbar collapse button

While creating an application using bootstrap, I encountered a problem with the navigation bar. The issue is that when I resize the page, the links disappear and the toggle button fails to show up. Below is my current navigation bar code: <link rel= ...

htmlcsstwitter-bootstrap

unable to receive the data transmitted by the socket.io client

I hit a roadblock while trying to follow the tutorial on socket.io. I'm currently stuck on emitting events. Previously, I successfully received the console logs for user connected and user disconnected. However, when it comes to emitting messages, I a ...

javascripthtmlnode.jssocket.io