Show text and image side by side on the same row

I am looking to showcase both image and text on the same line, similar to how it's done on tripadvisor.in/

<div style="display:inline-block"> 
<div style="display:inline;float:left">
<a href="CollegeProfile.php" class="white">
<h4 style="margin-bottom:10px;display:inline">Great place for learning</h4></a>
<br /><a href="CollegeProfile.php" class="white">Check out reviews of Indian Institute of Management, Ahmedabad</a>
</div>
</div>


<div style="display:inline-block">
&nbsp;<img class="shakeImage" src="assets/img/author.jpg" style="border: 1px solid white;height:60px;display:inline" />
</div>

This code snippet achieves displaying both image and text on the same line.

css

Answer №1

If you find yourself needing to utilize div elements, you can achieve that with the following code:

Check out this Demo Fiddle

HTML

<div class='table'>
    <div class='cell'>
       <a href="CollegeProfile.php"><h4 >Great college worth considering</h4></a>
       <a href="CollegeProfile.php">Explore reviews of Indian Institute of Management, Ahmedabad</a>
    </div>
    <div class='cell'>
        <img class="shakeImage" src="assets/img/author.jpg" style="border: 1px solid white;height:60px;display:inline" />
    </div>
</div>

CSS

.table {
    display:table;
}
.cell {
    display:table-cell;
    vertical-align:middle;
}
h4 {
    margin:0;
}

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

Is it possible to include two of these on a single page with unique variables? (Using JQuery)

I am looking to create two similar pages, each with different percentages. However, when I try modifying the JS or changing class/ID names, it keeps pulling data from the first SPAN element. http://jsfiddle.net/K62Ra/ <div class="container"> <di ...

javascriptjqueryhtmlcss

How can we make Internet Explorer 11 mimic Internet Explorer 9 in HTML?

How can I ensure that Internet Explorer 11 uses CSS styles from IE9 in my HTML? I have tried the following code: <script runat="server"> private void Page_PreRender(object sender, EventArgs e) { var meta = new HtmlMeta() ...

htmlcssinternet-explorer

The use of HTML 5 Autofocus causes interference with CSS loading

Whenever I apply the autofocus="autofocus" attribute to an input element, it causes a brief glitch in Firefox. The content briefly appears without the CSS styling applied, resulting in elements not centered and headings rendered in default fonts. If I tak ...

csshtmlfirefoxautofocus

What is the best method for inserting space between two divs?

I need to create more space between the last two cards and the image at the bottom, but this spacing should increase as I resize the browser window. Can anyone help me with this? https://i.stack.imgur.com/rq9t2.png https://i.stack.imgur.com/tOikx.png Th ...

htmlcssimageresponsive-design

What is the best way to conceal the outline in a popup window?

I have successfully implemented a popup/modal window using JavaScript, but now I need to find a way to hide the outline map container. The initialization code for the map is as follows: self.mapDialogOptions = { autoOpen: false, m ...

javascriptjquerycssknockout.js

Adjusting the size of the iframe to match the dimensions of the window

Is there a way to make the iframe automatically fill up the entire space? For example, only opens the iframe up to half of the window in Mozilla Firefox and IE6. How can I ensure that it takes the maximum size of the screen? Are there any CSS or JavaScr ...

javascriptcssiframesize

Steps for designing a single-column content-focused layout

Creating a single column fixed-width layout with a header and footer, the order of view should be as follows: header navigation dynamic content 1 dynamic content 2 main content footer The dynamic contents (3, 4, 5) will expand vertically with unknown he ...

htmlcss

Unable to get CSS transition to function properly after adding a class using jQuery

I am trying to create a hover effect that shows an image when the mouse is over a specific div, but for some reason, the transition is not working as expected. I understand that using visibility: hidden cannot be animated. Here is the code snippet: $(d ...

javascripthtmljquerycss

`inline-block elements are centered when displayed in Firefox`

I have a question regarding formatting h2 and h3 elements to display as inline-block. Below is the code snippet: <div id="content" class="content-width"> <h2 class="headline"> My Headline </h2> <h3 class="subheadline"> My S ...

htmlcss

Easily showcase a limitless number of items within a 10-column grid using Bootstrap!

This is the code snippet: <div *ngFor="let minute of state.minutes.specificMinutes.selectedMinutes | keyvalue" class="col-sm-1 checkbox-container"> <div class="custom-control custom-checkbox"> <input type="checkbox" (click)="state.m ...

htmlcssangularbootstrap-4

Adjust the line height appropriately to prevent any text from being cut off

I need a solution for displaying multiline text in a div with overflow:hidden without clipping the text. Here's an example of clipped text: I want to achieve this using only Pure CSS, without relying on Javascript. If my div has a fixed height, I c ...

htmlcssoverflow

Why am I restricted to adjusting mat-elevation settings within the component's CSS exclusively?

In my Angular 8 project, I am utilizing Angular material to enhance the design of my material cards. To set up the shadow effect on these cards, I am using the elevation helper mixins provided in the documentation: https://material.angular.io/guide/elevati ...

cssangularangular-materialscss-mixinsmat-card

The style of the button label does not persist when onChange occurs

Encountered an interesting issue here. There is a button designed for selection purposes, similar to a select item. Here's the code snippet: <button class="btn btn-primary dropdown-toggle" style="width: 166%;" type="button" id="dropdownMe ...

javascriptjqueryhtmlcssstyles

Separate the label and content sections in an Angular Material vertical stepper

After applying the following CSS: mat-step-header{ display: flex ; justify-content: flex-end ; } I am attempting to make this stepper function properly. I have implemented Angular Material design for a vertical stepper. How can I position the steppe ...

cssangularangular-material

What could be the reason for the absence of margin on the top and bottom

.separator { border: 1px solid #000000; margin: 10px; } <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="utf-8"> <title>Separator</title> </head> <body> &l ...

htmlcss

What is the best method for adding space between elements in flexbox layout?

I am struggling to align the child flexboxes within my parent flexbox in a single row, both vertically and horizontally centered. I want to add space between them using the gap property in CSS, but the images and embedded videos inside these child flexboxe ...

htmlcssflexbox

What is required to create a basic application that can function offline while featuring an HTML/CSS user interface?

Newbie inquiry: I am interested in creating a small application that can run offline on a desktop computer. The amount of data to be saved is minimal, so I have the option to use a file or some type of database. However, my main question is: What languag ...

javascripthtmlcss

What is the method for adjusting the font size of the label in an Angular mat-checkbox element?

I've been trying to adjust the font size of a mat-checkbox's label, but no matter what I do, the component's default styles keep overriding my changes: Using !important Trying ::ng-deep Applying a global style in styles.scss <mat-checkb ...

cssangularangular-materialangular-forms

Improving code quality and consistency in Javascript: Tips for writing better code

Hey, I've been experimenting with some code using ajax and have ended up with a lot of repetitive lines. Is there a way to streamline the code without losing functionality? I keep using the .done method multiple times when I could probably just use it ...

javascripthtmljquerycss

What are some alternative ways to create a text field with the same style as Material UI's without relying on the Material UI

With the power of HTML, CSS, and Reactjs I am aiming to create a functionality where the placeholder animates up to the border upon clicking on the text field An example can be seen with Material UI text field: https://material-ui.com/components/text-fie ...

htmlcssreactjsmaterial-ui