The width of a div element seems to mimic the width of the entire page inexplic

There is a page containing various div elements. HTML:

<div class="utilitiesHeader">
    <div id="utilitiesLogo"></div>
    <div id="utilitiesFIO">Name of user</div>
</div>
<div class="utilitiesContent">
    <div class="utilitiesCommon">Common</div>
    <div class="utilitiesArchive">Archive</div>
    <div class="utilitiesReadings">Readings</div>
</div>

CSS:

div#utilitiesLogo {
    width: 226px;
    height: 101px;
    background: url("../images/feelinhome-logo.png") no-repeat 0 0;
    margin: 0;
}
div#utilitiesFIO {
    float:right;
    font-size: 30px;
}
div.utilitiesHeader {
    display:inline;
}

If you observe the example provided, you may notice that for some reason the Name div is displayed on a separate line and the logo div extends the entire width of the page despite having a specified width. What could be causing this issue?

htmlcss

Answer №1

The issue arises from the use of display:inline for the utilitiesHeader element, which does not support width properties for inline elements. As a result, the utilitiesHeader fails to contain elements based on the width of the utilitiesLogo (which has a fixed width).

For more information on the width property, refer to the specification:

Applies to: all elements but non-replaced inline elements, table rows, and row groups

To resolve this issue, switch the display property to inline-block for the utilitiesHeader.

View FIDDLE Example

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

Remember a MySQL query using JavaScript

For quite some time, I've been on a quest to unveil the solution to this issue that seems relatively straightforward, yet continues to elude me. The crux of the matter is my desire to "recall" a functional mysql query. With an HTML button and a span ...

javascriptphphtmlmysql

Include a new row in the form that contains textareas using PHP

I'm trying to add a new row to my form, but I'm facing challenges. When I click the add button, nothing happens. If I change the tag to , then I am able to add a row, but it looks messy and doesn't seem correct to me. Here is my JavaScript ...

javascriptphphtmlformsrow

Having trouble with updating your website asynchronously through code? In need of a detailed explanation?

Here are two Javascript functions that are used to call a python file in order to update an HTML page. The first function works perfectly fine, but the second one seems to be malfunctioning without throwing any errors. function button(key) { var xhttp ...

javascriptpythonhtmlcssajax

Can you identify the attribute used for marking up an HTML code tag?

While examining a website's code to understand how they styled a specific section of their page, I came across the following snippet: <code markup="tt"> I thoroughly checked for any other references to this particular markup attribute ...

htmlcss

I receive an [object HTMLCollection] as the output

I am currently working on recreating a login page and I want it so that when the button is clicked, it displays the name you entered, but instead, it returns [object HTMLCollection]. My expectation was to have the name displayed as entered. var nombre ...

javascripthtmlcssbutton

What is causing a scroll bar to appear at the bottom even though my content is not overflowing?

Here is the situation I am trying to describe: http://jsfiddle.net/CvgFS/1/ My English skills are not strong enough to explain it clearly, but I hope you can see why I am getting a scroll bar even though the content fits the page. This issue is happening o ...

htmlcss

ajax refresh isn't functioning

I need help with updating a combobox with the correct value when a button is clicked. The requirement is that after the user selects a year from the combobox, enters a day in the 'HolidayYearAllocation' input box, and clicks the button, the &apo ...

htmlasp.netajaxcomboboxupdatepanel

Having issues with Firefox rendering JavaScript and CSS correctly

I'm trying to figure out if it's the row class from Bootstrap that's causing issues, or if there's a problem with my JS/CSS not loading properly in Firefox. It seems to be working fine in Chrome and Safari. Any ideas on what could be go ...

javascripthtmlcsstwitter-bootstrap

Incorporate an external hyperlink into a tabPanel or navbarMenu within an R Shiny application

I am struggling with adding external hyperlinks to the tabs and dropdowns in a navbar setup using Shiny (implemented with bootstrapPage). While I have come across solutions for linking to other tabs within a Shiny app, my goal is to link to an external web ...

htmlrshiny

Encountering a 404 error while trying to use the autolinker

I have been struggling with this issue for the past day and can't seem to solve it on my own. Essentially, I am attempting to use Autolinker.js to automatically convert URLs into clickable hyperlinks in my chat application. However, every time I try ...

javascripthtmlnode.js

Contrast in spacing: comparing display block versus inline-block

Today, I stumbled upon something quite intriguing that has left me puzzled. Consider the following HTML: <div class="a"><div class="b"></div></div> And CSS: .a { background: blue; } .b { display:inline-block; height ...

htmlcsslayout

Make a portion of the title come alive on hover

Looking to add animation to a title that consists of two parts: "HARD" and "WARE", with the second part having a more transparent color. When hovering over the "HARD" word, the colors reverse correctly. However, when hovering over the "WARE" word, only on ...

htmlcsscss-selectors

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

Utilizing JavaScript for enhancing the appearance of code within a pre element

Is there a way to dynamically highlight the code inside a pre element using vanilla JavaScript instead of JQuery? I'm looking for a solution that colors each tag-open and tag-close differently, displays tag values in another color, and attributes with ...

javascripthtmlpre

What is the best way to interact with all the rendered DOM elements in React that were created using the map method

return <div> <div >{'Audios'}</div> {urls.map(url => <div > <audio controls src={url} ref={(element) => this.audioRefs.push(element)} /> </div>)} </div>; I a ...

javascripthtmlreactjsfrontend

How can we assign priority to the child element for detection by the "mouseover" event in jQuery?

Can you help me figure out how to make the "mouseover" event prioritize detecting the child element over its parent? This is the jQuery code I've been using: <script> $(function() { $("li").mouseover(function(event){ $('#log&a ...

javascriptjqueryhtmldom

Setting the z-index for a JavaScript plugin

I need help with embedding the LinkedIn plugin into a website that has stacked images using z-index for layout. I have tried assigning the plugin to a CSS class with a z-index and position properties, but it hasn't worked as expected. Can anyone sugge ...

javascripthtmlcsspluginsz-index

What steps should be taken to empty a table before adding new rows to it?

After conducting thorough research, I am still unable to find a solution to my issue. I have a table that I am populating using JQuery and while it populates properly, I cannot seem to clear it before populating it again. Below is the HTML code: $("#sea ...

jqueryhtmlhtml-table

Retrieve information from an HTML form, make updates to the database, and exhibit the data in a table on the current page with the help

I'm in need of some assistance. I have a small application that utilizes a Java Servlet and an HTML form. The user enters data into the HTML form, and upon clicking the submit button, the Java servlet retrieves this data in its post method and stores ...

javahtmlajaxservletshtml-table

How to turn off and on all elements within a Div tag

Is there a way to disable all elements within a Div tag? I've managed to disable input types successfully, but I'm struggling with links. I attempted the solution provided here, but it didn't work. Here's the code snippet that worked f ...

javascriptjqueryhtmlasp.net-mvc