Placing text alongside an image at the top of the page

Here's the HTML code generated by JSF:

    <div align="center">
        <img src="images/background_image.jpg" height="200px" width="30%" style="vertical-align: top"/>
        <span style="">
            Welcome abc, <input type="submit" value="logout" />.
            <br />
            Thu, 12-Jul-2012 15:46:07 AST
        </span>
    </div>

The issue is that "Thu, 12-Jul-2012 15:46:07 AST" is displaying below the image instead of beside it.

On the right side of the image, I am getting "Welcome abc" and the logout button.

Any insights on what might be causing this misalignment would be appreciated!

Edit 1

  1. I inserted <div align="center"> to center everything within the container.

  2. Removing the <br /> tag results in output as 

    Welcome abc, logout.Thu, 12-Jul-2012 15:46:07 AST
    . Adding the tag should ideally display:

    Welcome abc, logout.

    Thu, 12-Jul-2012 15:46:07 AST

    However, due to the <br /> tag, the output shifts below the image.

I hope this clarification sheds some light on the issue.

This situation is driving me crazy :(

Edit 2

Check out the jsfiddle here

htmlcsstext-alignment

Answer №1

To start, make sure the initial div is wide enough to fit both your image and span containing text. Also, set it to overflow:auto to accommodate floating elements.

Next, float the image and span to the left side of the div.

Ensure that the span is styled with "display:inline-block".

You may also need to add some margin-right to the image for spacing.

I hope this guidance is helpful.

Answer №2

In order to properly position your image and span elements, you should apply the CSS property "float":

img, span {
    float: left;
}

Answer №3

It seems like the content within your span element is exceeding the optimal length. Consider adjusting the width of your span to 70%, unless there is no border.

Answer №4

I managed to find the solution. Here is the corrected code:

<div align="center">
    <img src="http://blog.kevinchisholm.com/wp-content/uploads/2011/11/jquery2.png" style="vertical-align: top"/>
    <span style="display:inline-block" align="right">
        Welcome abc, logout.
        <br />
    Thu, 12-Jul-2012 15:46:07 AST
    </span>
</div>

Link to jsfiddle for reference

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

Angular not functioning properly with alert windows

Here is a snippet of code where I am attempting to create an alert when a button is clicked: <!DOCTYPE html> <html> <head> <title></title> </head> <body ng-app> <button ng-click="alert('test')"> ...

htmlangularjs

Selecting a language by clicking on it

I recently designed a bootstrap navigation bar for my website and incorporated a language selection dropdown menu into it. <li class="nav-item dropdown"> <a class="nav-link dropright" href="#" id="navbarDropdown" role="button" data-toggle="dr ...

javascripthtmljsonweb

Why won't JQuery .ajax send my request?

I'm having trouble sending POST/Get requests using jQuery with my Python Flask server. Curl requests are working fine, and I can see regular requests hitting the server, but these ajax requests aren't making it through. Here is the code I've ...

jqueryhtmlajaxpost

Ensuring Proper Tabulator Width Adjustment Across All Browser Zoom Levels

<div id="wormGearTabulatorTable" style="max-height: 100%; max-width: 100%; position: relative;" class="tabulator" role="grid" tabulator-layout="fitDataTable"><div class="tabulator-header" role="rowgroup"><div class="tabulator-header-co ...

javascriptcssangulartypescripttabulator

What could be causing the lack of downward rotation of my arrow in css? (specifically, the span element)

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=de ...

htmlcss

Adjust the font size in CSS based on a specified range of values

When the screen size is small (mobile), the font size is fixed at 14px. On really large screens, the font size is set to 18px, ensuring it never goes below 14px or above 18px>. This is achieved using media queries.</p> <p>However, for the i ...

cssfont-size

The alignment of elements on the right and left sides is not functioning as intended

I've been facing an issue with the alignment of my floats on my brand new website www.unicmedia.nl/case/oranje. Surprisingly, they seem to work fine in IE this time, but Firefox and Chrome are completely out of sync. Despite trying numerous solutions ...

htmlcss

Unable to display a Google map within a webview when viewing a local HTML file

I am currently working with a local HTML file called basicmap.html that includes the following code: <!DOCTYPE html> <html> <head> </head> <body> <div id="map"></div> <script> ...

javascripthtmliosobjective-cgoogle-maps-api-3

What is the best way to connect my 'Projects' folder to app.js within a React application?

import "bootstrap/dist/css/bootstrap.min.css"; import Navbar from './components/Navbar'; import { BrowserRouter as Router, Route, Switch } from 'react-router-dom'; import Home from './components/Home'; import Project ...

javascriptcssreactjs

Only displaying sub items upon clicking the parent item in VueJS

I'm in the process of designing a navigation sidebar with main items and corresponding sub-items. I want the sub-item to be visible only when its parent item is clicked, and when a sub-item is clicked, I aim for it to stand out with a different color. ...

javascripthtmlcssvue.jsvuejs2

A guide to connecting keyboard events to div elements within a React application

Currently working on a basic react project to gain some practical experience with the library. I aim to develop a simple user interface with blank spaces to be filled in by typing via keyboard input. Here's a glimpse of my progress so far: function ...

javascripthtmlreactjsreact-hooks

Creating a navbar dropdown that is clickable on mobile devices and opens on hover on desktop is a simple way to improve

Utilizing Bootstrap 5 for my website creation, I am facing an issue with the navbar dropdown functionality. On mobile devices, the dropdown opens upon clicking but fails to close when clicked again. Meanwhile, on desktops, hovering over the dropdown works ...

htmlcssfrontendnavbarbootstrap-5

Comparison of utilizing PHP within CSS versus Implementation through JavaScript [General]

Curious about the incorporation of PHP in CSS, especially in relation to my current Wordpress Theme project. I am aiming for high levels of customization and have been using a JS file to change CSS Properties through PHP. However, I'm not entirely con ...

javascriptphphtmlcsswordpress

What steps can you take to stop a tab from being inserted if one is already present?

I am facing a simple issue where I need to prevent the insertion of a tab if one already exists. Issue: I have a search bar that displays results in a div with class.result_container_2 when a user inputs a name. Upon clicking on this tab, another tab is i ...

javascriptjqueryhtmlcss

In the process of transforming my JavaScript code into JQuery

I'm struggling to convert my JavaScript code into jQuery, especially when it comes to calling the function for radio elements by name. The original JavaScript works fine, but I can't seem to get the jQuery version to work correctly. Index HTML ...

javascriptjqueryhtml

What causes the variation in default margin between React and traditional HTML?

There seems to be a difference in margin between <button> elements when rendered by React compared to plain HTML. Plain HTML adds a small margin between the buttons, while React removes it completely. Does anyone have an explanation for this discrep ...

htmlcssreactjs

What is the best way to implement an anchor link in my JavaScript code?

I'm struggling to wrap my head around this, as my thoughts seem to have vanished. On my webpage, there's a button element with an id: for example <button id="someId"></button> Within the document.ready function, I've set up an ...

javascriptjqueryhtmlanchorhref

Switching the way hyperlinks behave when clicked, from requiring a double-click to a single

My code is working properly, but I need my links to open with just a single click. The issue is that the delete, approve, and not approve links require a double click for their function to run. I'm hoping someone can help me with this. index.php < ...

phphtml

What is the best way to detect a checkbox click event inside a nested container?

I've created a list of divs, each with a corresponding pair containing more details. When you click on the "intro" div, the detailed pair opens and the intro is hidden. Each div also has a checkbox. I encountered an issue where clicking the checkbox i ...

jqueryhtmlcheckbox

How can I convert a list of checkboxes, generated by ng-repeat, into multiple columns?

Here is the HTML code snippet: <div class="checkbox"> <label> <input type="checkbox" ng-model="selectedAll.value" ng-click="checkAll()" />Check All </label> </div> <div class="checkbox" ng-repeat="carType i ...

javascripthtmlangularjstwitter-bootstrapcheckbox