Designing a div that fills the entire height and 75% of the body's width

As a newbie to HTML/CSS, I'm struggling with implementing what I described in the title. It was functioning properly earlier, but now it seems like I made a mistake somewhere and it's no longer working.

My code is quite lengthy, but the remaining part is commented out so it doesn't affect anything.

body {
        background-color: red;
        margin: 0em;

    }
    
    #main {
        background-color: #E3E3E3;
        width: 75%;
        margin: auto;
        height: 100%;
    }
    <html>
    <head>
    </head>
    <body>
        <div id="main">
        </div>
    </body>
    <html>

Shouldn't that code create what I want? Setting the height to em/px works fine, but not on percentages, even though they work for the width.

I've set the background color to red for easy differentiation, by the way.

What am I missing here?

htmlcss

Answer №1

To ensure proper layout, it is crucial to set the body width and height to 100% in your CSS.

body {
background-color: blue;
margin: 0;
width: 100%;
height: 100%;
}

#content {
background-color: #F1F1F1;
width: 80%;
margin: auto;
height: 100%;
}

If there is no content or elements within the body of your document, the height may collapse unexpectedly.

Answer №2

Follow these instructions:

#content {
    background-color: #F0F0F0;
    width: 80%;
    margin: auto;
    height: 100%;
    position: relative;
    top: 0; /* Align with the top of the page */
    left: 20%; /* Adjust as necessary for centering */
}

Check out the live demo here

Note: Make sure to specify body dimensions, as emphasized by webdevpro

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

What is the best way to combine this PHP, Javascript, and HTML document together?

My goal is to upload a CSV file exclusively using an HTML form and then save it in an array using PHP and Javascript. I have individual codes that work perfectly when used as separate files. However, when I attempt to combine them into one file, the Javas ...

phpjavascripthtml

"ExceptionThrownByMoveTargetOutOfBounds in Selenium WebDriver for IE9 and Firefox

Having trouble with the FireFox/IE9 driver in Selenium? When using the Actions class and its moveToElement method, I keep encountering a MoveTargetOutOfBoundsException error. Despite trying different solutions like Coordinates, Point, and javascriptexecuto ...

javascriptcssinternet-explorerfirefoxselenium

When generating a docx file with html-docx-js, it lacks the capability to incorporate external CSS class styles into the document

I have been utilizing the html-docx-js module to convert html content into docx format. However, I am facing an issue where most of my CSS is externally loaded and html-docx-js does not apply any styles. Here is a simplified code sample: const html = &ap ...

javascripthtmlcssreactjsdocx

ExpressJS encountered an error due to an unsupported MIME type ('text/html') being used as a stylesheet MIME type

Whenever I start my NodeJS server and enter localhost:8080, I encounter the mentioned error while the page is loading. The head section of my index.html file is provided below. It's puzzling to me why this error is happening, considering that my index ...

javascripthtmlcssnode.jsexpress

Using JavaScript, create a set of buttons within a div element and implement

$(document).ready(function() { $('#b1').click(function() { $('#uch').toggle("slow"); }); $('#b2').click(function() { $('#uch2').toggle("slow"); }) }) Although I'm not a program ...

javascriptjqueryhtmlcssfunction

Tips for successfully sending hidden values along with an ajax file upload form

Currently, I am working on sending some values of hidden input using an ajax form. Despite trying several methods, it seems like the values are not being successfully transmitted. HTML <form id="upload_form" enctype="multipart/form-data" method="post" ...

htmlajaxuploader

Tips for preventing a page from automatically scrolling to the top after submitting a form

Recently, I set up a form where users can input values. The form is set to submit either on change or when the user hits enter, depending on which value they want to update. However, after the values are submitted, the page automatically jumps back to the ...

javascriptphpjqueryhtmlforms

What is the best way for me to make sure the element overflows properly?

How can I make the contents of the <div class="tags> element cause overflow so that one can scroll its contents instead of the element simply extending in height? I've experimented with different combinations of overflow-y: scroll and min- ...

htmlcss

What could be causing my "onChange" function to not work as expected?

export function UpdateData(props){ return( <div> <div className='updateForm'> <form> <div className="form-group"> <label>Your ID:& ...

javascripthtmlreactjs

Adding a unique field to a specifically tailored post type

I'm dealing with a plugin-generated component that showcases articles from a custom post type, each with the class post-id. Unfortunately, I can't modify the plugin's files in the child theme to make changes, so I have to create a custom fun ...

phphtmljquerywordpressadvanced-custom-fields

What is the correct way to utilize href in CSS content property?

Below is the content of a box I have: https://i.sstatic.net/QmG5i.png When the above box is hovered over, it flips to this: https://i.sstatic.net/QsS9t.png This block's HTML code is as follows: <div class='tiles'> <div class= ...

javascriptjqueryhtmlcsshref

The primefaces remoteCommand tag is failing to function properly as it is unable to pass the HTML content of the current page using jQuery to the managed

Utilizing Jquery's .html() method, I am extracting the HTML of my current page in the following manner. <h:outputScript name="js/jquery-1.7.2.js" /> <h:outputScript> function fetchHtml(){ $('#next').click(function(){ ...

javajqueryhtmljsf-2

Transfer data from an HTML form -> call the ajax load() function

My Current HTML Form Situation Currently, I have an HTML form set up with a text input field and a submit button. When the button is clicked, I want the output results to display in only a specific part of the page without refreshing the entire page. Ste ...

javascriptphpjqueryhtmlajax

The initial toggle switch is not visible

https://i.sstatic.net/6BMaY.png After running this code, I'm facing an issue where the first toggle switch is not visible, while the second one displays and functions correctly. I'm unsure about what went wrong in the code. Can someone please as ...

css

PHP code snippets do not interfere with one another's styles

header.php: <div class="purple-box"> <!-- Header content --> </div> <style> .purple-box { /* Styles for purple box in the header */ } </style> footer.php: <div class="purple-box"> <!-- Foo ...

htmlcss

What is the best way to transfer data from an HBS template (HTML) to an Axios POST request?

Just diving into nodejs and express! I want to pass the user input (an email) to axios.post request's data when the "submit" button is clicked. I've verified that hard-coded data in the axios request is functioning correctly. data_email.hbs &l ...

htmlnode.jsexpresshandlebars.jsaxios

What is the proper way to ensure a pull right display appears correctly?

This is the code I am currently using .tag-container.bottom-border.col-middle h1.text-center {{ tag.name }} button.btn.btn-follow.pull-right(ng-hide="hasFollowed" ng-click="tagArticles.followTag()") Follow I am trying to align the tag name in th ...

cssangularjstwitter-bootstrappug

Removing logo from a collapsed navigation bar: [Bootstrap/HTML]

My goal is to ensure that the website logo is prominently displayed in the center of the navigation bar when users are on a desktop. However, I also want the logo to shift to the top right of the screen and the navbar activation button to move to the left ...

htmlcssbootstrap-5

How can I position an element to the bottom right using CSS?

Is there a way to position this element to the bottom right corner? HTML <div class="info player"> <div id="job" style="display:none;"><span>Jobname</span></div> <div i ...

css

Object of Razor enclosed within an anchor tag

Exploring the realm of MVC 4 and Razor is new to me. Currently, I am attempting to create a Gallery with "CSS3 Lightbox". Everything seems fine, but I am encountering difficulties with Razor and links. The issue lies in my understanding of the pre and ne ...

htmlrazorasp.net-mvc-4