Designing a visually appealing widget in a jQuery UI theme by floating two elements neatly inside

My code looks like this:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <title>Testing PasteHTML.com</title>
        <link type="text/css" href="http://optdev.shellprompt.net/css/jquery-ui-1.8.1.custom.css" rel="stylesheet">
  </head>
  <body>
        <div class="notification" id="notification-message">
            <div class="ui-widget">
                <div style="padding: 0 .7em;" class="ui-state-error ui-corner-all"> 
                    <span style="float: right;cursor:pointer" onclick="$x_Remove('notification-message')" class="ui-icon ui-icon-closethick"></span>
                    <div id="message" style="float:left">Invalid Login Credentials</div>
                </div>
            </div>
        </div>
  </body>
</html>

I'm trying to make the Message and "X" appear inside their parent div instead of outside. Any suggestions on how to do this?

You can view a demo here. I want it to look like the JQuery UI Theme Alert message shown here.

cssjquery-ui

Answer №1

I recently completed a project using the jQuery UI Theme, and I struggled to find the ui-helper-clearfix class. Once I added it, everything fell into place flawlessly.

Answer №2

To address this issue, you have the option of including the overflow:hidden property in the parent element or creating a new division with the clear:both attribute just before closing the parent tag.

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

Customize the color of the horizontal line in React using dynamic properties

Is there a way to customize the color of an <hr /> element in a React application? If we were to use a functional component to accomplish this, how would we go about it? ...

htmlcssreactjs

Css shaky letters transformation

[SOLUTION] To resolve this issue, you can utilize the will-change CSS property that enforces GPU rendering: will-change: transform; [ORIGINAL QUESTION] After extensive searching on the internet, I have yet to find a solution to a seemingly simple prob ...

javascriptcsstransformjittertranslate3d

Issue arises when combining inline-block and overflow-wrap for div elements

I am facing an issue with two divs that look good on the same line when utilizing display: inline-block. However, if one of the containers contains an excessively long word that I attempt to wrap using overflow-wrap and word-break, it causes the container ...

htmlcssoverflowinlineword-wrap

When I open my website in the browser, the bootstrap card-deck design is not being displayed correctly

I encountered a strange issue while designing my website. The code I wrote for the Bootstrap card-deck class in codeply.com was working perfectly fine. However, when I copied the same code into my PyCharm code editor and then pasted the file link into my b ...

pythonhtmlcssbootstrap-4web-development-server

Skipping every third index in a JQuery .each loop after removing an element

I have a project where I need to display elements in rows of 4, and when an element is deleted, I want the remaining elements to shift up. To achieve this, I am currently assigning a class "last" to every fourth item after a deletion and inserting a spacer ...

javascriptjqueryhtmlcss

What is the best way to ensure that my image completely occupies the div?

I am facing a challenge in creating a hero image that would completely fill the div on my webpage. Despite setting the width and height to 100%, the image seems to only occupy half of the space. Check out the CSS and HTML code snippet here. div.hero{ ...

javascripthtmlcss

Breaking Free from Bootstrap Grids

I have a row with two Bootstrap columns - one wide and tall, the other short and narrow https://i.sstatic.net/u7WAf.png However, for mobile devices (targeted below lg), I want to change the column order to split into three sections Photo Consent Organis ...

htmlcssbootstrap-5

CSS Issue with Background Image not Fully Covering Viewport Width

Why isn't the CSS background covering the entire viewport width when using media query @media (max-width: 62.5em)? I've attempted to use background-size: cover, background-position: top left, and background-repeat: no-repeat, but nothing seems t ...

htmlcssbackgroundmedia-queriesbackground-image

Tips for adding a border to a table cell without disrupting the overall structure of the table

Looking for a way to dynamically apply borders to cells in my ng table without messing up the alignment. I've tried adjusting cell width, but what I really want is to keep the cells' sizes intact while adding an inner border. Here's the sim ...

htmlcsstypescriptprimeng

Minimize the expansive width of Shiny Dashboard's sidebar for

I'm facing a challenge in hiding a shinydashboard sidebar with a wider width. Upon increasing the width, however, the sidebar isn't completely disappearing from the screen. Here's an example that illustrates the issue I'm trying to add ...

htmlcssrshinyshinydashboard

Having trouble with redirecting a website to its appropriate version for mobile or desktop users?

After creating both the desktop and mobile versions of my website, I have a question. How can I determine whether a visitor is using a mobile phone or a PC when they come to my website? Specifically, if a visitor accesses my website through a mobile devic ...

csshtmlwindows-mobileuser-agent

Utilizing multiple classes in HTML for a button element

  I've recently come across the concept that elements can have multiple classes. It's interesting, isn't it? .rfrsh-btn { background-image:url(../../upload/rfrsh_nb_grey.png); ... } .submit { font-size: 0.85em; paddi ...

htmlcssclass

Ensure that buttons are cropped when extending beyond the border of another DIV

My issue involves a main DIV with buttons contained within it. I am seeking a solution to ensure that the buttons are cut off at the edge of the DIV, similar to the concept illustrated in this image. In the image, the blue represents the body, the light gr ...

htmlcssz-indexbehind

Button that floats on the left or right side within a div container

Is there a way to ensure that a button floats only within a specific div area? Below is the CSS and HTML example for reference. .test { width: 60%; display: inline; overflow: auto; white-space: nowrap; margin: 0px auto; } <div class=' ...

csshtml

Even when applying a class, the CSS link:hover style will only affect the initial occurrence

I've hit a wall on this issue and can't seem to find a solution. I styled a few links using classes, but it seems that only the first link is accepting the :hover and :visited state styling. I made sure to use classes to style all of them. Not su ...

htmlcsshyperlinkhovervisited

Center contents of Bootstrap row vertically

I have a simple property grid layout in Bootstrap 3 structured as follows: <div class="row"> <div class="col-md-3"> <div id="propGrid"> <div class="row pgTable"> <div class="col col-md-12"> <d ...

htmltwitter-bootstrapcsstwitter-bootstrap-3

Issue with CSS in Internet Explorer 7

CSS CODE: .search { float: left; width: 100%; display: block; } .search ul.tabs { height: 23px; margin-top: 50px; padding: 0px; } /* FF ONLY */ .search ul.tabs, x:-moz-any-link { height: 26px; margin-top: 50px; padding: 0px; } .search ul.tabs ...

htmlcss

Restricting zooming to only occur within the img element in a UI

Is there a method to enable image zoom inside specific divs without affecting the overall page zoom? At the moment, I have: <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale ...

javascripthtmlioscssuiwebview

Is It Possible for an HTML Page to Load Within an iframe?

Recently, I embedded an iframe link from a game hosted on Scirra onto my website. However, I noticed that the page automatically scrolls down to where the iframe is positioned once opened, which is quite annoying. Does anyone know how to resolve this iss ...

htmlcssiframeposition

Scrolling with animation

While exploring the Snapwiz website, I came across a captivating scroll effect that I would love to implement on my own site. The background picture changes seamlessly as you scroll, with the front image sliding elegantly into view. A similar type of scro ...

javascriptjquerycsshtmljquery-ui