Arrange the div elements in a single horizontal line

Is there a way to align the company logo div next to the name, address, email, and phone number containers? I've attempted using display: inline and float: right, but the logo isn't moving up as desired. Here's the code snippet:

http://jsfiddle.net/CfzSF/embedded/result/

<div style="width: 464px;">

    <div class="page-title">Company Name</div>
    <div style="font-size: 12px; color: #222;">Name:</div>
    <div style="font-size: 12px; color: #222;">Address:</div>
    <div style="font-size: 12px; color: #222;">Email:</div>
    <div style="font-size: 12px; color: #222;">Phone:</div>

</div>

<div style="border: 1px solid #1a4567; width: 100px; float: right;">
    <div>Company</div>
    <div>Logo</div>
</div>
javascriptjqueryhtmlcss

Answer №1

To align elements horizontally, use the CSS property display: inline-block.

Alternatively, you can achieve the same effect by using the float property.

UPDATE:

For the name, address, email, and phone fields, consider adding float: left to the container. This will ensure that the container only takes up the width of the widest element instead of the entire screen width.

See a working example here:

http://jsfiddle.net/ee6GW/4/

Answer №2

Place the floating element to the right of the non-floating element.

<div style="border: 1px solid #abc123; width: 150px; float: right;">
    <div>Business</div>
    <div>Symbol</div>
</div>
<div style="width: 550px;">
    <div class="header">Business Name</div>
    <div style="font-size: 14px; color: #333;">Person:</div>
    <div style="font-size: 14px; color: #333;">Location:</div>
    <div style="font-size: 14px; color: #333;">Email:</div>
    <div style="font-size: 14px; color: #333;">Number:</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 is the jQuery alternative for the classList property in vanilla JavaScript?

Currently, I am working on a collaborative project with two acquaintances. One of the requirements is to stick to either vanilla JavaScript selectors like document.getElementById("thisDiv"); or jQuery selectors such as $("#thisDiv"); to maintain consis ...

javascriptjqueryhtml

Angular JS sending a message to various views, including a pop-up modal

