0

I'm trying to display three bordered elements with text inside. When the width drops below 1550px (A value that will change in the future) the two floated elements are supposed to unfloat and take up the whole width. When I set them to 100%, however, they are larger than 100% of the body width, and I'm not sure why since it seems like they should be the same width as my main-header class which is also inheriting the body width.

body {
  font-family: 'Fira Mono', monospace;
  background-color: #323232;
  color: #ecebe7;
  width: 70%;
  margin: auto;
  padding: 0;
  text-shadow: 0 .0625rem #807b7a;
  font-size: 1.25rem;
}

h1 {
  font-size: 4.0rem;
  text-shadow: 0 .25rem #807b7a;
  margin-bottom: 20px;
}

h2 {
  font-size: 2.0rem;
  text-shadow: 0 .125rem #807b7a;
  margin: auto;
  padding-bottom: 10px;
}

p {
  letter-spacing: .15rem;
}


/* Class Selectors */

.main-header {
  text-align: center;
  border-bottom: 3px solid #ecebe7;
  border-top: 3px solid #ecebe7;
  border-right: 3px solid #ecebe7;
  border-left: 3px solid #ecebe7;
  box-shadow: 0 3px #807b7a;
  background-color: #212121;
  margin: 30px 0;
}

.empire {
  border-bottom: 3px solid #ecebe7;
  border-top: 3px solid #ecebe7;
  border-right: 3px solid #ecebe7;
  border-left: 3px solid #ecebe7;
  box-shadow: 0 3px #807b7a;
  background-color: #212121;
  margin-bottom: 30px;
  margin-right: 15px;
  padding: 10px;
  width: 45%;
}

.anghardi {
  border-bottom: 3px solid #ecebe7;
  border-top: 3px solid #ecebe7;
  border-right: 3px solid #ecebe7;
  border-left: 3px solid #ecebe7;
  box-shadow: 0 3px #807b7a;
  background-color: #212121;
  margin-bottom: 30px;
  margin-left: 15px;
  padding: 10px;
  width: 45%;
}


/* Floating */

.empire {
  float: left;
}

.anghardi {
  float: right;
}

.clearfix::after {
  content: "";
  clear: both;
  display: table;
}


/* Media Queries */

@media (max-width: 1550px) {
  .empire,
  .anghardi {
    float: none;
    margin: 30px 0;
    width: 100%;
  }
}
<!DOCTYPE html>
<html>

<head>
  <title>Galgoma's War</title>
  <link rel="stylesheet" type="text/css" href="style/styles.css">
  <link href="https://fonts.googleapis.com/css?family=Fira+Mono" rel="stylesheet">
</head>

<body>
  <header id="top" class="main-header">
    <h1>The War of Galgoma</h1>
    <h2>An adventure entirely within the mind of the great Galgoma</h2>
  </header>

  <div class="empire clearfix">
    <h2>The Opal Empire</h2>
    <p>The Opal Empire have mostly tolerated the Anghardi since they showed up two centuries ago on the eastern edge of the nation. Recently, attacks on outer settlements have been continuously reported and the Opal Empire plans on wiping out the marauders
      and claiming the new land as their own. Despite expecting an easy victory, the Empire has had considerable difficulty ridding themselves of the Anghardi and now face a critical battle. If the Anghardi win the three valleys, they may be able to ally
      with other small groups of marauders and become a dangerous foe.</p>
  </div>

  <div class="anghardi clearfix">
    <h2>The Anghardi</h2>
    <p>The Anghardi bravely defend their conquered land. Two centuries ago they made their presence known in the eastern realms and they have held and developed these lands since. They will not give way to the scum from the Empire. Opportunity awaits if
      they can just muster enough strength to reach out to other similar groups and turn on the Empire. This may be their last stand before the army of the Empire gains ground and takes control of the three valleys, a strategic position that will surely
      turn the tide of the war.</p>
  </div>

</body>

</html>

When the width of the browser hits the 1550px max width and the media query is applied, for some reason both the .empire class and the .anghardi class becomes wider than 100% which is my problem.

Roy Scheffers
  • 3,832
  • 11
  • 31
  • 36
Benjamin McKay
  • 178
  • 9

3 Answers3

0

Header has no padding, divs has 10px Both have 100% width and default content-sizing: content-box. Thus, width of their content is same, but border-box width is different.

