How to nest a div in a div and keep even padding between the 2

HTML & CSS
1

New coder here. I am trying to do something which I think should be simple but cannot do it.

I want 1 box to be inside of another, and always keep a 5px padding (spacing) between the borders.

Since I want it to be responsive (without using flexbox) I have set the inner box width to 100%. From my understanding though, the width of 100% becomes problematic when trying to achieve what I am trying to do.

When I place a box inside a box, the right and bottom edge of the inner box run up against the edges of the outer boxs (and in some cases goes outside of).

When I add 5px padding, then this only affects the top and left side.

As an experiment, I added a right padding of 10px, and it apppears to work and keeps the padding there when the screen window width is dragged in to a smaller width. I feel that this is not the proper way to do this though.

Could someone please advise if there is a better way to do this.

<html>
	<style>
		#border1 {
			background-color: white;
			height: 200px;
			max-width: 600px;
			text-align: center;
			border: 3px solid green;
			margin: auto;
			display: block;
			padding: 5px;
			padding-right:10px;
		} 

		#border2 {
			background-color: yellow;
			height: 100%;
			width: 100%;
			text-align: center;
			border: 3px solid red;
			margin: auto;
			display: inline-block;
		} 
	</style>
	
	<div id = "border1"><div id = "border2"></div></div>
</html>
2

Don’t ask me to explain why - just add this to the style:

html {
  box-sizing: border-box;
  }
  *, *::before, *::after {
    box-sizing: inherit;
  }

Edit:
Minor tweaks removing redundant script:


<!DOCTYPE HTML>
<html lang="en">
<head>
<title> asdf </title>
<style>
html {
box-sizing: border-box;
}
  *, *::before, *::after {
  box-sizing: inherit;
}    
#border1 {
  background-color: white;
  height: 200px;
  max-width: 600px;
  border: 3px solid green;
  margin:  auto;
  /* display: block;
  text-align: center;
  padding: 5px;
  padding-right:10px;
  */
  padding: 5px;
} 

#border2 {
  background-color: yellow;
  height: 100%; 
  text-align: center;
  border: 3px solid red;
  /* 
  width: 100%;
  margin: auto; 
  display: inline-block; */
} 
</style>

</head>
<body>

  <div id = "border1">
    <div id = "border2">
      
    </div>
  </div>

</body>
</html>
1 Like
3

Assuming you are centring something in the middle of that box then flexbox could do this quite nicely.

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Untitled Document</title>
<style>
html {
 box-sizing: border-box;
}
*, *::before, *::after {
  box-sizing: inherit;
}    
.border1 {
  background: white;
  height: 200px;
  max-width: 600px;
  border: 3px solid green;
  margin:  auto;
  display:flex;
  padding: 5px;
} 
.border2 {
  background: yellow;
  border: 3px solid red;
  flex:1 0 0;
  display:flex;
  justify-content:center;
  align-items:center;
  flex-direction:column
} 
</style>
</head>

<body>
 
  <div class="border1">
    <div class="border2"><p>Centred</p></div>
  </div>
  
</body>
</html>.

Avoid using ids for everything as they carry too much weight. Uses simple classes to make the page easier to control.

1 Like
4

OP specified (without using flexbox)

1 Like
5

Whoops missed that :slight_smile:

Though the question remains why ? It’s like trying to do something with one arm tied behind your back :slight_smile:

3 Likes
6

Thank you guys for helping me with this.

It is very important to me that my site works on all devices and browsers – even ones that are a little bit out of date.

When I took a css class over 1 year ago – at that time flexbox was not supported by IE. I see now that IE 11 supports flexbox. I really like the box sizing approach as it looks like it has been supported by IE since version 8.

7

A little bit out of date is ok and IE11 supports most of flexbox but can be buggy in places. I wouldn’t venture any further back than ie11 though and of course even edge is going to change to be WebKit based in the future. If you venture much further back then you would need to add in support for html5 and media queries and so on …

You should not however really support browsers that the vendors no longer support themselves. This indeed was the main trigger for the spate of ransomeware attacks last year. The attacks primarily targeted vulnerabilities in browsers that users had not updated.

I used to support old browsers but I have had a rethink in the last five years and feel that we should not encourage users to use out of date browsers especially by using inappropriate coding techniques to support them.

It’s a choice you have to make but I think that encouraging users to use out of date browsers is no longer wise.

It was actually the default model in ie5!!! However it was not to standards and ie6 defaulted to the standards box model but only when triggered with the correct doctype.

These days I use the border box model on all my projects as it is easier to manage.

You say you want your element responsive but why have you fixed the height? You would seldom fix the height of an element if it is to contain content like text etc?

1 Like
8

I forgot to mention that you should make sure you have the correct doctype and the correct viewport meta tag or you may lose 50% of your audience rather than the 1 or 2 % of older browsers you are worried about :slight_smile:

9

I’m not completely certain what you would determine is the “correct” doctype and viewport tags, but here is what I am using – are these sufficient?

<!DOCTYPE HTML>
<html>
<head>
    <title>My Page Title</title> 
    <meta content="text/html; charset=ISO-8859-1" http-equiv="Content-Type" />
    <meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0">
</head>
10

Yes those are fine. :slight_smile:

12

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.