What is the best way to align elements on the left side in the center of my page when they are not adjacent in the DOM structure?

Question

What is the best way to align elements on the left side in the center of my page when they are not adjacent in the DOM structure?

Let's consider a scenario where my website is structured with a header, footer, and main column. The main column holds the article and its table of contents side by side, with the center alignment. The width of the main column isn't fixed due to the presence of the table of contents. I aim to align the header and footer content (enclosed within .main-column) so that it matches the left edge of the centered main column.

Putting the header and footer inside the <main> tag for centering is not an option because I want a border (like <hr>) to span across the entire viewport width.

An alternative solution would involve using JavaScript to set the margin-left of the header and footer. However, I prefer not to rely on JavaScript for layout purposes but rather reserve it for minor enhancements.

* {
  margin: 0;
  padding: 0;
}

header {
  border-bottom: 1px solid black;
}

footer {
  border-top: 1px solid black;
}

.main-column {
  /* this adjusts alignment */
  margin-left: 5rem;
}

main {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: flex-start;
}

article {
  max-width: 20rem;
}

nav {
  background: gray;
}

ul {
  margin-left: 1.5em;
}

<html>

<body>
  <header>
    <div class="main-column">
      <h1>Header here</h1>
    </div>
  </header>
  
  <main>
    <article>
      <h1>This is some article</h1>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris mattis leo ut metus egestas porttitor eu ac risus. Fusce convallis posuere diam ut dapibus. Mauris at velit ex. Ut malesuada sollicitudin magna, ac imperdiet ipsum elementum in. In
        hac habitasse platea dictumst. Etiam egestas ligula sed erat vestibulum porta. Suspendisse potenti. Donec facilisis risus placerat tincidunt lacinia. Suspendisse potenti. Aliquam in pharetra lectus. Suspendisse sodales, erat iaculis auctor lacinia,
        augue dolor lobortis dui, quis fermentum neque nulla ac lacus. Morbi id nulla iaculis, laoreet dui eget, vehicula nulla. Donec eget purus sit amet nibh mollis tempor. Proin hendrerit nisi quis orci placerat ullamcorper. Integer congue mauris dui,
        vel tempor libero ultrices non. Aliquam in nisl magna.</p>
    </article>
    <nav>
      <h3>Table of contents</h3>
      <ul>
        <li>Some</li>
        <li>links</li>
        <li>here</li>
      </ul>
    </nav>
  </main>
  
  <footer>
    <div class="main-column">
      <h1>Footer here</h1>
    </div>
  </footer>
</body>

</html>

html css flexbox

Answer 1

Answer №1

A potential solution I have discovered involves adjusting the DOM structure so that all content can be centered within a single div. By implementing negative margins, we can create borders that extend beyond this centralized container.

However, one drawback of this approach is the necessity of adding overflow-x: hidden to the entire page, which may not be ideal depending on other elements present.

* {
  margin: 0;
  padding: 0;
}

#container {
  display: grid;
  justify-content: center;
}

#wrapper {
  display: inline-block;
}

main {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
}

article {
  max-width: 15rem;
}

nav {
  background: gray;
}

ul {
  margin-left: 1.5em;
}

header hr, footer hr {
  height: 0;
  border: none;
  border-bottom: 1px solid black;
  margin: 0 calc(50% - 50vw);
}

body {
  overflow-x: hidden;
}

<html>

<body>
<div id="container">
<div id="wrapper">
  <header>
    <h1>Header here</h1>
    <hr>
  </header>
  
  <main>
    <article>
      <h1>This is some article</h1>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris mattis leo ut metus egestas porttitor eu ac risus. Fusce convallis posuere diam ut dapibus. Mauris at velit ex. Ut malesuada sollicitudin magna, ac imperdiet ipsum elementum in. In
        hac habitasse platea dictumst. Etiam egestas ligula sed erat vestibulum porta. Suspendisse potenti. Donec facilisis risus placerat tincidunt lacinia. Suspendisse potenti. Aliquam in pharetra lectus. Suspendisse sodales, erat iaculis auctor lacinia,
        augue dolor lobortis dui, quis fermentum neque nulla ac lacus. Morbi id nulla iaculis, laoreet dui eget, vehicula nulla. Donec eget purus sit amet nibh mollis tempor. Proin hendrerit nisi quis orci placerat ullamcorper. Integer congue mauris dui,
        vel tempor libero ultrices non. Aliquam in nisl magna.</p>
    </article>
    <nav>
      <h3>Table of contents</h3>
      <ul>
        <li>Some</li>
        <li>links</li>
        <li>here</li>
      </ul>
    </nav>
  </main>
  
  <footer>
    <hr>
    <h1>Footer here</h1>
  </footer>
