Question 223594 in Html Question posted in
Some basic documentation can be found here.

Html – An element with CSS float moving out from its parent element

In my app, there is a part where it lists articles. Title and author are displayed. The problem is that when the author can’t fit to one line with the title but the title is not long enough to split into two lines, the author ("by Someone") is positioned in the middle of the border like this:
Showcase of my problem

I haven’t got much knowledge with float property (and same with Less), the only thing I know is that it can move things to left or right of all DOM siblings. How to make sure that this "by Someone" span won’t move out from layout like this (instead it will make the parent increase its size)?

My code (I used Less to style that):

a.post {
  text-decoration: none;
  padding: 10px;
  display: block;
  cursor: pointer;

  &:not(:last-child) {
    border-bottom: #aaa solid 1px;
  }

  &:hover {
    background: #f5f5f5;
  }

  &:active {
    background: #eee;
  }

  .author {
    float: right;
  }
}
<span>
  <a class="post">
    <b>The best article you've ever seen</b>
    <span class="author">by Someone</span>
  </a>
  <a class="post">
    <b>The best article you've ever seen 2</b>
    <span class="author">by Someone</span>
  </a>
  <a class="post">
    <b>The best article you've ever seen but it has a very very long title</b>
    <span class="author">by Someone</span>
  </a>
  <a class="post">
    <b>The best article you've ever seen 3</b>
    <span class="author">by Someone</span>
  </a>
</span>

Note that I used an a element because in my real app it links somewhere.

Tags:

2

Answers


  1. 0

    I think you can solve this by adding width:100%; float:left; to the a.post style like this:

    a.post {
  text-decoration: none;
  padding: 10px;
  display: block;
  cursor: pointer;
  width:100%;
  float:left;

  &:not(:last-child) {
    border-bottom: #aaa solid 1px;
  }

  &:hover {
    background: #f5f5f5;
  }

  &:active {
    background: #eee;
  }

  .author {
    float: right;
  }
}
    <span>
  <a class="post">
    <b>The best article you've ever seen</b>
    <span class="author">by Someone</span>
  </a>
  <a class="post">
    <b>The best article you've ever seen 2</b>
    <span class="author">by Someone</span>
  </a>
  <a class="post">
    <b>The best article you've ever seen but it has a very very long title.</b>
    <span class="author">by Someone</span>
  </a>
  <a class="post">
    <b>The best article you've ever seen 3</b>
    <span class="author">by Someone</span>
  </a>
</span>

    If width: 100% overflows the width of your container, you can add box-sizing: border-box; so its padding is calculated in the 100% width, and not added to it.

    I hope this helps! Greetings.

    Login or Signup to reply.
  2. 0

    Your HTML is questionable – I would suggest following semantic rule as well as exploring flexbox or grid system in CSS.

    .post {
  padding: 10px;
  cursor: pointer;
  border-bottom: #aaa solid 1px;
}

.post:last-child {
  border-bottom: none;
}

.post:hover {
  background: #f5f5f5;
}

.post:active {
  background: #eee;
}

.post a {
  text-decoration: none;
  color: inherit;
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
}

.post h1 {
  width: 80%;
}

.post .author {
  width: 20%;
  text-align: right;
}
    <section>
  <div class="post">
    <a href="#">
      <h1>The best article you've ever seen</h1>
      <p class="author">by Someone</p>
    </a>
  </div>
  <div class="post">
    <a href="#">
      <h1>The best article you've ever seen 2</h1>
      <p class="author">by Someone</p>
    </a>
  </div>
  <div class="post">
    <a href="#">
      <h1>The best article you've ever seen but it has a very very long title</h1>
      <p class="author">by Someone</p>
    </a>
  </div>
  <div class="post">
    <a href="#">
      <h1>The best article you've ever seen 3</h1>
      <p class="author">by Someone</p>
    </a>
  </div>
</section>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search