How to align a div to the left without using the float property in

JS FIDDLE and here is the code I have come up with...I am looking for assistance in achieving a layout similar to the second one without relying on FLOAT

HTML

   <div class="img-container">
        <div class="img"></div>Cristiano Ronaldo</div>
    <br>
    <br>
    <br>I want this but without using float, can anyone help??
    <br>
    <br>
    <br>
    <div class="img-container">
        <div class="img" style="float:left;"></div>Cristiano Ronaldo</div>

CSS

div.img {
    height:60px;
    width:60px;
    border-radius:5px;
    background:brown;
    display:inline-block;
    margin-right:5px;
}

Answer №1

Here is the essential CSS for your needs:

.image-box {
    height: 60px;
    width: 60px;
    border-radius: 5px;
    background-color: brown;
    display: inline-block;
    margin-right: 5px;
    vertical-align: top;
}

By removing the float inline style and adding vertical-align: top, it should work perfectly :)

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 is the best way to enable a clickable YouTube iframe that is positioned behind an image using z-index?

Currently, I'm working on a project for a client that involves showcasing their YouTube videos on a webpage. I've come up with a creative solution using z-index to place the YouTube iframes inside images of televisions. However, I've encount ...

What is the best way to incorporate a fixed-position button that spans the full width of the screen?

After trying numerous solutions on stackoverflow, I have yet to find one that works for me. a.buttongc { border-radius: 5px; background: #f5b220; color: #fff; font-size: 17px; height: 44px; line-height: 42px; color: #fff; text-decoration ...

What could be causing the image not to load in this code with the img tag?

import React from 'react'; import styled from 'styled-components'; function Navbar() { return ( <Container> <img src='./appleWhite.png' /> </Container> ) } export defau ...

information directed towards particular positions on a meter

I am in the process of creating a dashboard skin that receives data from a game via a plugin. I have encountered a problem with the RPM gauge. The issue is that the angle from 0 to 5 on the gauge is smaller than the angle from 5 to 10. I am attempting to s ...

JavaScript / html Error: function body missing closing curly brace

I encountered an error that I'm struggling to resolve: "SyntaxError: missing } after function body". Despite not having a function named 'body', I have attempted changing every instance of 'body' in my script. However, ...

Chrome Browser Facing Issue with Loading Font Awesome Package

Today I made an interesting observation on my website. Font Awesome was not loading properly on Chrome. Instead of displaying the double down arrow in the gradient circle, it was missing on my laptop's Chrome browser. Interestingly, it appeared correc ...

The media query in Css3 is not functioning as expected when using max-width

Struggling to hide a specific element when the screen width reaches 980px or less using media queries. Despite my attempts, the element continues to display. Oddly enough, if I use a media query with min-width instead of max-width, the element disappears ...

Searching for a way to smoothly scroll horizontally from right to left using the mouse wheel?

I am looking to display 3 out of my collection of over 6 articles, with the ability for the user to scroll from right to left when using the mouse wheel. Additionally, I want to hide the scrollbar for a cleaner look. Can anyone assist me with this? I hav ...

Customize the border of the Tab indicator within Material UI

I created a custom NavBar with a unique tab indicator implementation: indicator: { background: 'linear-gradient(45deg, #FE6B8B 30%, #FF8E53 90%)', }, <Tabs classes={{indicator: classes.indicator}} onChange={handleClickTab} value={value}> ...

Encountering an error while trying to execute `$(document).ready(function() {}

Recently, I delved into the world of JavaScript, particularly Jquery. As I encountered the $(document).ready(function() {}); statement and added it to my code, I faced an issue when placing it within the header tag of my HTML. The script tag would display ...

Steps to integrate an external Python script into a Django web server

Hello everyone, I need some assistance with integrating an external Python code into a Django web server. I am relatively new to programming, so any guidance would be greatly appreciated. To give you a brief overview: my goal is to create a form where use ...

Create a responsive DIV element within a website that is not originally designed to be responsive

I am looking to optimize the positioning of an ad div on my non-responsive website. The current setup has the ad displayed at 120x600 pixels, always floating to the right of the screen. While this works well for desktop or large devices, the display become ...

Footer positioned correctly with relative DIV

I find myself in a state of complete confusion. Coding is not exactly my forte, so I suspect I have made a significant error somewhere that is causing the following issue: My goal is to create a sticky footer. The footer does indeed stick to the bottom of ...

Increasing pixel density on iPhone using CSS codes

I've encountered a dilemma while developing a responsive theme - all the pixels appear doubled on my iPhone, most likely due to its retina display. My question is, should I create another style sheet (or use media queries) specifically for retina dis ...

Implement a function that runs upon Page Load using Javascript

Here is some Javascript code that loads a map with different regions. When you hover or click on a country, additional information about that country is displayed on the right side of the map. I would like to have a random country already displaying infor ...

What is the best way to generate a CSS design with wavy patterns?

Check out the image below to see what I am attempting to create: https://i.sstatic.net/PlroF.png Here is my current code, but I need to make it more dynamic, similar to increasing the frequency rate of a sin or cosine wave. #wave { position: relativ ...

CSS - Transitioning fixed positioning to scrollable

I am currently working with code to display an image in a 'scale to fill' manner. I originally used this code for a previous project to set up a background image on a website, and now I want to adjust the positioning to allow scrolling. However, ...

Using a variable as a URL parameter in a jQuery ajax request: tips and tricks

$.ajax({ type:"POST", url:"hostname/projfolder/webservice.php?callback=statusReturn&content="+str_table, contentType: "application/json; charset=utf-8", crossDomain:true, dataType:'jsonp', succe ...

Having trouble getting my jQuery fade in effect to work

I am having an issue with the fade in / fade out effect using jQuery. The Menu is rendering perfectly and functioning properly, but there is no delay or fade when hovering over the menu items. I'm not receiving any errors, but the expected behavior is ...

Is the page reloading automatically after updating the innerHTML content?

Trying my hand at creating a JavaScript/HTML page that automatically generates an audio player when provided with a URL. However, every time I click the generated button, the audio player is inserted but then disappears as if the page is refreshing. Here ...