Always ensure that the full text is responsively aligned to the right of the image

.brand {
  font-size:1.2em;
  color:#777 !important;
  display:inline-block;
  vertical-align: middle;
}

.car {
  display:inline-block;
  vertical-align: middle;
  padding:5px 30px 0px 20px;
}

.car.img {
  margin:0 !important;
  width:100% !important;
  height:auto !important;
}

.date {
  text-align: right;
  font-size:14px;
  color: grey;
}
<div id="wrapper">
  <div class="car">
    <img src="http://via.placeholder.com/100x100">
  </div>
  <div class="brand">
    BRAND BRAND BRAND BRAND HELLO 
    <div class="date">
      <time>
      12 november 1865
      </time>
    </div>
  </div>
</div>

When I add an additional HELLO to my brand-title, it causes the text to be pushed below the image. Is there a way to ensure that when the brand-title becomes longer, it always remains to the right of the image and vertically centered? Also, it should maintain this layout for responsiveness without using float or flexbox properties.

htmlcss

Answer №1

There are multiple ways to achieve this. One method is by utilizing a table.

.wrapper {
  display: table;
}
.brand {
  font-size:1.2em;
  color:#777 !important;
  display:table-cell;
  vertical-align: middle;
}

.car {
  display:table-cell;
  vertical-align: middle;
  padding:5px 30px 0px 20px;
}

.car.img {
  margin:0 !important;
  width:100% !important;
  height:auto !important;
}

.date {
  text-align: right;
  font-size:14px;
  color: grey;
}
<div id="wrapper">
  <div class="car">
    <img src="http://via.placeholder.com/100x100">
  </div>
  <div class="brand">
    BRAND BRAND BRAND BRAND BRAND HELLO HELLO 
    <div class="date">
      <time>
        12 november 1865
      </time>
    </div>
  </div>
</div>

Alternatively, an effective method involves smart usage of widths.

.brand {
  font-size:1.2em;
  color:#777 !important;
  display:inline-block;
  max-width: calc(100% - 100px - 20px - 30px - 1ch); /* width of window minus width taken up by left block */
  vertical-align: middle;
}

.car {
display:inline-block;
  vertical-align: middle;
  padding:5px 30px 0px 20px;
}

.car.img {
  margin:0 !important;
  width:100% !important;
  height:auto !important;
}

.date {
  text-align: right;
  font-size:14px;
  color: grey;
}
<div id="wrapper">
  <div class="car">
    <img src="http://via.placeholder.com/100x100">
  </div>
  <div class="brand">
    BRAND BRAND BRAND BRAND BRAND HELLO HELLO 
    <div class="date">
      <time>
      12 november 1865
      </time>
    </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

There seems to be an issue with the functionality of Angular Material in Angular9

I've encountered an issue with the material form field, even after importing the necessary modules. Surprisingly, there are no console errors to provide more insight into the problem. { "name": "online-shop", "version": "0.0.0", "scripts": ...

htmlangularangular-materialhtml5-canvasangular9

Creating a universal function to handle setTimeout and setInterval globally, inclusive of clearTimeout and clearInterval for all functions

Is it possible to create a universal setTimeout and setInterval function with corresponding clearTimeout and clearInterval for all functions while passing values to them? The situation is as follows: 1. More than 8 functions utilizing setInterval for act ...

javascriptjqueryhtmlcss

What is the best way to retrieve the class name of a div element that comes before with jquery?

I'm currently working on a new design and I need to retrieve the name of the class from a div element that is positioned above another div element. Here's an example: <div class="random name a"></div> <div class="the name of this ...

jqueryhtmlcss

Stop the Form from Submitting When Errors are Present

In the midst of explaining my issue, I must first share details about a form I'm developing. It's a Registration form where upon submission by clicking Submit, users won't immediately reach a Successfully Registered page. Instead, they' ...

javascriptphpjqueryhtmlforms

Trigger a dialogue box when a button is clicked to show dynamically inserted list elements