</div>
</div>
</body>

</html>

Answer 2

A potential solution I have discovered involves adjusting the DOM structure so that all content can be centered within a single div. By implementing negative margins, we can create borders that extend beyond this centralized container.

However, one drawback of this approach is the necessity of adding overflow-x: hidden to the entire page, which may not be ideal depending on other elements present.

* {
  margin: 0;
  padding: 0;
}

#container {
  display: grid;
  justify-content: center;
}

#wrapper {
  display: inline-block;
}

main {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
}

article {
  max-width: 15rem;
}

nav {
  background: gray;
}

ul {
  margin-left: 1.5em;
}

header hr, footer hr {
  height: 0;
  border: none;
  border-bottom: 1px solid black;
  margin: 0 calc(50% - 50vw);
}

body {
  overflow-x: hidden;
}

<html>

<body>
<div id="container">
<div id="wrapper">
  <header>
    <h1>Header here</h1>
    <hr>
  </header>
  
  <main>
    <article>
      <h1>This is some article</h1>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris mattis leo ut metus egestas porttitor eu ac risus. Fusce convallis posuere diam ut dapibus. Mauris at velit ex. Ut malesuada sollicitudin magna, ac imperdiet ipsum elementum in. In
        hac habitasse platea dictumst. Etiam egestas ligula sed erat vestibulum porta. Suspendisse potenti. Donec facilisis risus placerat tincidunt lacinia. Suspendisse potenti. Aliquam in pharetra lectus. Suspendisse sodales, erat iaculis auctor lacinia,
        augue dolor lobortis dui, quis fermentum neque nulla ac lacus. Morbi id nulla iaculis, laoreet dui eget, vehicula nulla. Donec eget purus sit amet nibh mollis tempor. Proin hendrerit nisi quis orci placerat ullamcorper. Integer congue mauris dui,
        vel tempor libero ultrices non. Aliquam in nisl magna.</p>
    </article>
    <nav>
      <h3>Table of contents</h3>
      <ul>
        <li>Some</li>
        <li>links</li>
        <li>here</li>
      </ul>
    </nav>
  </main>
  
  <footer>
    <hr>
    <h1>Footer here</h1>
  </footer>
</div>
</div>
</body>

</html>

Answer 3

Answer №2

It seems like you're looking for a solution where the width of the main content is dynamic, but there's a need to utilize some box model properties.

* {
  margin: 0;
  padding: 0;
}

#wrapper {
  display: flex;
  justify-content: center;
  overflow-x: hidden;
}

#container {
  border: rgba(255,0,0,.2) 2px dashed;
  display: inline-flex;
  flex-direction: column;
}

hr {
  margin: 0;
  border: 0;
  border-bottom: #000 1px solid;
  margin: 0 -100%;
}

main {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: flex-start;
}

article {
  max-width: 25rem;
}

nav {
  background: gray;
}

ul {
  margin-left: 1.5em;
}

<html>

<body>

<div id="wrapper">
  <div id="container">

    <header>
      <div class="main-column">
        <h1>Header here</h1>
      </div>
      <hr>
    </header>

    <main>
      <article>
        <h1>This is some article</h1>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit...</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit...</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit...</p>
      </article>
      <nav>
        <h3>Table of contents</h3>
        <ul>
          <li>Some</li>
          <li>links</li>
          <li>here</li>
        </ul>
      </nav>
    </main>

    <footer>
      <hr>
      <div class="main-column">
        <h1>Footer here</h1>
      </div>
    </footer>
    
  </div>
</div>

</body>

</html>

If you find DOM structuring challenging, consider using the following JavaScript approach instead for an easier solution:

// Wait for the DOM nodes to merely be present...
document.addEventListener('DOMContentLoaded', function (e) {
  const getEl = function(tag) { return document.getElementById(tag) },
        header = getEl('header'),
        main = getEl('main'),
        footer = getEl('footer');
  
  try {
    header.style.width = footer.style.width = `${main.clientWidth}px`;
  } catch {
    console.error('Houston we have a problem, with your html elements.');
  }
})

* {
  margin: 0;
  padding: 0;
}

body {
  /* Use flex for a quick layout parent structure */
  display: flex;
  flex-direction: column;
  justify-content: center;
}

