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

Encountering a problem with quintus-all.js and need assistance

I am having an issue with my animation code. Can someone help me troubleshoot it? window.addEventListener('load', function(){ var Q =window.Q= Quintus().include("Sprites, Scenes,2D, Anim").setup({maximize:true}); Q.Sprite.extend(&apos ...

htmlgame-engine

What is the best way to set up a clickable image without making the entire div clickable?

Is it possible to make just a specific image clickable within a div without making the entire div clickable? I have an image inside an anchor tag and a surrounding div that is clickable. The issue is that the entire space around the first image, .home, is ...

htmlcssimagehyperlink

Implementing Ajax to display autocomplete suggestions in an HTML table

I've been working on implementing an ajax auto complete function into my HTML code. My goal is to display the results from the auto complete function in a table on the html page. Although the auto complete function is working and I can see the drop do ...

htmlajax

Using jQuery to swap an image with a div element and then using the image as the

I have a collection of images in a div, like so: <div class="image-container"> <img width="174" height="174" src="http://mysite.com/images/portfolio/p1.jpg" class="image-style" typeof="foaf:Image"> <img width="174" height="174" src= ...

jqueryhtmlcss

Verification symbols in Unicode

I'm on the hunt for a universal checkmark symbol that is compatible across various operating systems and web browsers. I've tested out the following two options: Version 1: ✓ Version 2: ✔ (source) However, these symbols seem to be working ...

htmlunicodeasciihtml-entities

The jQuery.addClass() function seems to be malfunctioning

I'm encountering an issue with the addClass() method. For some reason, it's not functioning properly in this scenario: https://jsfiddle.net/0g1Lvk2j/20/ If you scroll to the end and close the last box by clicking on the orange box, the orange b ...

javascriptjqueryhtmlcss

Having trouble with SCSS in a jsfiddle? It could be due to a pesky cross-browser bug

Can someone help me with a positioning problem I'm having? I have a span element below an image inside an li tag, but for some reason the styles are not being applied. You can check out the example in the link below: https://jsfiddle.net/ymm8xpb8/16/ ...

htmlcss

What is the proper method for filling a custom shape that has been created in Canvas?

I am attempting to create a custom shape, but I am facing an issue where using moveTo prevents me from filling it. Is there any method to determine points on the screen to fill a shape? Or should I use or draw another real shape in the same layer block? T ...

htmlhtml5-canvas

Tips for changing the CSS properties of input elements in iView

Exploring Vue's single file components and experimenting with the iView UI framework. Here is a snippet of code I am working with: <template> <div> <i-input class="cred"/> </div> </template> I want to adjust the ...

cssvue.jsiview-ui

Elegant Popup Form

I'm encountering a problem with my ajax form that is embedded within a bootstrap modal. On the first use, the form functions correctly. However, when I attempt to use it again without refreshing the page, the text area no longer appears within the mod ...

jqueryhtmlajaxbootstrap-modal

Exchange one HTML element with a different HTML element

I've been attempting to change an HTML tag using PHP or jQuery. The current default tag is: <li class="dropdown"> <a href="index.html" class="dropdown-toggle"> Home</a></li> My desired replacement for the above HTML tag is: ...

javascriptphpjqueryhtmlcss

Can a website be designed to load a specific font for mobile phones, such as Arial Black for iOS?

Although the font Arial Black is commonly available on both Mac and PC systems, it is not accessible on iOS devices. Is there a way for a webpage to implement CSS techniques or tricks (such as assigning a class like "mobile" or "ios" to the body element), ...

htmlcssiphonewebfonts

Applying CSS selectors to target child elements within a select option

I am looking to apply a CSS selector only on select option child values. I have assigned an id to the selector and now I want to apply different CSS styles to each child (child 1, child 2, etc). <select name="options[81]" id="select_81" class="required ...

htmlcss

Tips for positioning elements within an ng-repeat list using absolute positioning?

Here is the HTML code: <div class = "container"> <form ng-submit = "createSticky()"> <input ng-model="formData.data" type="textarea" name="sticky_content" placeholder="add sticky text" required="true"/> <input ng-model= ...

htmlcssangularjs

Using jQuery, you can easily apply a new class to a div when it is

I'm currently facing an issue with adding a class of "active" to a div upon clicking it using jQuery. My goal is to apply the css class of active in order to give the button a distinct color (or the hover effect.) Unfortunately, I have been unsuccess ...

javascriptjquerycss

Transitioning from clip to clip-path in order to utilize percentage values

My current approach involves using a scss-based animation to create border animations with movement. The animation's core functionality relies on the use of clip. $box-width: 80px; $box-height: 50px; @keyframes clipMe { 0%, 100% { ...

csssasscss-animationsclip-path

Setting a value in a hidden field using a dropdown menu

I am encountering an issue while working with a form and making an ajax request. Everything seems to be going smoothly except for assigning the value of a dropdown to a hidden variable. The scenario is this: You choose a previously completed assignment, w ...

jqueryhtmlajax

Designing Material UI Button Styles

Hello, I recently started using Material UI and I'm facing some challenges in styling the components. Right now, I'm working on a sign-in page and trying to position the Submit button all the way to the bottom right corner. Any help or advice wou ...

cssreactjsmaterial-ui

The theme font fails to take effect on the paragraph

As a novice in HTML and CSS, I attempted to use the "Roboto Condensed" font from a WordPress theme for my entire site. Although I successfully implemented this custom font for a menu, I encountered difficulties when trying to apply it to paragraph elements ...

htmlcsswordpressfonts

Integrating HTML, JavaScript, PHP, and MySQL to enhance website functionality

Exploring the intricacies of HTML, JavaScript, PHP, and MySQL, I have been working on an order form to understand their interactions. View Order Form The aim of this table is to allow users to input a quantity for a product and have JavaScript automatica ...

phpjavascriptmysqlhtml