Element widths not aligning themselves properly

Question

I'm really struggling here trying to figure out what is going on. I have an HTML with a header, a sidebar, and a central content page.

The sidebar and central content are in the same div, which also acts as their clearfix. I floated the sidebar to the left and the content to the right, but instead of aligning themselves to each other neatly, the content div falls down.

HTML

<body>
        <header>
            <img src="./img/Logo_Color.png" alt="Logo">
            <h1>Batch Documentation</h1>
        </header>
        <div class="clearfix">
            <div class="sidebar">
                <nav>
                    <ul>
                        <li><a href="#">Overview</a></li>
                        <li><a href="#">Fl Overview</a></li>
                        <li><a href="#">PF2 Overview</a></li>
                        <li><a href="#">Inputs</a></li>
                        <li><a href="#">Outputs</a></li>
                        <li><a href="#">Appendix A</a></li>
                        <li><a href="#">Appendix B</a></li>
                    </ul>
                </nav>
            </div>
            <main>    

            <div class="centerContent">
                <h2>Overview</h2>
                <p>
                    Integer in qui primam te ipsa-plenus Crescere Effectum Septembrem.  Me quo 700% octavas ad imperium caduca si eros eius orci arcu te mirum consumere, meritos modo diam eros ti, in cras diuturna interpres, semente, securitas sem odio dignitatis reuiescat.
                    Lius quam charybdium nonullis sem inibunt illum, civibus eius arendom, Indolem te e licentiose te maiestatem molestias typi combinatur sagittis successus nomine, reniam eos te-feroces assueverunt.
                    Saepe non, Fervore 2000 galliae nibh eu ea ut:
                </p>
                <code>Hello</code>
            </div>
            </main>
        </div>
    </body>

CSS

* {
    font-family: 'Roboto', sans-serif;
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    list-style-type: none;

  }

body {
  margin: auto;
  width: 1265px;
  background-color: #eae0ff;
}

main {
  display: inline-block
}

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

header {
  margin: 15px 10px 20px 10px;
}

.sidebar {
  width: 25%;
  margin: 5px 0px 10px 10px;
  padding-right: 20px;
  float: left;
  background-color: #ccccff;
}

.centerContent {

  width: 75%;
  margin: auto;
  padding-left: 20px;
  border: 3px solid #73ad21;
  float: right;
}

li {
  margin-top: 5px;
  margin-bottom: 5px;
}

code {
  width: 90%;
  font-family: 'Source Code Pro', monospace;
  color: #43892a;
  background-color: #000;
  display: block;
}

I am especially concerned because the box sizing is set to border box, and the display is inline block. The sidebar has 25% width whereas the main content has 75%, yet it seems that the margins and padding are being added to their dimensions rather than being included in the % calculation.

score 1 · Accepted Answer · answered Feb 11 '20 at 18:04

I Dont know why you using floats now, i attached a same with small flexbox layout. hope it helps.

* {
  font-family: 'Roboto', sans-serif;
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  list-style-type: none;
}

body {
  margin: auto;
  background-color: #eae0ff;
}

main {
  display: inline-block
}

.clearfix{
display:flex;
}

header {
  margin: 15px 10px 20px 10px;
}

.sidebar {
  width: 25%;
  margin: 0px 0px 10px 10px;
  padding-right: 20px;
  background-color: #ccccff;
  flex: 0 0 auto;
}

.centerContent {
  width: 75%;
  margin: auto;
  padding-left: 20px;
  border: 3px solid #73ad21;
}

li {
  margin-top: 5px;
  margin-bottom: 5px;
}

code {
  width: 90%;
  font-family: 'Source Code Pro', monospace;
  color: #43892a;
  background-color: #000;
  display: block;
}

<body>
  <header>
    <img src="./img/Logo_Color.png" alt="Logo">
    <h1>Batch Documentation</h1>
  </header>
  <div class="clearfix">
    <div class="sidebar">
      <nav>
        <ul>
          <li><a href="#">Overview</a></li>
          <li><a href="#">Fl Overview</a></li>
          <li><a href="#">PF2 Overview</a></li>
          <li><a href="#">Inputs</a></li>
          <li><a href="#">Outputs</a></li>
          <li><a href="#">Appendix A</a></li>
          <li><a href="#">Appendix B</a></li>
        </ul>
      </nav>
    </div>
    <main>

      <div class="centerContent">
        <h2>Overview</h2>
        <p>
          Integer in qui primam te ipsa-plenus Crescere Effectum Septembrem. Me quo 700% octavas ad imperium caduca si eros eius orci arcu te mirum consumere, meritos modo diam eros ti, in cras diuturna interpres, semente, securitas sem odio dignitatis reuiescat.
          Lius quam charybdium nonullis sem inibunt illum, civibus eius arendom, Indolem te e licentiose te maiestatem molestias typi combinatur sagittis successus nomine, reniam eos te-feroces assueverunt. Saepe non, Fervore 2000 galliae nibh eu ea ut:
        </p>
        <code>Hello</code>
      </div>
    </main>
  </div>
</body>

You should need to learn it first, bootstrap 4 is build with flexbox. Here use this w3school resource to learn https://www.w3schools.com/css/css3_flexbox.asp Thanks — Arjun Pandi, Feb 12 '20 at 03:03

score 1 · Answer 2 · answered Feb 11 '20 at 18:51

Better to use flex layout, it is going to be responsive and never creates problems.

CSS:

* {
    font-family: 'Roboto', sans-serif;
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    list-style-type: none;

  }

body {
  margin: auto;
  width: 96vw;
  background-color: #eae0ff;
}

main {
    width: 70%;
    margin: auto;
}

.clearfix {
  display: flex;
  justify-content: space-between;
  flex-direction: row;
  margin: 0 20px;
}

header {
  margin: 15px 10px 20px 10px;
}

.sidebar {
  width: 25%;
  background-color: #ccccff;
}

.centerContent {
  border: 3px solid #73ad21;
}

li {
  margin-top: 5px;
  margin-bottom: 5px;
}

code {
  font-family: 'Source Code Pro', monospace;
  color: #43892a;
  background-color: #000;
  display: block;
}

Abhishek Kamal · Answer 3 · 2020-02-11T19:25:58.317

I think you have just started learning HTML , CSS. So whenever you give margins and padding (especially left and right) count each pixels else you'll face such problems like you are facing now.
In future you will learn grid and flexbox in css. When you use both (grid & flexbox) then I bet you will never use float property.

As you are beginner, you can easily understand my solution -
So in your css you have to remove -

main{
  display:inline-block;
}

and add this -

.centerContent {
  display: inline-block;
  width: 70%; // play by changing the width.
  margin: auto;
  padding-left: 20px;
  border: 3px solid #73ad21;
  float: right; // float : left; will also work
}

score 0 · Answer 4 · answered Feb 11 '20 at 18:07

The margin are not included in the width for the box-sizing: border-box butpaddings and borders are included. https://developer.mozilla.org/en-US/docs/Web/CSS/box-sizing

So the margin remains external to side bar and the second content is moving down. You can remove margin to move the content back.

Element widths not aligning themselves properly

4 Answers4