One of the services I have created is designed to manage message broadcasting to controllers that require it. The service implementation: .factory('mySharedService', function($rootScope) { var sharedService = {}; sharedService.message = &a ...

javascriptangularjstwitter-bootstrap

When utilizing the Express framework, the object req.body is initially empty when collecting data from a basic

I'm encountering an issue where I receive an empty object in req.body when submitting my HTML form. This problem persists whether testing in Postman or directly submitting the form from localhost in the browser. Upon logging it in the node console, t ...

javascripthtmlnode.jsexpress

Dynamically insert letters into each row as the HTML table increases

How can I display dynamically increasing alphabets in a newly generated cell on the left side of each row, based on the option selected in a dropdown list? These alphabets will serve as bullet points or serial numbers for the text boxes in each row. View ...

javascriptjquery

Creating Dynamic Videos with PHP and HTML

Trying to display the user-submitted video, but all my attempts failed for some reason: 1. echo "<video width='500px'>"; echo "<source type='video/mp4' src=$var autoplay>"; echo "</video>"; echo "<video width=& ...

phphtmlvideo

Focus on a separate webpage to access the Bootstrap accordion

Looking for a way to link to specific options within a Bootstrap Accordion from another page? It's possible to automatically open the correct option by including a hash tag in the href link. Here is an example of how to do it: <div id="accordi ...

jquerybootstrap-5bootstrap-accordion

Using a string as the key in a setState call in React: A beginner's guide

One challenge I'm facing involves calling a state value in React through a string. For example, if the string is "greeting" and the state value is greeting: "hello world", I encounter difficulties. When trying to call this.state.greeting using the st ...

javascriptreactjs

Display a hidden div on hover using JQUERY

How can I make a hover popup appear when submitting a form, and have it disappear only when the mouse is out of both the popup div and the submit button? Currently, the hover popup shows up but disappears when entering the popup. Can someone assist me in r ...

javascriptjqueryhoverjquery-hover

Discord.js Discord bot error: 'gateway' down

Hello, I could really use some assistance. Two days back, my discord bot began crashing unexpectedly. The error that keeps popping up is: events.js:367 throw err; // Unhandled 'error' event ^ Error [ERR_UNHANDLED_ERROR]: An uncau ...

javascriptnode.jsdiscorddiscord.js

Exploring the Exciting World of Jquery Cycle and Dynamic Ajax Capt

Utilizing Jquery Cycle for image fading loaded by Ajax, along with displaying corresponding captions using the onBefore option in the plugin. The image transition is functioning perfectly, however, there seems to be a slight issue with the caption display. ...

javascriptjqueryajaxjquery-cycle

Creating a personalized instance function in Angular's $resource

When working with AngularJS, all actions for a $resource are added as $customAction methods to the Resource. This allows me to easily invoke them as methods on resource instances. For example: var User = $resource('/user/:userId', {userId:' ...

javascriptangularjs

Exploring HTML5 Canvas - Focusing on a Specific Point

There have been discussions on this topic before, like this particular one. I followed the suggestion from that discussion and it did the trick. However, I'm still puzzled about the reasoning behind why it works. Here's an illustration: Imagine ...

htmlsvghtml5-canvas

Ways to prevent the TAB key from automatically shifting focus to the next element after using scrollIntoView during page initialization in the Chrome browser

Encountering a strange issue specifically on the Chrome browser. After the page loads, I am using the scrollIntoView method in the ngAfterViewInit of an Angular component. When the page loads and scrolls to the element, everything appears to be functioning ...

javascripthtmlangulargoogle-chromejs-scrollintoview

What sets apart npm correlation-id from uuid?

Can you please explain the distinction between the uuid and correlation-id npm packages? It seems that correlation-id actually utilizes the uuid package internally.. When would you recommend using correlation-id over uuid? Important: I am not utilizing ...

javascriptnode.jsreactjsangularnpm

Is the DOMContentLoaded event connected to the creation of the DOM tree or the rendering tree?

After profiling my app, I noticed that the event is triggered after 1.5 seconds, but the first pixels appear on the screen much later. It seems like the event may only relate to DOM tree construction. However, this tutorial has left me feeling slightly con ...

javascripthtml

Tips for fading out two elements after completing a drag and drop action

Visit this Codepen for more examples - Codepen I have been developing a drag and drop feature in my application. Once the item is dropped, it transitions from red to green and fades out smoothly. The droppable element behind the draggable should also fad ...

javascriptjqueryhtmlcssjquery-ui

The ngIf statement in the template isn't functioning properly after a refresh; instead, it is causing a redirection to the homepage

I've been developing with Angular 7, trying to display a <div> ... </div> based on multiple values that I declared as : Boolean = false; in the .ts file. These values are updated in ngOnInit, but for some reason, the page keeps redirecting ...

javascriptangulartypescriptangular-directiveangular-ng-if

Ways to continuously refresh the display in AngularJS

There are 2 div elements below, and I need to display only one of them depending on whether the doStuff() function is triggered in the controller when a specific anchor element is clicked. <div ng-controller='myController'> <div ng- ...

javascriptangularjsangularjs-ng-clickng-show

Tips for sending a variable from Javascript to node.js, specifically connecting to MYSQL

Can you help me with a simple example on how to pass a variable from JavaScript to Node.js? I need to store the user input from a text box in Node.js and perform some actions. Client <!DOCTYPE html> <html> <body> <h2>HTML Forms< ...

javascriptmysqlnode.js

Seeking out all (including potentially relative) URLs on a webpage: Possible strategies to consider

For a coding challenge, I am working on a small python tool to download an entire website locally. In order to view the website offline, I need to convert all URLs to relative URLs. This is necessary to ensure that resource files (such as .js and .css) are ...

htmlregexurlweb-scrapingw3c