Fast CSS dilemma

Here is a fiddle I created: http://jsfiddle.net/ozzy/WEGMh/

This is how it is supposed to look:

The issue is that the left and right hand divs are not displaying. I have attempted to use z-index, but there must be something obvious that I am missing.

Perhaps my code is not great either...

The concept is to have a flexible container height with fixed width. The header has fixed width and height, the left div has fixed width and flexible height, and the right div should just adapt to the left div's parameters. The footer div has fixed width and height.

Hopefully that clarifies things.

Answer №1

Although the left and right divs are visible, they appear to have no height.

Because they lack content, the divs have no defined height.

By default, a div will take up the full width but not the full height of the available space.

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

Struggling to line up text boxes with CSS borders within div elements in a neat row

Here is the HTML snippet with a div containing four sub divs with a class named 'city' that I'm trying to align in one row using Bootstrap. I have included my stylesheet below the HTML, and despite spending over an hour adjusting margins, I ...

Troubleshooting: Unable to get the Bootstrap active navigation code to function

I've been struggling to make this code work in order to add the active class to my navigation list item, but it just won't cooperate. Home <li id="orange"> <a href="hotels.php"><span class="glyphicon glyphico ...

Take away the Link Navigation feature for dates on the calendar

I need to eliminate the link associated with the date shown in a SharePoint calendar list. Despite using developer's tools, I cannot locate an anchor tag to disable using CSS. My goal is to accomplish this task solely through CSS. Here is the code sn ...

Flask does not display images in CSS files

Starting with the frontend (HTML, CSS) of my project, I then proceeded to create a Flask file with the following code: from flask import Flask, render_template app = Flask(__name__) @app.route("/", methods=["GET"]) def index(): return render_templa ...

Button to return to top and footer placement

I recently added a "back-to-top" button to my website. Here is the HTML: <div class="scroll-top scroll-is-not-visible"> <a href="#0"><i class="fa fa-angle-up" aria-hidden="true"></i></a> </div> <footer class="site ...

Arranging an image next to a text input in Bootstrap 5: A step-by-step guide

I want to align a magnifying glass image next to a text input on the left side. However, it is currently displaying above the text input. How can I make sure they are positioned side-by-side using Bootstrap 5? <link rel="stylesheet" href="https://c ...

There seems to be a problem with the while loop in the PHP code while creating a forum

Encountered a new error that says: You have an error in your SQL syntax; check the manual that corresponds to your MySQL server version for the right syntax to use near ') AND type='o'' at line 1. Can someone assist in fixing this issu ...

Troubleshooting: Unresponsive behavior of CSS table

I have been working on implementing responsive CSS for a table. I recently came across a helpful tutorial on http://css-tricks.com/responsive-data-tables/ (How to create a responsive table using CSS). While the tutorial worked fine on some sample pages, I ...

In Safari, the iPhone navigation bar is covering the buttons

My unique style controls the navigation buttons on the lower part of the screen, but unfortunately, the buttons are overlapping as shown in the screenshot. #navbar_mobile_extra_links { position: fixed; left: 0; right: 0; bottom: 0; back ...

I'm having trouble with aligning my input checkbox within the form

My form includes multiple checkboxes, but I am having trouble aligning them properly. <!-- Multiple Checkboxes (inline) --> <div class="form-row"> <label class="chkdonar" for="donarchkform-0">Yes, I want to donate to AMIAB</label> ...

Alter the button's color seamlessly while staying on the same page

I have implemented a feature that allows me to change the category of photos without having to leave the page and it works perfectly. My next goal is to create a button system where the pre-defined category of a photo is indicated by a button with a green ...

What is the best way to adjust a div's height to fill the remaining space of the viewport after the header's height

Is there a way to create a hero section that fills 100vh minus the height of the header, especially when the height of the header is not fixed? I initially used CSS with a height property set to calc(100vh - 310px), where 310px represents the height of t ...

Simple Selection Panel

Looking to include a simple dropdown menu with 5 choices. Once a selection is made, an answer corresponding to that choice will appear in another field next to it. For example: Choosing France from the dropdown would display 'Paris' in the adjac ...

Instructions on setting a photo as a background image using a text-based model

I'm a beginner with Angular so I may have a simple question. I am using an image from the Google API, which is not a URL. How can I set this image as the background-image in a CSS tag that only accepts URIs? Thank you! ...

What is the best way to create an element that is clickable but transparent in appearance?

Is there a way to achieve an inset box shadow on elements like an iframe without blocking clicks on the element itself? The common strategy of overlaying a div over the iframe achieves the desired visual effect but unfortunately hinders interaction with th ...

If the div element contains an <li> element, jQuery animate() will not function properly

Initially, my div was animating perfectly. However, when I inserted a list inside the divs, the animation only became visible once it reached the bottom of the height of the lists. To trigger the animation, click on the Products option in the top menu. T ...

Altering the style of the underline for a hyperlink

I'm looking to customize the underline style when hovering over a link. Specifically, I want to change the color and size of the underlined link. const useStyles = makeStyles(theme => ({ button: { marginLeft: theme.spacing(2), }, }) ...

Achieving a consistent border-radius effect during hover transitions

I designed a div that initially displays an image, but upon hovering over it, a second div with text and a solid colored background appears to mask the original content. To see what I'm talking about, check out my jsfiddle: 'Mask on Hover' ...

Sketch a variety of numerical values in a circular formation

I was working on a number circle using the below fiddle, but I need it to always start from 0 at the top. How can I achieve this? Additionally, I would like to connect the numbers from the inner circle border to the number with a dotted line. How can I dr ...

Utilize CSS styling for elements persistently, even following a postback event triggered by

In my asp.net app, I have multiple hrefs with dynamic Ids that all share the same CssClass called MyClass. I am looking to hide these buttons based on a certain condition. Initially, I used the .ready function: $(document).ready(function() { if(condit ...