bmradke bmradke - 5 months ago 10
HTML Question

Elements inside main div exceed width

I have the children elements

width
set to
100%
, but the
width
s exceed the
width
of the parent
div
.

Code:



.MainFrame {
max-width: 750px;
height: auto;
margin: auto;
padding: 5px;
background-color: grey;
}
div.Status {
float: left;
width: 100%;
height: auto;
margin: 5px;
padding: 5px;
border: 3px solid;
}
div.Disclaimer {
float: left;
width: 100%;
height: auto;
margin: 5px;
padding: 5px;
border: 3px solid;
}
div.Settings {
float: left;
width: 100%;
height: auto;
margin: 5px;
padding: 5px;
border: 3px solid;

<div class="MainFrame">
<div class="Status">
<center>
<h1>Home Screen</h1>
</center>
<center>Waiting for a command from the user.</center>
</div>
<div class="Disclaimer">
<h3>This page will be used to direct user to other tools.</h3>
</div>
<div class="Settings">
<h2>Settings</h2>
<form method="post" action="/Download/">
<input type="submit" name="download" value="Download">
</form>
</div>
...
</div>




Answer

your problem is that padding and border that belongs to box-model are counting to that 100%.

for example: width100% + padding 10px will overflow. but using box-sizing-border-box will fix that, so use box-sizing-border-box

you can see more about box-sizing here and here

Note: center tag is deprecated don't use it, style in CSS instead.

Note2: I tweaked your CSS, reducing duplicated rules/properties.

*,
*:before,
*:after {
  box-sizing: border-box;
}
body {
  margin: 0
}
.MainFrame {
  max-width: 750px;
  height: auto;
  margin: auto;
  padding: 5px;
  background-color: grey;
}
.MainFrame > div {
  width: 98%;
  margin: 5px;
  padding: 5px;
  border: 3px solid;
}
<div class="MainFrame">
  <div class="Status">
    <h1>Home Screen</h1>
    Waiting for a command from the user.
  </div>
  <div class="Disclaimer">
    <h3>This page will be used to direct user to other tools.</h3>
  </div>
  <div class="Settings">
    <h2>Settings</h2>
    <form method="post" action="/Download/">
      <input type="submit" name="download" value="Download">
    </form>
  </div>
  ...
</div>

Comments