Place the text at the bottom of two divs within a parent div

Is there a way to structure my CSS so that the text in "header-right" is aligned at the bottom, while keeping the image in "header-left" aligned at the top?

Below is my HTML code:

<div class="container">     
    <div class="header-left;">      
         <img src="img1.png">   
    </div>  
    <div class="header-right;">         
         <div style="float:left;">
              This text should be at the bottom.
         </div>
         <div style="float:left;">
              This text should be at the bottom also.
         </div>
    </div>
</div>

Thank you! :)

htmlcss

Answer №1

It seems like you are aiming to position both texts to the right of the image, bottom-aligned with the image based on your class naming?

To achieve this effect, you can set display: inline-block for all DIVs and add display: block; specifically to the image to prevent any extra space at the bottom:

.header-left,
.header-right,
.header-right div {
  display: inline-block;
}

.header-left img {
  display: block;
}
<div class="container">
  <div class="header-left">
    <img src="http://placehold.it/80x120">
  </div>
  <div class="header-right">
    <div>
      This text should be at the bottom.
    </div>
    <div>
      This text should be at the bottom also.
    </div>
  </div>
</div>

By the way, avoid using a semicolon in class="header-right" (within your DIV tags) or similar elements.

Answer №2

To display the .container as a table and the .header-right and .header-left as table cells, you can align the contents vertically to the bottom, top, or middle.

Check out the code snippet below:

.container{
display:table;
}
.header-left,.header-right{
display:table-cell;
}
.header-right{
vertical-align:bottom;
}
.header-right *{
display:table-cell;
}
<div class="container">     
    <div class="header-left">      
         <img src="image-url-here">   
    </div>  
    <div class="header-right">         
         <div style="">
              This text should be at the bottom.
         </div>
         <div style="">
              This text should be at the bottom also.
         </div>
    </div>
</div>

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

What are the advantages of using classes versus ids for managing multiple li elements in example 20 with knockout and jQuery? Is one option more efficient and easier to maintain

<ul class="sellerDetails sellerdetailsData " data-bind="attr: { id: 'sellerdetailsData-' + $index()}"> <li><span class="buyerprocess-sprite seller-name"></span> <p class="leftfloat"> <span data-bind=" ...

javascriptjquerycssknockout.jsknockout-2.0

Extract JSON data from Python API

Currently, I am delving into web programming and have created a Python API that queries an SQL database to return a JSON. The functionality of the API is as expected. In parallel, I've developed a controller where I execute a GET request to utilize t ...

javascriptpythonhtmlangularjsjson

Tips for Aligning an Image Just Above a Card in Mobile and Tablet Screens with Tailwind CSS

https://i.stack.imgur.com/tPXEQ.jpg https://i.stack.imgur.com/3XkJo.jpg Just a heads up, this code snippet performs well on desktop but may have some issues on mobile and tablet devices. If anyone in the StackOverflow Community can offer some assistance, ...

cssreactjsnext.jstailwind-css

Troubleshooting my PHP MSQL Update function in CRUD operations

Having trouble with the Update function when trying to implement CRUD on my website. Can anyone assist me? I can successfully Create, Read and Delete, but updating is giving me issues especially for Admin users. Below is the code snippet: <?php // Inc ...

phphtmlsql

Using the Croppie plugin to crop an image before uploading via jQuery Ajax in PHP

I've successfully implemented a code snippet that allows image cropping using PHP, jQuery, and Ajax with the Croppie plugin. Currently, I'm facing an issue while trying to include additional input values along with the image upload process. I ...

javascriptphpjquerycssajax

Trouble with CSS positioning

Styling with CSS: .one { width: 13%; } .two { width: 30%; } .three { width: 30%; } Formatting in HTML: <table> <tr> <th class= "one">Quantity</th> <th class= "two">Info</th> ...

htmlcss

Instructions for dividing a screen into two halves, either with a 20/80 or 30/70 split, using HTML

