Element widths not aligning themselves properly

Related searches

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.

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>

Everything You Need To Know About Alignment In Flexbox , Rachel Andrew is not only Editor in Chief of Smashing Magazine, but also a For the entire history of CSS Layout, being able to properly align things You can also use the align-self property on any individual flex item to align it width: 100px; align-items: unsafe center; } .item:last-child { width: 200px; }. When I create a div element within a div element with the same top, left and width dimensions it is necessary to add a -2px correction to get the two divs to overlay exactly. See html code that demonstrates this in the troubleshooting information. Run as is once and then uncomment the line that is commented out and comment out the current line.

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;
}

How To Align Things In CSS — Smashing Magazine, There are a few ways to align elements in CSS. Rachel Andrew is not only Editor in Chief of Smashing Magazine, but also a web developer, writer and speaker. We then have align-self and justify-self as applied to individual flex or different font sizes, or making form fields and buttons line up properly. 1 Element widths not aligning themselves properly Feb 11. 1 How to send div element using AJAX? Sep 27 '19. 0 PHP MYSQL Attendance Limit Once a Day Feb 12.

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
}

CSS Box Alignment, The CSS Box Alignment module specifies CSS features that relate to the The first item overrides the align-items set on the group by setting align-self to do not consider whether we are aligning it to the physical dimensions� The gap comes from the white-space between inline-elements present in your mark-up. All white-space between inline-elements is collapsed into one space. This space gets in the way, if we want to place two inline elements next to each other and giving them width: 50%, for example. There is not enough space for two 50%-elements and a space.

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.

10.4: Minimum and maximum widths: 'min-width' and 'max-width', The content width of a non-replaced inline element's boxes is that of the rendered block's width does not itself depend on the replaced element's width, then the used For all other elements, the box used for alignment is the margin box. the baseline of the box to the proper position for subscripts of the parent's box. I have tried repeatedly to adjust the widths via drag, shift drag, ctrl drag, and grasping-at-a-straw(!) drag of the various columns. It is a bit of a nightmare. When I do such dragging, before I let go of the mouse, I seem to be "almost there" in aligning the columns, but when I let go of the mouse, then column line of one or the other of the

Equidistant Objects with CSS, The left-most object is left aligned with it's parent element. the browser window width, but applied starting at the left of the parent element not� Add some width and height to the div element and align text horizontally center also. To make text horizontally center, you have to use text-align:center.

Set the size of your <div> with the width and height properties. Set the position for your titles using the text-align property. Use the clear property which is directly related to float property. It defines whether an element should be next to floating elements, or it should be below them (clear). Use the content property.

Comments
  • Thank you, I just honestly had no idea what flexbox was
  • You should need to learn it first, bootstrap 4 is build with flexbox. Here use this w3school resource to learn w3schools.com/css/css3_flexbox.asp Thanks