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

Aligning elements next to each other in html / css without using any top margins

How can I arrange four blocks of text side-by-side, center them over a background image, and ensure they respond well on different screen sizes without using tables? I typically use tables for this layout, but I've heard that CSS/HTML5 can achieve th ...

csshtml

Ways to avoid scrolling on a fixed element

Here is the HTML setup I have... body .top .content The issue I am facing is that when scrolling reaches the end of the ul in the .top element, the background starts to scroll. This can be quite disorienting and makes the site slow on tablets. Even ...

javascriptjqueryhtmlcss

Do you know of a more streamlined approach to formatting this SCSS code?

Currently working on a Saleor Site and diving into the world of Django and SASS for the first time. While crafting my own styling rules in SCSS files, I've noticed some repetitive code that could potentially be streamlined. It seems like there should ...

cssdjangosass

How can I combine HTML and CSS in a single request using the sendFile method in Express?

const app = require('express')(); app.get('/', function(req, res) { res.sendFile(__dirname + "/" + "index.html"); }); <link rel="stylesheet" href="style.css"> I utilized the Node.js code above to send an HTML file. In order to ...

htmlcssnode.jsexpresssendfile

Step-by-step guide on aligning a div of unknown height in the center of a div with a set

Struggling to center product images vertically within a fixed height box? Here's the code I've been working with: <div class="main-pic"> <ul> <li><img src="images/extra/laptop.jpg"></li> <li><img ...

htmlcss

CSS code to modify background color upon mouse hover

I am currently working on creating a navigation menu. Check out the code snippet here: http://jsfiddle.net/genxcoders/ZLh3F/ /* Menu */ .menu { height: 100px; float: right; z-index: 100; } .menu ...

htmlcss

Styling Dynamic HTML Content in Angular: Tips and Tricks

After running this line of code, I have a generated element sub with a property of [sub]. <li [displayMode]="displayMode" template-menu-item style="cursor: pointer" [routerLink]="['/request/checkoutReview']" icon="fa-shopping-cart" name ...

htmlcssangular

Tips for wrapping text labels in mat-slide-toggles (Angular Material)

Is there a way to get the title in mat-slide-toggle to wrap if it's too long while keeping its default position to the right of the toggle? <mat-slide-toggle class="slider">A really long title wrapped</mat-slide-toggle> I attemp ...

cssangularsassmaterial-uiangular-material

Only display one div element when in print mode, hiding all others

My print style CSS code includes the following: * { display:none; } #printableArea { display:block; } Initially, I anticipated that this CSS would hide all elements except for the printableArea. Surprisingly, everything on the page became hidden when ...

css

Is it possible to shift the div inline-block using the CSS :after selector?

I'm looking to adjust the placement of the disk icon so that it aligns more with the baseline of the text without increasing the vertical space between lines. Below is the CSS code I've worked on so far: .openPage:after { content: ' &a ...

htmlcss

Container that displays vertical scroll while permitting floating overflows

Is there a way to set up a container so that when the window size is too small, it displays a scroll bar to view all elements that don't fit in one go? At the same time, can the child containing floating elements be allowed to extend beyond the bounda ...

cssreactjstypescriptmaterial-ui

Make the table width 100%, but we don't want the central cell to be stretched

My table contains a central image cell that spans two rows: <table width="100%" style="text-align:center"> <tr> <td>Cell 1</td> <td>Cell 2</td> <td rowspan="2"><img src="http://www.skrenta.com/ima ...

htmlcss

Tips for seamlessly placing a div with a background image within a parent container, all while preventing any scrolling issues as the child div rotates

I created a simple demo featuring a square image with rounded corners to give it a circular appearance. The image rotates slowly, but as it moves diagonally, the horizontal width fluctuates, causing the parent container to resize. I want the parent contain ...

htmlcss

Creating a layout with two divs displayed next to each other using CSS

Just when I thought I had it figured out, my two side-by-side divs are not behaving as intended inside the parent div. Why is the orange "Content" div ending up below the navigation bar? Can anyone spot what I did wrong here? Thank you in advance! CSS: ...

css

Refresh a function following modifications to an array (such as exchanging values)

Looking to re-render a function after swapping array values, but the useEffect hook is not triggering it. I need assistance with this as I plan to integrate this code into my main project. Below are the JSX and CSS files attached. In App.js, I am creating ...

javascriptcssreactjsreact-hooks

Is it possible to move a directive within a limited parent element?

Is there a way to limit the movement of an angular.js drag directive within the confines of its parent element? You can see the problem I'm facing in this jsbin: http://jsbin.com/maxife/3/edit?html,css,js,output ...

javascripthtmlcssangularjsangularjs-directive

Updating the Hero Image

Scenario: In my project directory, under Product -> src -> static -> ostatic [ there are two folders named css and images ] -> images -> where all the images can be found. I am using bootstrap and attempting to set a background-image for jumbotron. After ...

cssdjango

Rendering HTML5 and CSS3 on Internet Explorer 8

My coding knowledge is limited, but I am conducting research for our front-end developers. Our goal is to revamp our portal application using CSS 3 and HTML 5 in order to achieve an adaptive layout that can accommodate different browser widths. The curre ...

htmlcssbrowserinternet-explorer-8version

Customize the yellow background color of Safari's autofill feature by following these simple

When I open this image in Safari, this is what I see: https://i.stack.imgur.com/KbyGP.png However, this is the code I have: https://i.stack.imgur.com/4wEf0.png References: How to Remove WebKit's Banana-Yellow Autofill Background Remove forced ye ...

javascripthtmlcsssafari

Ways to move an element beyond specified padding using CSS

In this image below, I have added a 10px padding to the container as it is usually needed. However, for the headings (blue) I do not want any padding. Is there a way to make the heading extend over the padding? I prefer not to give individual padding to e ...

htmlcss