I've set up my HTML structure like this: <div class="row"> <div class="col"> <div class="leftside"> ...content for leftside goes here... </div> </div> <di ...

htmldjangobootstrap-4

Align a card in the center of a carousel using Bootstrap

I'm looking to include a card within a carousel, but I'm struggling with getting the card element centered inside the carousel. Here's my current code: <div class="container"> <div class="row"> < ...

htmlcssbootstrap-4

When a media query is activated, the Flex item mysteriously vanishes from

UPDATE I followed the suggestion in Ezra Siton's answer and changed the media query display to block, which successfully resolved the issue! Within my html code, I have a parent column flexbox containing two children. The second child is itself anoth ...

htmlcsscanvasflexbox

Steps to toggle text color upon clicking and switch the color of another text

As a beginner with no Js knowledge, I am trying to achieve a specific function. I want to be able to change the color of text when it is clicked, but also have the previously clicked text return to its original color. <div class="mt-5 fi ...

javascripthtmljquerycssbootstrap-4

Show a loading spinner with a smooth transition effect

After incorporating a loading circle template, I noticed that the circle abruptly appears when the submit button is clicked. I want to achieve a smoother transition for this loading circle. I attempted to use transitions, but it didn't have the desire ...

javascriptcssanimationcss-transitions

What could be causing Outlook to remove the color from my email buttons?

Is there a way to change the button colors in an email template successfully without them reverting back to white? I've encountered this issue when trying to use different colors (red, green, blue) in Outlook. I find this issue quite frustrating, so ...

htmlemail

JSON syntax error: "r" is not a valid token at the beginning position

Currently, I am in the process of developing a web server that is based on STM32 MCU. The workflow involves the browser sending a request to the MCU, which responds with a web HTML file. Users can then adjust parameters and use a form to submit them back t ...

javascriptjqueryhtmljson

Utilizing the "row" and "column" attributes in Angular (Flexbox) results in significant spacing between input fields within the HTML code

I'm working on aligning 2 input fields side by side within the same line. To achieve this, I've been utilizing Flexbox. However, I've observed that when using Flex with both 'row' and 'column', it introduces extra spacing ...

htmlcssangular

Issue: TypeError: Unable to access the 'getBoundingClientRect' property of an undefined value

Is there anyone who can lend me a hand? I encountered an issue: TypeError: Cannot read property 'getBoundingClientRect' of null https://i.stack.imgur.com/Jnfox.png Here is the code snippet I am trying to render: <div className="box&qu ...

javascripthtmlreactjsreact-nativedom

@media query not functioning properly with certain rules

I've hit a roadblock because my @media query is functioning properly for the initial rule, but fails to work for subsequent rules. For instance, I managed to make the "subButton" disappear when the screen size decreases below the specified width. How ...

htmlcssmedia

Running nodejs scripts within my HTML and JavaScript code

Using express, I send an HTML file to incoming GET requests: app.get('/', function(req, res) { res.sendFile(path.join(__dirname + '/public/index.html')); }); Within that HTML file, I included another JavaScript file, script.js, us ...

javascripthtmlnode.jsexpress

Additional cushioning is added when utilizing the X-UA-Compatible meta tag

After experimenting with various meta tags in the <head> section of my static HTML page, I have found that using <meta http-equiv="X-UA-Compatible" content="IE=edge" /> allows me to access newer CSS elements such as table:last-of-type in IE9. ...

htmlinternet-explorermeta-tagsx-ua-compatibleblank-line

What is the best way to remove top divs without causing the bottom divs to shift upwards?

I am faced with a scenario where I must remove the topmost divs in a document without altering the user's view. Essentially, I need to transition from: ---------start of document div1 div2 div3 ---------start of window div4 div5 ------- ...

javascriptjqueryhtml

Using jQuery to create radial-gradients with the background-css feature

I'm a newcomer to this online community and English is not my first language. Despite that, I will do my utmost to clearly explain the issue at hand. Recently, I utilized the .css function in jQuery to create a design element successfully. However, I ...

jquerycss