Elements contained within the enclosing div will not be visible

I'm currently working on a responsive webpage, and I've encountered a new issue that I can't seem to resolve. I've wrapped three separate divs within a parent div, but for some unknown reason, the child divs are not displaying. Can someone please help me figure out why?

HTML

<!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta charset="UTF-8">
    <link rel="stylesheet" href="css/style.css" type="text/css" />
    <link rel="stylesheet" href="css/responsive.css" type="text/css" />
</head>
<body>
    <div class="header">
        <div class="logo"></div>
        <div class="nav"></div>
        <div class="search"></div>
    </div>
</body>
</html>

CSS

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

.header{
    height: 20%;
    width: 100%;
}

.logo{
    height: 100%;
    width: 100%;
    display: inline;
    background: blue;
}

.nav{
    height: 100%;
    width: 50%;
    display: inline;
    background: green;
}

.search{
    height: 100%;
    width: 30%;
    display: inline;
    background: orange;
}
htmlcss

Answer №1

One approach is to adjust the display property to block and utilize float:

html, body {
    height: 100%;
    width: 100%;
    margin: 0;
}
.header {
    height:20%;
    width:100%;
}
.logo {
    height:100%;
    width:100%;
    display:block;/*Modify to block*/
    background:blue;
    float: left;
}
.nav {
    height:100%;
    width:50%;
    display:block;/*Modify to block*/
    background:green;
    float: left;
}
.search {
    height:100%;
    width:30%;
    display:block;/*Modify to block*/
    background:orange;
    float: left;
}
<div class="header">
    <div class="logo"></div>
    <div class="nav"></div>
    <div class="search"></div>
</div>

Alternatively, a simpler option is to utilize display: inline-block:

html, body {
    height: 100%;
    width: 100%;
    margin: 0;
}
.header {
    height:20%;
    width:100%;
}
.logo {
    height:100%;
    width:100%;
    display: inline-block;/*Modify to inline-block*/
    background:blue;
}
.nav {
    height:100%;
    width:50%;
    display: inline-block;/*Modify to inline-block*/
    background:green;
}
.search {
    height:100%;
    width:30%;
    display: inline-block;/*Modify to inline-block*/
    background:orange;
}
<div class="header">
    <div class="logo"></div>
    <div class="nav"></div>
    <div class="search"></div>
</div>

Both methods are effective.

Answer №2

Concern arises regarding the heights of the elements. Using percentages for height values without a specific reference number may lead to issues.

For instance:

section { height: 800px; }

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

Firefox and IE are unable to make changes to cssRules