You may either

  • add padding to header

  • set them both content-sizing: border-box, then box width will be exactly 100% of body(now it's 100%+20px for divs). 45% width will seem strange, you may want to change it to calc(50% - 15px) or whatever.

Dimava
  • 7,654
  • 1
  • 9
  • 24
  • I used your answer because I liked the explanation the most but as the other two answers pointed out the property is box-sizing not content-sizing. You might consider editing for clarity. Thanks for the help! – Benjamin McKay Oct 16 '18 at 21:25
0

*{
box-sizing:border-box;
}
body {
 font-family: 'Fira Mono', monospace;
 background-color: #323232;
 color: #ecebe7;
 width: 70%;
 margin: auto;
 padding: 0;
 text-shadow: 0 .0625rem #807b7a;
 font-size: 1.25rem;
}

h1 {
 font-size: 4.0rem;
 text-shadow: 0 .25rem #807b7a;
 margin-bottom: 20px;
}

h2 {
 font-size: 2.0rem;
 text-shadow: 0 .125rem #807b7a;
 margin: auto;
 padding-bottom: 10px;
}

p {
 letter-spacing: .15rem;
}
/* Class Selectors */

.main-header {
 text-align: center;
 border-bottom: 3px solid #ecebe7;
 border-top: 3px solid #ecebe7;
 border-right: 3px solid #ecebe7;
 border-left: 3px solid #ecebe7;
 box-shadow: 0 3px #807b7a;
 background-color: #212121;
 margin: 30px 0;
}

.empire {
 border-bottom: 3px solid #ecebe7;
 border-top: 3px solid #ecebe7;
 border-right: 3px solid #ecebe7;
 border-left: 3px solid #ecebe7;
 box-shadow: 0 3px #807b7a;
 background-color: #212121;
 margin-bottom: 30px;
 margin-right: 15px;
 padding: 10px;
 width: 45%;
}

.anghardi {
 border-bottom: 3px solid #ecebe7;
 border-top: 3px solid #ecebe7;
 border-right: 3px solid #ecebe7;
 border-left: 3px solid #ecebe7;
 box-shadow: 0 3px #807b7a;
 background-color: #212121;
 margin-bottom: 30px;
 margin-left: 15px;
 padding: 10px;
 width: 45%;
}

/* Floating */

.empire {
 float: left;
}

.anghardi {
 float: right;
}

.clearfix::after {
    content: "";
    clear: both;
    display: table;
}

/* Media Queries */
@media (max-width: 1550px) {
 .empire,
 .anghardi {
  float: none;
  margin: 30px 0;
  width: 100%;
 }
}
<!DOCTYPE html>
<html>
<head>
 <title>Galgoma's War</title>
 <link rel="stylesheet" type="text/css" href="style/styles.css">
 <link href="https://fonts.googleapis.com/css?family=Fira+Mono" rel="stylesheet">
</head>
<body>
 <header id="top" class="main-header">
  <h1>The War of Galgoma</h1>
  <h2>An adventure entirely within the mind of the great Galgoma</h2>
 </header>

 <div class="empire clearfix">
  <h2>The Opal Empire</h2>
  <p>The Opal Empire have mostly tolerated the Anghardi since they showed up two centuries ago on the eastern edge of the nation. Recently, attacks on outer settlements have been continuously reported and the Opal Empire plans on wiping out the marauders and claiming the new land as their own. Despite expecting an easy victory, the Empire has had considerable difficulty ridding themselves of the Anghardi and now face a critical battle. If the Anghardi win the three valleys, they may be able to ally with other small groups of marauders and become a dangerous foe.</p>
 </div>

 <div class="anghardi clearfix">
  <h2>The Anghardi</h2>
  <p>The Anghardi bravely defend their conquered land. Two centuries ago they made their presence known in the eastern realms and they have held and developed these lands since. They will not give way to the scum from the Empire. Opportunity awaits if they can just muster enough strength to reach out to other similar groups and turn on the Empire. This may be their last stand before the army of the Empire gains ground and takes control of the three valleys, a strategic position that will surely turn the tide of the war.</p>
 </div>

</body>
</html>

You just need to had box-sizing:borde-box to your elements.

With this Properties, it does not consider paddings for width.

aflyzer
  • 563
  • 3
  • 12
0

You have to learn about the box-sizing property which can have these 2 values:

1. content-box gives you the default CSS box-sizing behavior. If you set an element's width to 100 pixels, then the element's content box will be 100 pixels wide, and the width of any border or padding will be added to the final rendered width.

2. border-box tells the browser to account for any border and padding in the values you specify for an element's width and height. If you set an element's width to 100 pixels, that 100 pixels will include any border or padding you added, and the content box will shrink to absorb that extra width. This typically makes it much easier to size elements.

Content box is the default one so if all have width of 100% and only some have padding and border. The ones with padding and border will be bigger.

Solution:

Either you set all to box-sizing: border-box or add to all the same padding, border. 

.main-header, .empire, .anghardi {
    box-sizing: border-box;
}
Raul
  • 963
  • 2
  • 11
  • 31