header, main, footer {
    /* set the elements to center horizontally */
    margin: 0 auto;
}

main {
  display: flex;
  flex-direction: row;
  justify-content: center;
  /* comment out align-items if you want table of contents full height */
  align-items: flex-start;
  border: rgba(255,0,0,.25) 3px dashed;
}

article {
  max-width: 25rem;
}

nav {
  background: gray;
}

ul {
  margin-left: 1.5em;
}

<header id="header">...</header>
<main id="main">...</main>
<footer id="footer">...</footer>

Answer 4

It seems like you're looking for a solution where the width of the main content is dynamic, but there's a need to utilize some box model properties.

* {
  margin: 0;
  padding: 0;
}

#wrapper {
  display: flex;
  justify-content: center;
  overflow-x: hidden;
}

#container {
  border: rgba(255,0,0,.2) 2px dashed;
  display: inline-flex;
  flex-direction: column;
}

hr {
  margin: 0;
  border: 0;
  border-bottom: #000 1px solid;
  margin: 0 -100%;
}

main {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: flex-start;
}

article {
  max-width: 25rem;
}

nav {
  background: gray;
}

ul {
  margin-left: 1.5em;
}

<html>

<body>

<div id="wrapper">
  <div id="container">

    <header>
      <div class="main-column">
        <h1>Header here</h1>
      </div>
      <hr>
    </header>

    <main>
      <article>
        <h1>This is some article</h1>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit...</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit...</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit...</p>
      </article>
      <nav>
        <h3>Table of contents</h3>
        <ul>
          <li>Some</li>
          <li>links</li>
          <li>here</li>
        </ul>
      </nav>
    </main>

    <footer>
      <hr>
      <div class="main-column">
        <h1>Footer here</h1>
      </div>
    </footer>
    
  </div>
</div>

</body>

</html>

If you find DOM structuring challenging, consider using the following JavaScript approach instead for an easier solution:

// Wait for the DOM nodes to merely be present...
document.addEventListener('DOMContentLoaded', function (e) {
  const getEl = function(tag) { return document.getElementById(tag) },
        header = getEl('header'),
        main = getEl('main'),
        footer = getEl('footer');
  
  try {
    header.style.width = footer.style.width = `${main.clientWidth}px`;
  } catch {
    console.error('Houston we have a problem, with your html elements.');
  }
})

* {
  margin: 0;
  padding: 0;
}

body {
  /* Use flex for a quick layout parent structure */
  display: flex;
  flex-direction: column;
  justify-content: center;
}

header, main, footer {
    /* set the elements to center horizontally */
    margin: 0 auto;
}

main {
  display: flex;
  flex-direction: row;
  justify-content: center;
  /* comment out align-items if you want table of contents full height */
  align-items: flex-start;
  border: rgba(255,0,0,.25) 3px dashed;
}

article {
  max-width: 25rem;
}

nav {
  background: gray;
}

ul {
  margin-left: 1.5em;
}

<header id="header">...</header>
<main id="main">...</main>
<footer id="footer">...</footer>

What is the best way to align elements on the left side in the center of my page when they are not adjacent in the DOM structure?

Answer №1

Answer №2

Similar questions

A guide on updating div IDs using jQuery sortable when an element is moved by the user

What is the method to retrieve text from a div element with Webdriver-IO?

When it comes to identifying a click outside of an element, the Jquery or Javascript function may encounter some challenges specifically with Internet Explorer

The show/hide toggle button is malfunctioning and not functioning properly

When the mobile navigation bar is tapped, it remains open instead of closing

Sometimes, IE8 fails to load CSS files properly

What is the best way to maintain the position of components (such as a Card component) when one is expanded in a Material-UI and ReactJS project

Filtering and selecting tables in HTML

Issues with alignment in Bootstrap CSS

Replacing values in an HTML file with MySql query results

Update a designated div section on the webpage every 10 seconds

What is the best way to display a particular JavaScript variable in an HTML document?

Discover how to determine the direction of a div element when utilizing the dir="auto" attribute in HTML5 with JavaScript

Creating a scrollable nested div on a mobile website

The HTML image tag is malfunctioning on a Windows system

Can you provide a guide on how to retrieve an HTML file using JSON?

Issue with Bootstrap dropdown functionality when used in conjunction with typical JS and CSS implementations

Simple steps to manipulate HTML content within a span element using JavaScript

Steps to create interconnected circles using CSS

How can I center align text after floating ul li elements to the left?