0

This grid works fine except that when I center the text on the right the br stops working so a ends up on its own line... Tho it works fine without the link or without the center.

I can fix this with a p or div wrapper around that collection of text but maybe a better way?

Sorry for ignorance. Thanks.

.container {
  display: grid;
  grid-template-columns: 1fr 1fr;
}

.right {
  background-color: lightgray;
  display: flex;
  align-items: center;
}

.left {
  background-color: darkgray;
}
<div class=container>
  <div class="left">
    left<br>left<br>left<br>left
  </div>
  <div class="right">
    <a href="http://www.google.com">google</a><br>right<br>right
  </div>
</div>
&nbsp;
<div class=container>
  <div class="left">
    left<br>left<br>left<br>left
  </div>
  <div class="right">
    google<br>right<br>right
  </div>
</div>
Rakka Rage
  • 15,941
  • 8
  • 33
  • 45

1 Answers1

3

Rewrite your code so it looks like this, using <br> is not a good way to seperate seperate lines of text

.container {
  display: grid;
  grid-template-columns: 1fr 1fr;
}

.right {
  background-color: lightgray;
  display: flex;
  align-items: center;
  flex-direction: column;
}

.left {
  background-color: darkgray;
}

/** This will remove the space between the p tags **/
p {
   margin: 0;
}
<div class=container>
  <div class="left">
    <p>left</p>
    <p>left</p>
    <p>left</p>
    <p>left</p>
  </div>
  <div class="right">
    <p><a href="http://www.google.com">google</a></p>
    <p>right</p>
    <p>right</p>
  </div>
</div>
Smokey Dawson
  • 8,827
  • 19
  • 77
  • 152
  • what else is br used for? as i said it works fine usually and without the a... br works except after a in a flex? is that the rule? – Rakka Rage Jan 07 '19 at 04:02
  • 1
    `br` is used for formatting text, not to be used for layout – Smokey Dawson Jan 07 '19 at 04:04
  • your example has blank lines between each line... if you wrap the whole blocks with div instead of p it fixes that but i was hoping there was a way without an extra fix/wrap tag thanks – Rakka Rage Jan 07 '19 at 04:06
  • tho i mention

    in my question and still do not understand why you can not use br? what i attemp is not layout? i will since no one else answered, and u asked

     – Rakka Rage Feb 06 '19 at 15:26
  • 1
    For more information on when and where to use br go here https://stackoverflow.com/questions/1726073/is-it-sometimes-bad-to-use-br – Smokey Dawson Feb 06 '19 at 21:52
  • both of the top answers there confirm that i am using br correctly to separate lines in an address yet they fail to behave as expected and are not aligned when a url is in the 'list' but thanks :) – Rakka Rage Feb 07 '19 at 00:47