Chrome Experiencing Issues with Nested Divs

Having an issue with nested divs in Chrome

<div id="wrapper"> 
   <div id="content">
   </div>
</div>

The wrapper div acts as a bordered container, forming a box. In Safari and Firefox, the content sits inside this box consistently. However, in Chrome, it seems to be a hit or miss - sometimes the content is within the box, while other times it protrudes out of it. I am unsure why this inconsistency is happening, as it works fine in Safari and Firefox. Has anyone else encountered this problem?

Thank you

#wrapper{
   display: block;
   position: absolute;
   top: 5%;
   left: 0;
   margin: 0;
   padding: 0;
   width: 100%;
   height: 90%;
   background-color: #efefef;
}

#content{
   height:78px;
   width:100%;
   border-bottom:solid 1px gray;
   font-weight:1000;
   margin-left:0px !important;
   background-color:white;
}

Answer №1

Did you test out the box-sizing: border-box; property on the #wrapper element?

Answer №2

Using position: absolute; will take the element out of the normal flow on the page. Consider removing absolute positioning if possible.

Remember that when using height percentages, the top-level element must be set to 100%.

body,html {
    width: 100%;
    height: 100%;
}

Elements in the body and HTML will inherit properties from the Window object. Subsequent elements on the page will inherit from either body or html.

See the complete code below:

body, html {
    width: 100%;
    height: 100%;
}

#wrapper{
    display: block;
    margin: 0;
    padding: 0;
    width: 100%;
    height: 90%;
    background-color: #efefef;
}

#content{
    height: 78px;
    width: 100%;
    border-bottom: solid 1px gray;
    font-weight: 1000;
    margin-left: 0px !important;
    background-color: white;
}

http://jsfiddle.net/twqxoc0j/

When using absolute positioning, keep in mind that these elements are taken out of the regular flow of elements on the page. They do not interact with other elements and are not affected by them. It's important to carefully consider the implications of using absolute positioning as it can restrict the flexibility of your site if overused or used incorrectly.

Source: http://css-tricks.com/absolute-relative-fixed-positioining-how-do-they-differ/

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

The Spring Boot REST application is unexpectedly returning HTML instead of JSON, causing confusion for the Angular application which is unable to recognize the

I am struggling with my Spring Boot application that was generated using . I am having difficulty getting it to return JSON instead of HTML. Here is a snippet of the code: [@CrossOrigin(origins="http://localhost:4200",maxAge=3600) @RestController @Request ...

Ensuring a div remains perfectly centered

Currently, I am new to HTML and still in the process of learning. I am facing a challenge in centering a button within a div, and I have been using margins to position it. While this method works well when the window is fullscreen, the button's positi ...

Turning JavaScript Object into a Decimal Value

I've been working on an application where I want to be able to add up the columns of an HTML table. I managed to add inputs to the table successfully, but when trying to sum up the columns, I keep getting a "NaN" error. /* Function for calculating ...

Comparison of Ajax and submit: Why am I not receiving identical responses?

Utilizing Ajax for submission and all global variables ending in box. Note that the initialization code is functioning correctly. function begin() { if (confirm("Proceed at your own risk as all consequences are yours!!")) { var usernameNa ...

Using jQuery, you can create and add an element to the page when a user clicks

Currently, my webpage contains numerous anchor tags that link to various video files, along with a single div element: <a href="http://www.example.com/example-1.mkv" class="video">1</a> <a href="http://www.example.com/example-2.mkv" class=" ...

Is it possible to display images in PHP when the value matches the specified string?

Is there a faster and more efficient way to display one or multiple images if $value == $string? For instance, let's say I have a cell containing the string 'r o g'. If a user inputs ro, it should output <img src="red.gif"> and <im ...

Implementing three identical dropdown menus using jQuery and HTML on a single webpage

It seems like I've tangled myself up in a web of confusion. I'm trying to have three identical dropdowns on a single page, each displaying clocks from different cities (so users can view multiple clocks simultaneously). However, whenever I update ...

The navbar at the top of the page remains in place and obscures

I am facing an issue where my fixed navbar code breaks up into individual boxes for the links when I try to scroll, covering the page title. How can I resolve this? My code is too long to post directly here, so it's available on pastebin at the follow ...

Customizing the appearance of columns in an antd table

Below is the table column configuration I am working with, where notes are rendered using a custom function: fieldDefs: (results, isJsonData) => [ { title: 'Notes', name: 'notesHTML', table: { render: SectionNotes, sear ...

Calculate the total value of an object using Typescript

Here is the data that I have: [Products, Products, Products, Products] 0: Products {product_id: "1", Product_type_id: "11", Subtotal:450, …} 1: Products {product_id: "2", Product_type_id: "22", Subtotal:550, …} 2: Products {product_id: ...

Optimize Material-UI input fields to occupy the entire toolbar

I'm having trouble getting the material-ui app bar example to work as I want. I've created a CodeSandbox example based on the Material-UI website. My Goal: My goal is to make the search field expand fully to the right side of the app bar, regar ...

Using Angular, you can easily add a <div> dynamically to all elements that share a class

In order to implement a solution, I am tasked with adding a new div element with the class '.cart-list-value .delete-product', which will contain a background image, to all elements that have the class .cart-list-item. Although I successfully man ...

Having issues with Inline-Block functionality?

I am facing alignment issues with an image and a container placed next to each other. The rest of my website uses inline-block without any problems. If someone could provide guidance on how to resolve this, it would be greatly appreciated. Below is the s ...

Is there a way to link the scrolling of two ag-grid data tables together for synchronized movement?

I have integrated ag-grid into my Angular project and I am looking to display two data tables (ag-grid) stacked on top of each other. Both data tables should scroll together, meaning when I scroll in table 1 or table 2, the content of both tables should m ...

Switching Unicode icon when element is clicked

My form has two inputs - one for text input and the other for submitting, like a button. I have added an icon to the submit button and want it to change when clicked. <input class="searchBtn" id="submit" name="submit" type="submit" value="&#xf002"& ...

Safari displays an inexplicable gray border surrounding the <img/> element, despite the actual presence of the image

https://i.stack.imgur.com/4QR52.png There is an unexpected gray border visible around the dropdown image, as seen above. This occurrence has perplexed me because, according to several other queries, this problem arises when the image's src cannot be ...

Is the concept of WebSockets simply adding unnecessary complexity?

Let me know if I'm mistaken... The implementation of firewalls was initially meant to limit internet access for Corporate employees (and indirectly safeguard home users). Now, with the introduction of WebSockets, applications are able to tunnel any ...

The argument 'TabsCtrl1' is throwing an error as it is not recognized as a valid function and is showing as

I have encountered a problem with my controller, and I am seeing the following error message: Error: [ng:areq] Argument 'TabsCtrl1' is not a function, got undefined http://errors.angularjs.org/1.3.0-beta.11/ng/areq?p0=TabsCtrl1&p1=not%20a%20 ...

Concealed Separator for Text Elements in HTML

I am in search of a method to distinguish certain specific strings within HTML code. Although I can recognize the desired strings, they may also appear as part of longer strings throughout the document. In order to locate them, I currently insert a special ...

Exploring Problems with Implementing the Jquery .click() Function on a Class

My goal is to create a simple JQuery code that triggers a pop-up message saying hello when any element of the specified class is clicked. Here's what I've tried: $(document).ready(function(){ $(".thumb_radio").click(function(){ aler ...