The Element should take up the entire page with the exception of a 20px margin

Question

The Element should take up the entire page with the exception of a 20px margin

I am struggling to create an element that covers the entire page except for a 20px margin on all sides. I have tried implementing a solution using this code, which works in webkit browsers and Firefox but seems to have issues with Internet Explorer (10) and Opera :-( . Does anyone have any suggestions on how to fix this problem?

HTML

<div id="first">
    <div id="second">
        Hello world!
    </div>
</div>

CSS

head, body
{
    width: 100%;
    height: 100%;
}

body
{
    position: absolute;
    margin: 0;
    background-color: blue;
    display: table;
}

#first
{
    display: table-cell;
    height: 100%;
    width: 100%;
    padding: 20px;
}

#second
{
    height: 100%;
    width: 100%;
    background-color: white;
}

css

Answer 1

Answer №1

Here is a suggestion:

#first {
    position: absolute;
    top: 20px;
    right: 20px;
    bottom: 20px;
    left: 20px;
}

This code will position the element 20px away from each side. I recommend avoiding the use of display: table-cell; as it requires additional parent elements with specific display properties.

It seems like you are trying to replicate table-based layouts. If you provide more details about the overall issue you're facing, you may receive more helpful responses.

Answer 2

Here is a suggestion:

#first {
    position: absolute;
    top: 20px;
    right: 20px;
    bottom: 20px;
    left: 20px;
}

This code will position the element 20px away from each side. I recommend avoiding the use of display: table-cell; as it requires additional parent elements with specific display properties.

It seems like you are trying to replicate table-based layouts. If you provide more details about the overall issue you're facing, you may receive more helpful responses.

Answer 3

Answer №2

Consider implementing a solution similar to the following:

http://jsfiddle.net/cyHmD/

Avoid using position:absolute and display:table on the body element - these properties should be left unchanged since the body serves as the foundation for the entire site. Instead, consider using position:relative on the body tag if necessary. With box-sizing, the browser box model calculation is altered to ensure that percentages are calculated correctly without exceeding 100% width.

This approach is compatible with IE7 and onwards.

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

body {
    background-color: blue;
}

#first
{
    position:absolute;
    width:100%;
    height:100%;
    padding:20px;
    -webkit-box-sizing:border-box;
    -moz-box-sizing:border-box;
    box-sizing:border-box;
}

#second
{
    height: 100%;
    width: 100%;
    background-color: white;
}

Answer 4

Consider implementing a solution similar to the following:

http://jsfiddle.net/cyHmD/

Avoid using position:absolute and display:table on the body element - these properties should be left unchanged since the body serves as the foundation for the entire site. Instead, consider using position:relative on the body tag if necessary. With box-sizing, the browser box model calculation is altered to ensure that percentages are calculated correctly without exceeding 100% width.

This approach is compatible with IE7 and onwards.

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

body {
    background-color: blue;
}

#first
{
    position:absolute;
    width:100%;
    height:100%;
    padding:20px;
    -webkit-box-sizing:border-box;
    -moz-box-sizing:border-box;
    box-sizing:border-box;
}

#second
{
    height: 100%;
    width: 100%;
    background-color: white;
}

Answer 5

Answer №3

What do you think of this solution? Just switch out the required margin with a border:

#second
{
    display: inline-block;
    height: 50%;
    width: 50%;
    border: 10px dashed green;
    background-color: lightgray;
}

Answer 6

What do you think of this solution? Just switch out the required margin with a border:

#second
{
    display: inline-block;
    height: 50%;
    width: 50%;
    border: 10px dashed green;
    background-color: lightgray;
}

The Element should take up the entire page with the exception of a 20px margin

Answer №1

Answer №2

Answer №3

Similar questions

Establish the height of the root to be the same as the height

Conceal an element along with its space, then signal the application to show alternative content using React

problem with the picture and wrapper expanding to fill the entire width of the screen

Adjust the height of the second column in Bootstrap 4 textarea to fill the remaining space

The innovative technique of using pure CSS to secure the bottom edge of a div to the viewport

How come ng-class doesn't apply to a specific class name?

The right column in a relatively positioned layout descends as an element in the left column is revealed

Tips for avoiding content appearing beneath overlapping elements

Combining selected boxes through merging

What is the best way to place text side by side with an image?

Design a captivating Profile Picture form using HTML and CSS styling

Is there a way to click on a button and have its background color change randomly each time?

Unable to retrieve custom CSS and JS files hosted on the server

Headers with a 3 pixel stroke applied

I am looking for a highly specialized jQuery selector that fits my exact requirements

Issue with element alignment using CSS increments

Optimizing web content for iOS Safari with min-height media queries

Adjust the alignment of text to a precise vertical ratio of the image

Button to scroll down

Step-by-step guide to implementing a sticky header while scrolling