Challenges with aligning text

Having a bit of trouble with the text-align = top; in my CSS. My goal is to align the paragraph element at the top and to the right of my image. It's working fine on the first line, but the second line remains below my image. I attempted using horiz-align as well, but it didn't work out for me.

The W3C page I referenced is: http://www.w3schools.com/cssref/pr_pos_vertical-align.asp

Here is the CSS code snippet:

img.top {
    vertical-align: text-top;
}

This is the section of HTML that I'm trying to modify:

<p>
<img class = top src="../images/myImage.gif" alt="A curious stack question"/>
    Many questions <br/>
    Are most certainly to come
</p>

I believe part of the issue may be due to the <br/> tag because without it, the text aligns properly at the top. However, I need the <br/> there for formatting purposes. I thought about using <pre>, but I'm unsure if that would be the best solution.

Answer №1

How bound are you to that particular format? Here is an alternative approach:

HTML:

<img class="featured" src="../images/pic.jpg"/>
<p>
    Countless queries <br/>
    Will surely arise
</p>
<div class="clear-fix"></div>

CSS:

img.featured {
  float: right;
}

.clear-fix {
  clear: both;
}

JSFIDDLE: https://jsfiddle.net/3c7yxnep/

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

By default, HTML tables should remain hidden when the checkbox is already checked

By default, the checkbox is checked but the tables are not hidden. Initially, the first two tables will be visible. When you click a few times, you'll see hidden tables, but they should remain hidden by default. Do I need to call a function or change ...

Tool for Generating HTML Comments

Is there a tool out there that can generate coded comments for HTML? I've noticed some developers use elaborate 'commented out titles' to keep track of their code. These titles are made up of characters that resemble actual text, creating a ...

Convert HTML style text annotations into a collection of dictionaries

Currently facing the following issue: Suppose I have a string "<a>annotated <b>piece</b></a> of <c>text</c>" To create a list with the desired result as [{"annotated": ["a"]}, {"piece": ["a", "b"]}, {"of": []}, {"te ...

vertically centering a div specifically on laptops

What is the best way to vertically center a div on lap-tops? (...) body {padding: 4% 16%;} body {top:0px; left:0px; bottom:0px; right:0px;} body {border: 12px solid darkred; border-style: double;} body {background-color: #FAFCB4;} p {font-size: 80%; text- ...

What is the best way to format or delete text enclosed in quotation marks within an anchor tag using CSS or JavaScript?

I have encountered an issue with a dynamically generated login form. When I select the 'Forgot Password' option, a new 'Back to Login' message appears along with a separating '|' line. Removing this line is proving challenging ...

Errors in CSS Parsing

Using the tool CSS Lint, I have identified 3 errors in a specific CSS file: https://i.sstatic.net/meG9E.png The errors are found in the following CSS code snippet: a.btn, :not(li.menu_icon a.btn), .k-button.btn, input[type=submit].btn, input[type=bu ...

Switch from file input conversion button to uploaded file button with Angular rendering the file name

I am looking to enhance the file upload feature in Angular 6 by replacing the browse button with an upload button once a file is selected. Can anyone provide guidance on how to achieve this? Currently, I have created the initial screen as shown below: HT ...

Tips for Serializing and Deserializing an XML Document using Javascript

I keep encountering the error 'parameter1 is not a valid node' when using document.adoptNode. Here's the code snippet in question: $.ajax({ type: "GET", url: url, datatype: "xml", success: function (results) { ...

Maximizing the effectiveness of KnockoutJS visible bindings

I am facing a minor issue with KnockoutJS and the visible binding. Despite multiple attempts, I cannot seem to make it work for the following code. The aim is simple - display a form when "signedIn" is false and once the form is submitted, it should vanish ...

Guide on implementing the HTML5 fullscreen API for a div's background image

Is it possible to apply HTML 5 fullscreen API to the background image of a div? <div class="bgimg" style="background-image:url('img/home-1.jpg')" /> <img src="img/fullscreen.png" id="fullscreen-btn"> </div> I am trying to m ...

What is the best method for retrieving Json data and updating an HTML table in real time?

I am working with a Json data file that is updating every second. My goal is to display this data in real time on an HTML page of my website without having to reload the entire page. I am new to JavaScript and currently in the learning phase, so any help w ...

Adjusting the widths of <input> and <select> elements

I am facing an issue with aligning an input text box under a select element, where the input is intended to add new items to the select. I want both elements to have the same width, but my attempts have not been successful (as I do not wish to specify diff ...

Adaptive search bar and components housed within a casing

I am struggling to create a responsive box with a search feature for a mobile website. My plan is to incorporate jquery functions into the site, so I need to design an outer container that will house a distinct logo and search bar. However, when I test thi ...

Fundamental CSS - the technique of layering a DIV with a semi-transparent DIV on top

Having trouble getting this to display correctly in my Chrome browser. I have a wrapper containing all the HTML elements, and I want to create a DIV (let's call it div-1) that includes an image with an overlay div positioned to the left, as shown in t ...

Would you like to store modified CSS properties in a cookie?

Currently, I am facing a challenge while working on an ASPX page where CSS is used to define DIV properties. Although these properties can be altered on the page, they do not reflect when attempting to print them. Is there a method to modify CSS properties ...

jQuery AJAX - Unauthorized Access Error Code 403 Caused by CORS Issues

Attempting to replicate the following function, which is sourced from immowelt.de. The js-file can be found at . Replicated Function: a.ajax({ type: "POST", url: IwAG.Vars.acSource ? IwAG.Vars.acSource : j, contentType: "appl ...

How can I make columns shrink to fit content and repeat in CSS Grid layout?

Is it possible to create a CSS Grid layout that dynamically shrinks columns based on the size of the content while repeating (wrapping) cells? Consider the following configuration: display: grid; grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); e ...

What are alternative methods for adjusting the value of a CSS property with alternative parameters?

When it comes to using similarities in my code, I often find myself needing a more flexible solution. For example: .position{ position:absolute; right:10px; top:20px; } This is where the idea of using a mixin comes in handy: .position(@absolute:ab ...

Adjust all elements to align to the left in Bootstrap 3

I prefer aligning all components to the left and also like having control over their sizing. For instance, take a look at this: div class="containerSelectBox checkbox_label" <!DOCTYPE html> <html lang="en"> <head> <meta charset=" ...

Vue dropdown component mistakenly triggers event on incorrect element

Utilizing the incredible Vue Multiselect component for my project. Incorporated 8 dropdown multi-select elements into my form structure. A peculiar issue arises when an option is chosen from the second dropdown - it triggers the onSearchResellerCompanies ...