Line separator in css

Asked May 26 '15 at 09:37

Active May 26 '15 at 09:41

Viewed 83 times

HTML code snippet:

<div id="post_nav">
    <a class="prev" href="/2014/11/28/markdown-and-html.html">Some title <br/>Prev</a>
    <a class="next" href="/2014/11/30/sample-post.html">Some title <br/>Next</a>
</div>

CSS:

#post_nav {
  width:100%;
  display: inline-block;
  border-bottom: 1px solid $border-color;
}
#post_nav .prev {
  padding: 3% 5% 3% 10%;
  @media (max-width: 1000px) {
    padding: 3% 10%;
  }
  width: 50%;
  display: inline-block;
  float: left;
  text-align: left;
}
#post_nav .next {
  padding: 3% 5% 3% 10%;
  @media (max-width: 1000px) {
    padding: 3% 10%;
  }
  width: 50%;
  display: inline-block;
  text-align: right;
  border-left: 1px solid rgba(0,0,0,0.1);
}

Problem:

It works fine but when left link text is longer than the right link text, the border/line-separator isn't complete. See below snap shot:

How can I resolve this?

edited May 26 '15 at 09:41

Biffen

6,249
6
28
36

asked May 26 '15 at 09:37

Antara Roy

create a demo with relevant code? – G.L.P May 26 '15 at 09:41
Your code looks like : http://jsfiddle.net/qbky1ak6/1/ – ketan May 26 '15 at 09:43
You have an `@media` at-rule inside another ruleset - AFAIK that's not valid, it may screw up your tests. – Jeroen May 26 '15 at 09:43
@ketan Try to increase length of the left link text, the separator won't be complete. – Antara Roy May 26 '15 at 09:54
@AntaraRoy Yes that is because you give `border-left` to `#post_nav .next` so if `.prev` height increase it won't complete. – ketan May 26 '15 at 10:01
1

@AntaraRoy Check http://jsfiddle.net/qbky1ak6/2/ – ketan May 26 '15 at 10:05
@ketan Thanks for the answer but when the `next` link is absent I want the `prev` link not to take the entire space, can i achieve that? – Antara Roy May 26 '15 at 11:19
@AntaraRoy something like? http://jsfiddle.net/qbky1ak6/3/ – ketan May 26 '15 at 11:28
@ketan I want like this - http://i.imgur.com/sG2Mjbt.png – Antara Roy May 26 '15 at 11:38
1

@AntaraRoy For that you should use `display:flex`. http://jsfiddle.net/qbky1ak6/5/ – ketan May 26 '15 at 11:48
@ketan yes this was what i wanted, please post as answer to this question. – Antara Roy May 26 '15 at 12:30
@AntaraRoy i can't answer because this question is closed. – ketan May 26 '15 at 12:31

Line separator in css

0 Answers0