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

Vertical and floating alignment

Guide on implementing image tag and source in Django template language system

Styling an unordered list with CSS in HTML is a powerful

Is there a solution to move my navbar that is frozen halfway on the screen?

Ensure the child element is selected immediately following an h2 tag using HTML and CSS

Positioning three squares with the same class adjacent to each other by utilizing absolute positioning

The div elements are constantly shifting positions when viewed in Internet Explorer

Having trouble aligning two divs horizontally on the same line in Bootstrap 4

Modifying the dimensions of an image within a :before pseudo-element

Performance issues with the iOs CSS keyboard appearance are causing delays in

Achieving the perfect alignment for expandable divs next to a consistently centered element using CSS

Center text with font awesome symbols

The appearance of online and local websites varies on a single screen and browser

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

What causes discrepancies in CSS design across different browsers?

Insert a new row into a table using tablesorter jQuery

Using Jquery to toggle classes between "display block" and "display none

Webpack is failing to recognize certain CSS files

The table's pagination displays above, thanks to Tailwindcss

The background image on Nuxt.js is not adapting to different screen sizes