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

IE7 is not applying the conditional CSS styles to content loaded through AJAX

Tips for modifying the font style of a Bootstrap form input using a custom font

Cannot submit form data from HTML to PHP

How can I trigger a PHP function from within an HTML onClick() event?

What methods can I use to make sure the right side of my React form is properly aligned for a polished appearance?

Taking out the z-index from the transition code

Entry is automatically added to the form as soon as the page is loaded

Utilize the serialized data to pre-fill the form fields

Support for these CSS properties of left: 0; and right: 0; are compatible with

Unchecked checkbox displays as checked in UI

Although hiding and showing elements in jQuery is quick, the rendering engine is too sluggish

I'm having trouble adding a background image, even though I have set it to static. What could be

What is the best way to create a footer in this scenario and is there a method to perfectly center an

What is the best way to create a horizontally scrolling row of squares in a mobile view using html and css?

issues with the functionality of bootstrap modal

Tips for concealing the fourth child element within a list item

What is the reason for the malfunction of input :: - webkit-slider-thumb and input :: - moz-slider-thumb?

What steps should be taken in PHP to display a popup when the user input is found to be invalid?

Let us know when the information on a different tab is updated

I am looking to implement a feature in my quiz application where a green tick mark appears next to the question number for the correct answer and a red cross mark for the wrong answer