Element widths are displaying uneven alignment

Question

Element widths are displaying uneven alignment

I can't seem to wrap my head around what's happening here. I've got an HTML layout with a header, sidebar, and central content page.

Both the sidebar and central content are within the same div acting as a clearfix. I floated the sidebar left and the content right, but instead of aligning neatly, the content div just drops down.

Markup

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

It's bothering me that even though I've set the box sizing to border box and display to inline-block, there seems to be some issues with how the widths are being calculated for the sidebar (25%) and main content (75%), taking margins and paddings into account separately rather than inclusively.

html css css-float width clearfix

Answer 1

Answer №1

It seems you are now utilizing floats, but I have provided a solution using a simple flexbox layout. Hopefully this will be helpful to you.

* {
  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>

Answer 2

It seems you are now utilizing floats, but I have provided a solution using a simple flexbox layout. Hopefully this will be helpful to you.

* {
  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>

Answer 3

Answer №2

Opting for a flex layout is the way to go as it ensures responsiveness and eliminates potential issues.

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

Answer 4

Opting for a flex layout is the way to go as it ensures responsiveness and eliminates potential issues.

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

Answer 5

Answer №3

It seems like you are just starting to explore the world of HTML and CSS. When applying margins and paddings, especially on the left and right sides, it's important to pay attention to each pixel to avoid the issues you're currently experiencing.
In your future learning journey, you will come across concepts such as grid and flexbox in CSS. Once you master both grid and flexbox, you may find that you no longer need to rely on the float property.

Since you are still a beginner, my solution should be easy for you to grasp -
You need to remove this from your CSS:

main{
  display:inline-block;
}

And add the following instead -

.centerContent {
  display: inline-block;
  width: 70%; // experiment with different widths
  margin: auto;
  padding-left: 20px;
  border: 3px solid #73ad21;
  float: right; // you can also try 'float : left;'
}

Answer 6

It seems like you are just starting to explore the world of HTML and CSS. When applying margins and paddings, especially on the left and right sides, it's important to pay attention to each pixel to avoid the issues you're currently experiencing.
In your future learning journey, you will come across concepts such as grid and flexbox in CSS. Once you master both grid and flexbox, you may find that you no longer need to rely on the float property.

Since you are still a beginner, my solution should be easy for you to grasp -
You need to remove this from your CSS:

main{
  display:inline-block;
}

And add the following instead -

.centerContent {
  display: inline-block;
  width: 70%; // experiment with different widths
  margin: auto;
  padding-left: 20px;
  border: 3px solid #73ad21;
  float: right; // you can also try 'float : left;'
}

Answer 7

Answer №4

In the box-sizing: border-box model, margins are not included in the width calculation, but paddings and borders are. More information can be found here: https://developer.mozilla.org/en-US/docs/Web/CSS/box-sizing

As a result, the margin is positioned outside of the sidebar, causing the second content to shift down. To fix this issue, remove the margin so that the content returns to its original position.

Answer 8

In the box-sizing: border-box model, margins are not included in the width calculation, but paddings and borders are. More information can be found here: https://developer.mozilla.org/en-US/docs/Web/CSS/box-sizing

As a result, the margin is positioned outside of the sidebar, causing the second content to shift down. To fix this issue, remove the margin so that the content returns to its original position.

Element widths are displaying uneven alignment

Answer №1

Answer №2

Answer №3

Answer №4

Similar questions

What are some strategies for accessing the original values of form components that have not been altered when using ngModel?

Incorporating JavaScript and CSS files into a content page of a master page in ASP.NET: Steps to follow

Error! D3.js is throwing an Uncaught TypeError because it cannot find the function .enter(...).append(...).merge

Position a button to be aligned with the bottom of its container

Customize Typography style variations in Material-UI version 5

What is the best way to center an image within its div, especially when the image size may vary and could be larger or smaller than the div wrapper?

Creating a loading mask for a section of a webpage using angularjs

Create a circular status button that overlays on top of another element using CSS

Please provide the text enclosed within the h1 tags

Adjusting the selected state of an HTML/CSS checkbox with JavaScript

Unexpected element layout issues

Conceal the div element if the value is either undefined or empty in AngularJS

Comparing Django forms to conventional forms

The div containers are unable to be positioned side by side

The jQuery dropdown menu smoothly expands to reveal all hidden submenu options

What is the best way to deactivate buttons with AngularJS?

In JavaScript, is it possible to dynamically alter and showcase the value of a select tag?

The `.append()` function includes HTML content as plain text

Prevent parent element from triggering double click when double clicking on children element with CSS or jQuery

Event delegation will be ineffective when the target element is nested within another element