The div with full height vanishes entirely

I'm currently working on a liquid web design that incorporates a shadow effect on the outside of the content box.

You can view the design here:

To achieve this effect, I have divided the content into one containing div and the shadows into a separate div. Everything works perfectly until the window is resized below the specified min-width values.

The shadows are within a div container with a set width and height of 100%, and a minimum width of 882px (700px for content plus two shadows at 91px each). The left and right shadows are in individual divs with a width of 10% (min-width 91px), while the middle "spacer" div has a width of 80% (min-width 700px). All these divs are set to float left to create the appearance of separate columns. However, when you click the link, you'll notice that the right shadow div disappears when the window size is reduced beyond the min-width limits. I've tried various overflow parameters, clearfix, as well as playing around with absolute positioning, but the issue persists. This method appears to be the most straightforward, despite the disappearing div problem. Any advice would be greatly appreciated.

htmlcssoverflowclearfix

Answer №1

There is no need to use separate div elements for shadows. As mentioned by pol, you can achieve this using the CSS box-shadow property. Here is an example:

html,
body {
    height: 100%;
}
.container {
    width: 100%;
    height: 100%;
    background-color: lightgray;
}
.inside {
    width: 66%;
    height: 100%;
    margin: 0 auto;
    background-color: lightgray;
    box-shadow: 12px 0 15px -4px gray, -12px 0 8px -4px gray;
}
<div class="container">
    <div class="inside"></div>
</div>

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

bootstrap 4 grid of responsive cards

I am attempting to replicate the layout of CodePen's dashboard or, if you do not have an account, you can view CodePen's home screen. My goal is to create a dynamic list of cards that are responsive and adjust the number of cards displayed in a ...

htmlcssbootstrap-4responsive

Encountering a 404 error in Next.js when deploying static output without the .html extension

My website is built using Next.js and is deployed statically through FileZilla. When accessing the root of my website, I do not need to add a .html extension: https://www.mywebsite.com However, when trying to access any other page on the server, I receiv ...

htmlnext.jswebserverstatic-pages

Attempting to attach a group of HTML elements to a specific div element on a web page using jQuery, however, the elements are not appearing as expected

I can't seem to get an array of HTML elements added to a div element on my page. Even though the console.log shows that the array is successfully added to the div element, it still doesn't display on the page. Here's the code I'm workin ...

javascriptjqueryhtmlarrays

css rules are not applied if the element is dynamically added using javascript

I'm encountering an issue with my code that inserts icons into a div with the ID of "editor". When I try to add a <select> element to the div with the ID of "drug_tool", the CSS styling rules for it are being ignored. How can I resolve this prob ...

javascriptjqueryhtmlcss

Sending PHP data to an email composed in HTML

When sending an HTML email to my users using inlined CSS mixed with the HTML, I encounter a problem. How can I pass my variables from PHP to the HTML and use them accordingly when sending the email? For example, the email is supposed to contain the user&ap ...

phphtmlcss

A rapid tool for efficient HTML parsing based on libxml

Hey there, I've encountered an error message that's a bit puzzling - it says "Extra argument 'endocing' in call", even though it's within the method so technically not an extra argument. Any idea why this is happening and how I can ...

htmlxcodeparsingswiftios8

Adjust the position of the xAxis on the Highcharts chart to move it downward or

I recently inherited some code from the previous developer that uses highcharts.js (v3.0.1). I'm having trouble with the xAxis appearing within the graph itself (see screenshot). Despite my efforts to recreate this issue in jsfiddle, I can't seem ...

javascripthtmlcsshighcharts

What is the correct way to apply a concatenated element id when using the .click() function in

Having an issue with assigning buttons to input boxes in a loop. When using concatenated element IDs with the .click() method, the buttons won't click for some reason. The following code works: document.getElementById("streamInput1") .addEventLi ...

javascriptjqueryhtml

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

Using @media queries for mobile and desktop: preventing desktop from displaying mobile styles

I have been working on redesigning a website for mobile using only CSS. I set up media queries to deliver the appropriate CSS for desktop and mobile devices. However, I noticed that when resizing the browser to under 855 pixels, some of the mobile CSS is ...

htmlcssmobilemedia

Rows that intersect - Challenging to articulate - Bootstrap 3

I'm at a loss for words when trying to describe what I'm attempting without simply showing you a picture: The issue I'm encountering is that the search box's height isn't fixed, and I might want to include other elements on the le ...

htmlcsstwitter-bootstrap-3

What other options can be considered instead of Selenium?

Which web UI automation frameworks are currently available? I came across an older question about automation tools, but technology has evolved since then. I'm curious if there are newer and better options out there now. In my search, I discovered Ge ...

javahtmlrubyseleniumautomation

Transform the text upon hovering over the image, with the text positioned separate from the image

I'm looking for a solution where hovering over images in a grid area will change the text on the left side of the screen to display a predefined description of that image. I've been working on this problem for hours and would appreciate any help. ...

htmlcss

The datepicker widget only shows days and not months

Hey there! I'm having an issue with the datepicker feature. Instead of just showing the months, it's displaying both the days and months like this: https://i.sstatic.net/RkJcO.png But I want it to look like this: https://i.sstatic.net/ZKpGr.pn ...

javascriptjqueryhtml

Customizable form fields in AngularJS

Consider the scenario of the form below: First Name: string Last Name: string Married: checkbox % Display the following once the checkbox is selected % Partner First Name: Partner Last Name: [Submit] How can a form with optional fields be created in Angu ...

javascripthtmlangularjsforms

What are some ways to create a responsive design using Bootstrap?

I am currently enrolled in an online course on Bootstrap through Udemy. The issue I'm facing is that the course was created back in 2018, and as I follow along, many elements are not responsive. Text sizes are not displaying as assigned, and fonts are ...

htmlcssbootstrap-4

`Dynamic assortment displaying menu`

I am currently developing a compact application that requires a list of 5 items: Name Address City Country Zipcode Whenever a user clicks on any of these items, they should be redirected to another page where that specific item is highlighted. ...

javascripthtmlcss

What is the mechanism behind the functioning of "3D Meninas" (CSS/Animation)?

Recently stumbled upon a fascinating website called "3D Meninas", showcasing an impressive 3D animation effect. Upon examining the HTML code, I noticed there was no mention of any <script> tags or events, leading me to believe that it operates solely ...

htmlcssanimation3d

The outcome of jQuery's division and multiplication is not correct

When a user inputs data into the form fields, the other fields should be automatically filled with the calculated values. However, it appears that jQuery is treating the input values as strings instead of numbers, leading to incorrect calculations. I&apos ...

htmljquery

Check if the browser is not Google Chrome before running the code in JavaScript

Related Search: Finding a secure way to detect Google Chrome using Javascript? Using Javascript to identify Google Chrome and apply CSS changes Is there a JavaScript statement that can be used to execute code only when the user is not using Google ...

javascriptjqueryhtmlcssgoogle-chrome