A step-by-step guide on dividing the screen into three separate sections using div

Is there a way to divide the screen into three sections using divs according to the following criteria: - The main div should fill the entire screen (100%x100%) - Each subsequent sub div should cover the main div (each sub div = 33%)

I attempted to achieve this with the code snippet below:

    <div style="width:100%; height :100%;  background-color:Lime;">
    sss
        <div style="width:100%; height:34%; background-color:Blue;">
        a
        </div>
        <div style="width:100%; height:33%; background-color:Gray;">
        b
        </div>
        <div style="width:100%; height:33%; background-color:Aqua;">
        c
        </div>        
    </div>

Answer №1

To achieve the desired effect, make sure to adjust the height of both body and html to 100%. Refer to this example.

Answer №2

It appears that the primary reason for your confusion lies in the fact that the 'main' div will only expand to fit the content within it based on the style requirements. While it will occupy 100% of its parent element's size, if that size is unspecified, it will only grow to accommodate the minimum space needed by its contents.

I conducted a test in this demo where I enclosed your code in a div with a defined height of 200px, and it seems to function properly (although keep in mind that the inclusion of 'sss' in the main div before the nested divs diminishes the actual 100% coverage).

Answer №3

To eliminate the white margin, adjust the style of the body tag to "margin:0".

Answer №4

To achieve a balanced layout, utilize the display: flex property and specify a width of 33% for each item. This ensures that all three elements take up equal space on the screen.

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 Adjust Image to Fit Within Parent Element

I recently started using bootstrap 4 to create a responsive website for practice. However, I encountered an issue with my image not resizing properly to fit the screen. <html lang="en"> <head> <!-- Required Meta Data --> ...

Ways to dynamically allocate HTML space uniformly

Struggling with CSS and HTML in my Angular application right now. Check out this overview of the setup. My goal is to create a central component (Component 1 in the design) with a button from Component 2. My HTML structure would be something like this: & ...

Guide to adding a tag in front of a text in HTML with Python

Searching for all the text within the html document and wishing to incorporate a span tag that contains additional information about each text as shown below def recursiveChildren(x): if "childGenerator" in dir(x): for child in x.childGenerator( ...

Having trouble updating the icon on my website using FontAwsome

Just a heads up - I'm not familiar with HTML/CSS/JS. This template is pre-made, and I'm simply making some adjustments to it. Hello, I'm currently working on my portfolio website and I want to display my projects based on the programming la ...

Ways to dynamically toggle visibility and hide elements by clicking outside the specified div

I have a div that, when clicked, displays a contact us form. This form toggles between being visible and hidden. How can I make it hide when clicked on another part of the document? Here is the code: function showContactForm(){ var formWidth = &apos ...

How can I modify the data within a PHP-generated table displayed on an HTML page?

As part of my school coursework, I am working on a computing project that involves PHP, HTML, and MySQL to create a web-based application. In the database "cp11641_users," there is a PHP table named "users" which has been displayed in an HTML table using ...

What is the best way to stack several elements on top of each other?

<div class="parent"> <div class="child" id="child-A"> <div class="child" id="child-B"> <div class="child" id="child-C"> </div> The main concept here ...

Tips for expanding the content of a blogger page to fill the entire frame of the page

Check out this page: . Currently, the video on the page does not fill up the entire screen. Any suggestions for a solution? ...

Calculate the frequency of tag_name occurrences on a webpage using Python and Selenium

Greetings! I am currently working with the following code snippet: for each in driver.find_elements_by_xpath(".//*[@id='ip_market" + market + "']/table/tbody") cell = each.find_elements_by_tag_name('td')[0] cell2 = each.find_el ...

How to modify a Python script to print in a specific div element instead of the Chrome console?

Currently conducting preliminary tests on executing a Python script within a Chrome extension. The code provided below is functional, but I am seeking assistance on how to display the value in a div element instead of logging it to the console. Unfortunate ...

unable to modify background color when mouse hovers in CSS

Recently, I implemented this code to style the navigation bar on my website. However, I encountered an issue where the color does not change when hovering over the links. .nav { list-style-type:none; margin:0; padding:0; overflow:hidden; } ...

Unexpected problem discovered with Firefox and JqueryUI - content is misaligned within the dialog box

I seem to be having an issue with a dialog that I recently set up. I've been working with jqueryUi for quite a while so I'm not sure why I can't figure this out. When using Firefox, I noticed that the dialog opens and closes when clicking " ...

Applying CSS styles to a page depending on certain conditions

Currently, I have a page in SharePoint that can function as a pop-up. I am using JavaScript to identify whether it is a pop-up by checking if window.location.search.match("[?&]IsDlg=1"). However, I am struggling to figure out how to insert CSS based on ...

Uniqid in React fails to generate unique IDs

Currently working on creating my first react project and developing a todo list. I have incorporated the uniqid generator into my todo object, but it seems to be returning an empty id rather than a random one. Oddly enough, if I move the todo state outsi ...

Issues with the collapse feature in Bootstrap 5.1.3 accordion

I'm currently utilizing an accordion style to display various sets of information on a website. While all the correct information is being displayed, I am facing an issue where the accordion items are not collapsing as expected. Below is the code snip ...

Tips for designing a multi-level dropdown navbar

I am currently facing an issue with designing a navbar. I am aiming for Multi-Level Dropdowns, but whenever I click on More Services, it automatically closes the main dropdown menu. I have experimented with various approaches, but none of them seem to be ...

Tips for sharing a React component with CSS modules that is compatible with both ES Modules and CommonJs for CSS modules integration

Some frameworks, like Gatsby version 3 and above, import CSS modules as ES modules by default: import { class1, class2 } from 'styles.modules.css' // or import * as styles from 'styles.modules.css' However, other projects, such as Crea ...

Scraping Yahoo Finance Headlines Using the R Programming Language

Seeking assistance with using R to download Yahoo Finance headlines HTML code, select "headlines," and collect them in Excel. Struggling to identify HTML nodes for headlines after downloading the source file to R. To illustrate the issue: source <- "h ...

Trouble expanding Bootstrap Dropdown menu on mobile devices

I am currently facing an issue with a Bootstrap navbar that includes a dropdown menu for selecting courses. On my desktop, everything works perfectly fine when I click on the courses tab. However, when I try to select a course on mobile, nothing happens. ...

Are there any resources available for optimizing performance on iOS and Android browsers?

Being a web developer means considering the Android and iOS web browsers, which have their own rendering engines and limitations in power and memory. This can pose many complications. Therefore, I'm curious if there is a detailed guide available for ...