My goal is to have a collection of list items, each with its own button that triggers a unique dialog box displaying specific text. Below is the HTML code: <ul id="filter-list" class="scrollable-menu text-center"> @foreach (var filter in ...

javascriptjqueryhtml

Tips for optimizing HTML and CSS for better browser performance

Just starting to learn HTML, CSS through an online course and currently working on a simple website. The table of contents on my website is centered, but when I resize the browser on my 27-inch iMac, it doesn't stay centered. Any tips? Here's a s ...

htmlcss

Conceal the div once it reaches the top of the webpage

Is there a way to hide an "h1" element when its parent div reaches the top of the page and then show it again when it moves down using both JQuery and CSS? I attempted to utilize a scroll listener in JQuery to toggle a class, but this resulted in the "h1" ...

jqueryhtmlcss

Alignment issue with Bootstrap 4 form fields within inline form group

My experience with Bootstrap 4 on certain pages has been quite challenging, specifically when it comes to aligning fields with labels to the left and maintaining an aligned appearance for input fields. Here is the snippet of my code: <div class="wrap ...

javascripthtmlcsstwitter-bootstrapbootstrap-4

When attempting to check and uncheck checkboxes with a specific class, the process fails after the first uncheck

I have a set of checkboxes and one is designated as "all." When this box is clicked, I want to automatically select all the other checkboxes in the same group. If the "all" box is clicked again, I would like to deselect all the other checkboxes. Currently ...

javascriptjqueryhtmlcheckbox

How can I use jQuery to set the color of every other row in a

I'm facing an issue where I want to use jQuery to set the color of alternate rows in an HTML table. However, every time I add a new row, the color of the entire table switches. Below is the JavaScript code snippet that I am utilizing: var alternate = ...

javascriptjquerycsshtml-table

D3: Ensuring Map is Scaled Correctly and Oriented Correctly

I am attempting to integrate a map into a website using D3 and topoJSON that resembles the following: However, when I create the map with D3/topoJSON, it shows up small and inverted. Even after exploring various solutions (like Center a map in d3 given a ...

javascriptcssd3.jsgeojsontopojson

Emphasis and dimension of form

I need help with a field that is supposed to have a black outline, similar to the one shown below: However, here is what I currently have in my code: .r{ height: 40px; font-size: 30px; width: 100px; font-family: 'proxima_novalight ...

htmlcssformsinputfield

Creating dynamic animations for your elements with AJAX

How can I apply animation to an element as soon as it appears? I want others with the same properties to remain unaffected. Here is my approach: $.each(data, function(i, obj) { if(obj['Ping'] == "FALSE"){ ...

javascripthtmlajax

Utilizing CSS to Properly Position HTML Elements

Check out my code on jsFiddle I'm facing some challenges in positioning HTML elements using CSS. While I grasp the fundamental concepts of block and inline elements, implementing them in real coding scenarios can be confusing. I've shared my HTM ...

htmlcss

Hiding and showing div elements using CSS, JavaScript, and PHP

Here is the current code snippet: <? while ($row1 = mysql_fetch_object($result1)) { echo '<a href="#" onclick="showhide("'.$row1->id.'");">Name</a>'; while ($row2 = mysql_fetch_object($result2)) { ...

phpjavascriptcsshtml

Aligning text vertically to the top with material UI and the TextField component

Seeking guidance on adjusting vertical alignment of text in <TextField /> const styles = theme => ({ height: { height: '20rem', }, }); class Foo extends React.component { ... <TextField InputProps={{ classes: ...

javascriptcssreactjsmaterial-ui

Direct users according to their browser language (excluding php)

My site is going to have content in 3 languages, with French set as the default (fr). Here's how the structure of the website looks: Root directory (important note: no php files, just plain html) /fr/ Index.html About-us.html Contact.htm ...

html.htaccessredirect

Can IE Conditional Comments have a negative impact on page speed?

Debates between "CSS hacks" and "Conditional Comments" have become a regular occurrence for me lately, so I wanted to hear the thoughts of the Stack Overflow community on this topic. <!--[if IE]> <link type="text/css" rel="stylesheet" href="ie-s ...

htmlcssinternet-explorerconditional-comments

When adjusting styles using Chrome DevTools with Webpack HMR, the page layout can become distorted

Encountering a peculiar issue: Currently utilizing Webpack in conjunction with Vue-CLI and HMR. On attempting to modify styles via DevTools in the browser, the page itself undergoes unexpected changes - some styles are removed (screenshots provided below) ...

csswebpackvue.jsgoogle-chrome-devtoolswebpack-hmr

Capture audio using a web browser

Currently working on a project to create a platform for recording sounds. I'm aiming to incorporate a meter that measures the volume of the sound. Despite extensive research, I haven't been able to discover an HTML5 solution compatible with all b ...

jqueryhtml