To update existing global CSS rules, I access the document.styleSheets property to locate the rule and make modifications. The selector can be modified by accessing the selectorText property. Sample CSS code: <style type="text/css"> .class { ...

javascriptcssinternet-explorerfirefoxcross-browser

Navigating through child elements within a div using JavaScript

I recently coded a div using this snippet... let sidebarBox = document.createElement("div"); sidebarBox.id = "sidebarBox"; ...and then I created a second div like so... let sidebarAd = document.createElement("div"); sidebarAd.className = "sidebarAd"; B ...

javascripthtml

When using the POST method to modify data via an HTML form, the previous values may be

I am currently developing a CRUD system and focusing on the Update functionality. My task involves updating existing user data with new information submitted through an HTML form. At this stage, I am working on retrieving the POST values from the HTML for ...

phphtmlsqlmysqli

I am having trouble with json_encode in my Symfony2 controller

Just starting out with Symfony2 and AngularJS. Trying to use json_encode to display content from my database, but running into issues. Here's my controller: public function catalogonewAction() { $data = $this->getDoctrine()->getManager() ...

phphtmlangularjssymfony

Unable to trigger the show_popup function by clicking the button

Why won't this piece of code function as expected? <script src="web_push.js"></script> <body> <button onclick="show_popup()"> Button </button> </body> The content of web_push.js file is shown below ...

javascripthtmlfunctiondom-events

Dealing with pesky table cell padding issues in Chrome

Struggling with table cell paddings in Chrome because it appears that if a table cell doesn't have pure text, the padding isn't applied. Here's my code: <table> <tr> <th></th> <th ...

cssgoogle-chromefirefoxhtml-tablepadding

Designing a uniquely shaped button

Is there a way to design a button with a slightly irregular shape? The current CSS for my button creates a basic rectangle like this: .btnclass { width:100; height:40; } However, I would like it to have a more unique appearance such as this: ...

css

Managing both clicking and hovering events on a single element, ensuring that the popup modal remains open as long as it is being hovered over

After successfully implementing click and hover functionality on an element, I was able to position the popup relative to the mouse pointer based on a previous solution. However, I am now facing an issue where I want the popup modal to be fixed in a specif ...

javascripthtmlcssangularmouseevent

What is the reason behind Material UI's decision to utilize display flex instead of display grid?

The Grid component implements the grid system. It leverages the Flexbox module in CSS to provide great flexibility. What is the reason behind material UI using display flex instead of display grid? ...

cssmaterial-ui

"Encountering issues with calling a Node.js function upon clicking the button

I'm facing an issue with the button I created to call a node.js server function route getMentions, as it's not executing properly. Here is the code for my button in index.html: <button action="/getMentions" class="btn" id="btn1">Show Ment ...

javascripthtmlnode.js

What is the best way to emphasize specific months and years in an Angular Material datepicker?

I have an array of days, which can be from any year. I am attempting to customize the Angular Material datepicker to highlight specific months and years in the selection views based on the array of days. .html <input [matDatepicker]="picker" ...

htmlcssangulartypescriptmat-datepicker

Tips for showcasing model data dynamically on a webpage using HTML

My model is constantly updating within a function, and I need a way to dynamically display this updated data without the need to refresh the page. How can I achieve this? models.py class MyLongProcess(models.Model): active_uuid = models.UUIDField(&apo ...

javascriptpythonhtmldjangoajax

Tips for applying CSS to background images

Just working with one div here <div id="particles-js" > and in my CSS, I've got this: #particles-js{ width: 100%; height: 100%; background-color: #b61924; background-image: url("../js/image.jpg"); background-size: cover; backg ...

htmlcss

Having trouble loading Yeoman Webapp SASS

Every time I try to build a web application using 'yo webapp', I encounter a 404 Error. GET http://localhost:9000/styles/main.css 404 (Not Found) I removed compass from the project, but that shouldn't be causing the issue, correct? ...

csssasshttp-status-code-404

Missing HTML escape sequences following conversion to a string

The Android test was successfully run using the following code: public static void test() { String text="<html>" + "<head><meta http-equiv=\"Content-Type\" content=\"text/html; charset=us-ascii\" /> ...

javaandroidhtmldom

Track the cursor's movement

Looking to add an animation effect to my website. I want the navbar to follow the cursor within a limited space when hovered over. Check out this example for reference: . Here's the code I have so far, but it's not quite achieving the desired res ...

javascripthtmlcss

Creating a background image with linear gradients in Rails 5

Does anyone know how to implement a background image with linear gradients in CSS? Here is the code snippet I have: .main-bg-back-1{ background:linear-gradient(180deg,#22263f,rgba(33,41,94,.96)),url(../img/app/download-bg.jpg) no-repeat; backgroun ...

htmlcssruby-on-rails

Sending numerous parameters in a form

I'm having an issue with my code where the 'name' variable is POSTed but the 'project' variable is not when submitting through an 'onchange' event. I need both variables to go to session variables on submit. Can anyone sp ...

phphtml

When CSS width:auto expands beyond its intended length

I'm experiencing an issue when I set the width to auto, the div expands to full length rather than adjusting to the width of the inner divs. Here is the HTML code: <div class="vidswraper"> <div> <div class="videoimage"> <img src ...

htmlcss

Creating a choppy movement when switching between content with jQuery

I am experiencing a choppy effect when trying to toggle the content visibility with a button click. Can someone advise if there are any issues in how I have structured the markup? Also, is there a way to achieve a smoother toggle effect? View Code $(do ...

jqueryhtmlbootstrap-4