Search code examples
htmlcssalignment

Date in Upper Righthand Corner Causes Header to Decenter

The date in the righthand corner of each post is causing the H2 Element to not be centered.

It's a very simple issue, with an annoying result. I've tried many things, and I still can't seem to stop it from de-centering! I know there's a fix, but I still cannot seem to fix it.

Here's an image describing the issue:

Simple issue, annoying result... Here's the code:

body {
    font-family: 'Roboto', Arial, Helvetica, sans-serif;
    background-color: #FFFFFF;
    color: #000000;
    text-align: center;
}
.container {
    width: 80%;
    display: inline-block;
}
.post {
    border: 2px solid #000000;
    padding: 0px 4px 0px 4px;
}
.post p,h2 { 
    margin: 0;
}
.post h2 {
    text-align: center;
}
.post p {
    text-align: left;
    text-indent: 40px;
    line-height: 1.8;
}
hr {visibility: hidden;} 
.date {
    float: right;
    font-size: 12pt;
    font-style: italic;
    font-weight: normal;
}
@media screen and (max-width: 600px){
    .container {width: 100%;}
    .post p {text-align: justify;text-indent: 0px;font-size: 14pt;}
}
<body>
<h1>Welcome to Henry's Blog!</h1>
<div class="container">
  <div class="post" id="10">
    <span class="date">10/15/17</span>
    <h2>Tenth Post</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Augue neque gravida in fermentum et sollicitudin ac. Feugiat in ante metus dictum. Sed turpis tincidunt id aliquet risus feugiat in. Venenatis a condimentum vitae sapien. Ut pharetra sit amet aliquam id diam maecenas ultricies. Praesent elementum facilisis leo vel fringilla est ullamcorper eget. Tristique nulla aliquet enim tortor. Vitae elementum curabitur vitae nunc sed velit dignissim. Turpis cursus in hac habitasse platea dictumst quisque. Dictumst quisque sagittis purus sit amet volutpat consequat mauris nunc.</p>
  </div>
  <hr>
  <div class="post" id="9">
    <span class="date">10/15/17</span>
    <h2>Ninth Post</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Augue neque gravida in fermentum et sollicitudin ac. Feugiat in ante metus dictum. Sed turpis tincidunt id aliquet risus feugiat in. Venenatis a condimentum vitae sapien. Ut pharetra sit amet aliquam id diam maecenas ultricies. Praesent elementum facilisis leo vel fringilla est ullamcorper eget. Tristique nulla aliquet enim tortor. Vitae elementum curabitur vitae nunc sed velit dignissim. Turpis cursus in hac habitasse platea dictumst quisque. Dictumst quisque sagittis purus sit amet volutpat consequat mauris nunc.</p>
  </div>
  <hr>
  <div class="post" id="8">
    <span class="date">10/15/17</span>
    <h2>Eighth Post</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Augue neque gravida in fermentum et sollicitudin ac. Feugiat in ante metus dictum. Sed turpis tincidunt id aliquet risus feugiat in. Venenatis a condimentum vitae sapien. Ut pharetra sit amet aliquam id diam maecenas ultricies. Praesent elementum facilisis leo vel fringilla est ullamcorper eget. Tristique nulla aliquet enim tortor. Vitae elementum curabitur vitae nunc sed velit dignissim. Turpis cursus in hac habitasse platea dictumst quisque. Dictumst quisque sagittis purus sit amet volutpat consequat mauris nunc.</p>
  </div>
  <hr>
  <div class="post" id="7">
    <span class="date">10/15/17</span>
    <h2>Seventh Post</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Augue neque gravida in fermentum et sollicitudin ac. Feugiat in ante metus dictum. Sed turpis tincidunt id aliquet risus feugiat in. Venenatis a condimentum vitae sapien. Ut pharetra sit amet aliquam id diam maecenas ultricies. Praesent elementum facilisis leo vel fringilla est ullamcorper eget. Tristique nulla aliquet enim tortor. Vitae elementum curabitur vitae nunc sed velit dignissim. Turpis cursus in hac habitasse platea dictumst quisque. Dictumst quisque sagittis purus sit amet volutpat consequat mauris nunc.</p>
  </div>
  <hr>
  <div class="post" id="6">
    <span class="date">10/15/17</span>
    <h2>Sixth Post</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Augue neque gravida in fermentum et sollicitudin ac. Feugiat in ante metus dictum. Sed turpis tincidunt id aliquet risus feugiat in. Venenatis a condimentum vitae sapien. Ut pharetra sit amet aliquam id diam maecenas ultricies. Praesent elementum facilisis leo vel fringilla est ullamcorper eget. Tristique nulla aliquet enim tortor. Vitae elementum curabitur vitae nunc sed velit dignissim. Turpis cursus in hac habitasse platea dictumst quisque. Dictumst quisque sagittis purus sit amet volutpat consequat mauris nunc.</p>
  </div>
  <hr>
  <div class="post" id="5">
    <span class="date">10/15/17</span>
    <h2>Fifth Post</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Augue neque gravida in fermentum et sollicitudin ac. Feugiat in ante metus dictum. Sed turpis tincidunt id aliquet risus feugiat in. Venenatis a condimentum vitae sapien. Ut pharetra sit amet aliquam id diam maecenas ultricies. Praesent elementum facilisis leo vel fringilla est ullamcorper eget. Tristique nulla aliquet enim tortor. Vitae elementum curabitur vitae nunc sed velit dignissim. Turpis cursus in hac habitasse platea dictumst quisque. Dictumst quisque sagittis purus sit amet volutpat consequat mauris nunc.</p>
  </div>
  <hr>
  <div class="post" id="4">
    <span class="date">10/15/17</span>
    <h2>Fourth Post</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Augue neque gravida in fermentum et sollicitudin ac. Feugiat in ante metus dictum. Sed turpis tincidunt id aliquet risus feugiat in. Venenatis a condimentum vitae sapien. Ut pharetra sit amet aliquam id diam maecenas ultricies. Praesent elementum facilisis leo vel fringilla est ullamcorper eget. Tristique nulla aliquet enim tortor. Vitae elementum curabitur vitae nunc sed velit dignissim. Turpis cursus in hac habitasse platea dictumst quisque. Dictumst quisque sagittis purus sit amet volutpat consequat mauris nunc.</p>
  </div>
  <hr>
  <div class="post" id="3">
    <span class="date">10/15/17</span>
    <h2>Third Post</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Augue neque gravida in fermentum et sollicitudin ac. Feugiat in ante metus dictum. Sed turpis tincidunt id aliquet risus feugiat in. Venenatis a condimentum vitae sapien. Ut pharetra sit amet aliquam id diam maecenas ultricies. Praesent elementum facilisis leo vel fringilla est ullamcorper eget. Tristique nulla aliquet enim tortor. Vitae elementum curabitur vitae nunc sed velit dignissim. Turpis cursus in hac habitasse platea dictumst quisque. Dictumst quisque sagittis purus sit amet volutpat consequat mauris nunc.</p>
  </div>
  <hr>
  <div class="post" id="2">
    <span class="date">10/15/17</span>
    <h2>Second Post</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Augue neque gravida in fermentum et sollicitudin ac. Feugiat in ante metus dictum. Sed turpis tincidunt id aliquet risus feugiat in. Venenatis a condimentum vitae sapien. Ut pharetra sit amet aliquam id diam maecenas ultricies. Praesent elementum facilisis leo vel fringilla est ullamcorper eget. Tristique nulla aliquet enim tortor. Vitae elementum curabitur vitae nunc sed velit dignissim. Turpis cursus in hac habitasse platea dictumst quisque. Dictumst quisque sagittis purus sit amet volutpat consequat mauris nunc.</p>
  </div>
  <hr>
  <div class="post" id="1">
    <h2>First Post</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Augue neque gravida in fermentum et sollicitudin ac. Feugiat in ante metus dictum. Sed turpis tincidunt id aliquet risus feugiat in. Venenatis a condimentum vitae sapien. Ut pharetra sit amet aliquam id diam maecenas ultricies. Praesent elementum facilisis leo vel fringilla est ullamcorper eget. Tristique nulla aliquet enim tortor. Vitae elementum curabitur vitae nunc sed velit dignissim. Turpis cursus in hac habitasse platea dictumst quisque. Dictumst quisque sagittis purus sit amet volutpat consequat mauris nunc.</p>
  </div>
  <hr>
  <p>Blog Posts: <a href="#1">1</a> <a href="#2">2</a> <a href="#3">3</a> <a href="#4">4</a> <a href="#5">5</a> <a href="#6">6</a> <a href="#7">7</a> <a href="#8">8</a> <a href="#9">9</a> <a href="#10">10</a></p>
</div>
</body>
</html>

Solution

  • Instead of using float - which will affect the positioning of the surrounding element - you can use absolute positioning, which won't affect the positioning of the other elements at all.

    You just need 2 changes:

    1: Make the parent relative, so that the date is positioned in relation to it and not the main page:

    .post {
  position: relative;
  /* rest of styles... */
}

    2: Change the position to absolute, and set top & right to give a little "padding" around the date:

    .date {
  position: absolute;
  top: 5px;
  right: 5px;
  /* rest of styles... */
}

    Working Example:

    body {
  font-family: 'Roboto', Arial, Helvetica, sans-serif;
  background-color: #FFFFFF;
  color: #000000;
  text-align: center;
}

.container {
  width: 80%;
  display: inline-block;
}

.post {
  border: 2px solid #000000;
  padding: 0px 4px 0px 4px;
  position: relative;
}

.post p,
h2 {
  margin: 0;
}

.post h2 {
  text-align: center;
}

.post p {
  text-align: left;
  text-indent: 40px;
  line-height: 1.8;
}

hr {
  visibility: hidden;
}

.date {
  position: absolute;
  top: 5px;
  right: 10px;
  font-size: 12pt;
  font-style: italic;
  font-weight: normal;
}

@media screen and (max-width: 600px) {
  .container {
    width: 100%;
  }
  .post p {
    text-align: justify;
    text-indent: 0px;
    font-size: 14pt;
  }
}
    <body>
  <h1>Welcome to Henry's Blog!</h1>
  <div class="container">
    <div class="post" id="10">
      <span class="date">10/15/17</span>
      <h2>Tenth Post</h2>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Augue neque gravida in fermentum et sollicitudin ac. Feugiat in ante metus dictum. Sed turpis tincidunt id aliquet risus
        feugiat in. Venenatis a condimentum vitae sapien. Ut pharetra sit amet aliquam id diam maecenas ultricies. Praesent elementum facilisis leo vel fringilla est ullamcorper eget. Tristique nulla aliquet enim tortor. Vitae elementum curabitur vitae
        nunc sed velit dignissim. Turpis cursus in hac habitasse platea dictumst quisque. Dictumst quisque sagittis purus sit amet volutpat consequat mauris nunc.</p>
    </div>
    <hr>
    <div class="post" id="9">
      <span class="date">10/15/17</span>
      <h2>Ninth Post</h2>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Augue neque gravida in fermentum et sollicitudin ac. Feugiat in ante metus dictum. Sed turpis tincidunt id aliquet risus
        feugiat in. Venenatis a condimentum vitae sapien. Ut pharetra sit amet aliquam id diam maecenas ultricies. Praesent elementum facilisis leo vel fringilla est ullamcorper eget. Tristique nulla aliquet enim tortor. Vitae elementum curabitur vitae
        nunc sed velit dignissim. Turpis cursus in hac habitasse platea dictumst quisque. Dictumst quisque sagittis purus sit amet volutpat consequat mauris nunc.</p>
    </div>
    <hr>
    <div class="post" id="8">
      <span class="date">10/15/17</span>
      <h2>Eighth Post</h2>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Augue neque gravida in fermentum et sollicitudin ac. Feugiat in ante metus dictum. Sed turpis tincidunt id aliquet risus
        feugiat in. Venenatis a condimentum vitae sapien. Ut pharetra sit amet aliquam id diam maecenas ultricies. Praesent elementum facilisis leo vel fringilla est ullamcorper eget. Tristique nulla aliquet enim tortor. Vitae elementum curabitur vitae
        nunc sed velit dignissim. Turpis cursus in hac habitasse platea dictumst quisque. Dictumst quisque sagittis purus sit amet volutpat consequat mauris nunc.</p>
    </div>
    <hr>
    <div class="post" id="7">
      <span class="date">10/15/17</span>
      <h2>Seventh Post</h2>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Augue neque gravida in fermentum et sollicitudin ac. Feugiat in ante metus dictum. Sed turpis tincidunt id aliquet risus
        feugiat in. Venenatis a condimentum vitae sapien. Ut pharetra sit amet aliquam id diam maecenas ultricies. Praesent elementum facilisis leo vel fringilla est ullamcorper eget. Tristique nulla aliquet enim tortor. Vitae elementum curabitur vitae
        nunc sed velit dignissim. Turpis cursus in hac habitasse platea dictumst quisque. Dictumst quisque sagittis purus sit amet volutpat consequat mauris nunc.</p>
    </div>
    <hr>
    <div class="post" id="6">
      <span class="date">10/15/17</span>
      <h2>Sixth Post</h2>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Augue neque gravida in fermentum et sollicitudin ac. Feugiat in ante metus dictum. Sed turpis tincidunt id aliquet risus
        feugiat in. Venenatis a condimentum vitae sapien. Ut pharetra sit amet aliquam id diam maecenas ultricies. Praesent elementum facilisis leo vel fringilla est ullamcorper eget. Tristique nulla aliquet enim tortor. Vitae elementum curabitur vitae
        nunc sed velit dignissim. Turpis cursus in hac habitasse platea dictumst quisque. Dictumst quisque sagittis purus sit amet volutpat consequat mauris nunc.</p>
    </div>
    <hr>
    <div class="post" id="5">
      <span class="date">10/15/17</span>
      <h2>Fifth Post</h2>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Augue neque gravida in fermentum et sollicitudin ac. Feugiat in ante metus dictum. Sed turpis tincidunt id aliquet risus
        feugiat in. Venenatis a condimentum vitae sapien. Ut pharetra sit amet aliquam id diam maecenas ultricies. Praesent elementum facilisis leo vel fringilla est ullamcorper eget. Tristique nulla aliquet enim tortor. Vitae elementum curabitur vitae
        nunc sed velit dignissim. Turpis cursus in hac habitasse platea dictumst quisque. Dictumst quisque sagittis purus sit amet volutpat consequat mauris nunc.</p>
    </div>
    <hr>
    <div class="post" id="4">
      <span class="date">10/15/17</span>
      <h2>Fourth Post</h2>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Augue neque gravida in fermentum et sollicitudin ac. Feugiat in ante metus dictum. Sed turpis tincidunt id aliquet risus
        feugiat in. Venenatis a condimentum vitae sapien. Ut pharetra sit amet aliquam id diam maecenas ultricies. Praesent elementum facilisis leo vel fringilla est ullamcorper eget. Tristique nulla aliquet enim tortor. Vitae elementum curabitur vitae
        nunc sed velit dignissim. Turpis cursus in hac habitasse platea dictumst quisque. Dictumst quisque sagittis purus sit amet volutpat consequat mauris nunc.</p>
    </div>
    <hr>
    <div class="post" id="3">
      <span class="date">10/15/17</span>
      <h2>Third Post</h2>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Augue neque gravida in fermentum et sollicitudin ac. Feugiat in ante metus dictum. Sed turpis tincidunt id aliquet risus
        feugiat in. Venenatis a condimentum vitae sapien. Ut pharetra sit amet aliquam id diam maecenas ultricies. Praesent elementum facilisis leo vel fringilla est ullamcorper eget. Tristique nulla aliquet enim tortor. Vitae elementum curabitur vitae
        nunc sed velit dignissim. Turpis cursus in hac habitasse platea dictumst quisque. Dictumst quisque sagittis purus sit amet volutpat consequat mauris nunc.</p>
    </div>
    <hr>
    <div class="post" id="2">
      <span class="date">10/15/17</span>
      <h2>Second Post</h2>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Augue neque gravida in fermentum et sollicitudin ac. Feugiat in ante metus dictum. Sed turpis tincidunt id aliquet risus
        feugiat in. Venenatis a condimentum vitae sapien. Ut pharetra sit amet aliquam id diam maecenas ultricies. Praesent elementum facilisis leo vel fringilla est ullamcorper eget. Tristique nulla aliquet enim tortor. Vitae elementum curabitur vitae
        nunc sed velit dignissim. Turpis cursus in hac habitasse platea dictumst quisque. Dictumst quisque sagittis purus sit amet volutpat consequat mauris nunc.</p>
    </div>
    <hr>
    <div class="post" id="1">
      <h2>First Post</h2>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Augue neque gravida in fermentum et sollicitudin ac. Feugiat in ante metus dictum. Sed turpis tincidunt id aliquet risus
        feugiat in. Venenatis a condimentum vitae sapien. Ut pharetra sit amet aliquam id diam maecenas ultricies. Praesent elementum facilisis leo vel fringilla est ullamcorper eget. Tristique nulla aliquet enim tortor. Vitae elementum curabitur vitae
        nunc sed velit dignissim. Turpis cursus in hac habitasse platea dictumst quisque. Dictumst quisque sagittis purus sit amet volutpat consequat mauris nunc.</p>
    </div>
    <hr>
    <p>Blog Posts: <a href="#1">1</a> <a href="#2">2</a> <a href="#3">3</a> <a href="#4">4</a> <a href="#5">5</a> <a href="#6">6</a> <a href="#7">7</a> <a href="#8">8</a> <a href="#9">9</a> <a href="#10">10</a></p>
  </div>
</body>

</html>

    Note: because the surrounding elements don't take the absolute positioned element into account, I suggest using media queries to change its position on small screens, instead of trying to squash it