0

I am trying to make a newspaper type footer.
I've got all the things fine.
The problem is that i have 2 <div>s inside the newspaper <div class = "newspaper" , each having 1 <p> .
But, the first <p> is split across the two sides of the vertical line.
U can see it here, but if U dont, then: Copy the code and paste it in notepad.
And open it with a browser.
Hover on "FeedBack".
It would be outlined
Now U should see a part pf the outline box on the other side of the vertical line.
If U dont, then try changing the size of the browser.
Is there any way to avoid this??

p {
  font-size: 20px;
  font-family: Comic Sans MS;
}

footer {
  position: relative;
  top: 10px;
  background-color: #316441;
  border: solid black 2px;
}

.con {
  text-align: left;
  margin-left: 10px;
  margin-right: 10px;
}

.contact {
  color: white;
  font-weight: 5px;
  font-size: 40px;
}

.fol {
  margin-left: 10px;
  margin-right: 10px;
  text-align: left;
}

.follow {
  color: white;
  font-weight: 5px;
  font-size: 40px;
}

a.email {
  position: relative;
  top: 5px;
  padding: 5px;
  color: white;
  text-decoration: none;
}

a.feedback {
  position: relative;
  top: 17px;
  padding: 5px;
  color: white;
  text-decoration: none;
}

a.feedback:hover,
a.email:hover {
  outline: 2px white solid;
  padding: 5px;
}

.sm {
  padding: 8px;
  font-size: 30px !important;
  text-align: center;
  text-decoration: none;
  border: white 2px solid;
  border-radius: 5px;
  background-color: black;
  color: white;
}

.newspaper {
  -webkit-column-count: 2;
  -moz-column-count: 2;
  column-count: 2;
  -webkit-column-rule: 2px #d3d3d3 solid;
  -moz-column-rule: 2px #d3d3d3 solid;
  column-rule: 2px #d3d3d3 solid;
  -webkit-column-gap: 0;
  -moz-column-gap: 0;
  column-gap: 0;
}
<!DOCTYPE html>
<html>

<head>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>

<body>
  <p>
    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
    in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
  <p>
    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
    in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
  <p>
    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
    in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
  <p>
    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
    in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
  <footer>
    <div class="newspaper">
      <div class="con">
        <p><span class="contact">Contact Us: </span><br><a href="javascrit:void(0)" class="email"><i class="fa fa-envelope-o" aria-hidden="true"></i> Email: HyperMathsMail<span style="font-family: 'New Times Roman'">&#64;</span>gmail.com</a><br>
          <a href="C:/Users/imadhami/Desktop/Do Not Open/feedback.html" class="feedback" target="_blank"><i class="fa fa-comments-o" aria-hidden="true"></i> FeedBack</a></p>
      </div>
      <div class="fol">
        <p><span class="follow">Follow Us: </span><span style="position: relative;left: 5px;"><br><a href="javascript:void(0)" class="fa fa-google-plus sm fa-fw"></a> <a href="javascript:void(0)" class="fa fa-twitter sm fa-fw"></a> <a href="javascript:void(0)" class="fa fa-facebook sm fa-fw"></a> <a href="javascript:void(0)" class="fa fa-linkedin sm fa-fw"></a> <a href="javascript:void(0)" class="fa fa-instagram sm fa-fw"></a> <a href="javascript:void(0)" class="fa fa-pinterest sm fa-fw"></a> <a href = "javascript:void(0)" class="fa fa-youtube-play sm fa-fw" ></a></span></p>
      </div>
    </div>
  </footer>
</body>

</html>
DarkGuy10
  • 15
  • 11
  • Reduce the value on `a.feedback ` from `top: 17px` to about `15px`? Or reduce the padding... – sol Jul 21 '17 at 09:50
  • Why do you want to use column-count ? You know exactly what you have in left and right column of your footer, you clearly separated left and right part... you can just float:left and right each block a,d add a clear, or use a display:inline-block for the 2 blocks ? column-count is usefull if you have a large text and want to adust your text from left to right depending on the space you have, but in your case it does not look usefull – Pierre Granger Jul 21 '17 at 09:50
  • @ Pierre Granger . Please give a complete answer . I am new to html and css. Please make the changes in the program and give it as an answer. – DarkGuy10 Jul 21 '17 at 09:54
  • @ ovokuro. That `top:17px` is important for differentiating feedback and email. cant reduce it. Any more answers?? – DarkGuy10 Jul 21 '17 at 09:58

3 Answers3

0

Replacing column-count with display: flex appears to give you the same result and fixes the issue?

p {
  font-size: 20px;
  font-family: Comic Sans MS;
}

footer {
  position: relative;
  top: 10px;
  background-color: #316441;
  border: solid black 2px;
}

.con {
  text-align: left;
  margin-left: 10px;
  margin-right: 10px;
  border-right: 3px solid white;
}

.contact {
  color: white;
  font-weight: 5px;
  font-size: 40px;
}

.fol {
  margin-left: 10px;
  margin-right: 10px;
  text-align: left;
}

.follow {
  color: white;
  font-weight: 5px;
  font-size: 40px;
}

a.email {
  position: relative;
  top: 5px;
  padding: 5px;
  color: white;
  text-decoration: none;
}

a.feedback {
  position: relative;
  top: 17px;
  padding: 5px;
  color: white;
  text-decoration: none;
}

a.feedback:hover,
a.email:hover {
  outline: 2px white solid;
  padding: 5px;
}

.sm {
  padding: 8px;
  font-size: 30px !important;
  text-align: center;
  text-decoration: none;
  border: white 2px solid;
  border-radius: 5px;
  background-color: black;
  color: white;
}

.newspaper {
display: flex;
}
<!DOCTYPE html>
<html>

<head>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>

<body>
  <p>
    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
    in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
  <p>
    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
    in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
  <p>
    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
    in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
  <p>
    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
    in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
  <footer>
    <div class="newspaper">
      <div class="con">
        <p><span class="contact">Contact Us: </span><br><a href="javascrit:void(0)" class="email"><i class="fa fa-envelope-o" aria-hidden="true"></i> Email: HyperMathsMail<span style="font-family: 'New Times Roman'">&#64;</span>gmail.com</a><br>
          <a href="C:/Users/imadhami/Desktop/Do Not Open/feedback.html" class="feedback" target="_blank"><i class="fa fa-comments-o" aria-hidden="true"></i> FeedBack</a></p>
      </div>
      <div class="fol">
        <p><span class="follow">Follow Us: </span><span style="position: relative;left: 5px;"><br><a href="javascript:void(0)" class="fa fa-google-plus sm fa-fw"></a> <a href="javascript:void(0)" class="fa fa-twitter sm fa-fw"></a> <a href="javascript:void(0)" class="fa fa-facebook sm fa-fw"></a> <a href="javascript:void(0)" class="fa fa-linkedin sm fa-fw"></a> <a href="javascript:void(0)" class="fa fa-instagram sm fa-fw"></a> <a href="javascript:void(0)" class="fa fa-pinterest sm fa-fw"></a> <a href = "javascript:void(0)" class="fa fa-youtube-play sm fa-fw" ></a></span></p>
      </div>
    </div>
  </footer>
</body>

</html>
sol
  • 19,364
  • 5
  • 33
  • 48
0

I suggest that you do not use the top property on your a.email and a.feedback CSS selectors. Elements positioned like this become difficult to maintain, and leads to weird issues, like the issue you're currently having.

Remove the top and position: relative CSS properties, add display: block to both elements and, finally, you can use padding as appropriate to create spacing:

a.email {
  padding: 10px 5px;
  display: block;
  color: white;
  text-decoration: none;
}

a.feedback {
  padding: 10px 5px;
  display: block;
  color: white;
  text-decoration: none;
}

This answer provides more info on why to avoid position: relative top.

AdamMcquiff
  • 1,974
  • 4
  • 22
  • 40
0

You don't have to use column-count as you know exactly what there is in each column. column-count is usefull for large text, but is not what you need here i think. You can use display:table instead.

p {
  font-size: 20px;
  font-family: Comic Sans MS;
}

footer {
  position: relative;
  top: 10px;
  background-color: #316441;
  border: solid black 2px;
  display:table ;
  width:100% ;
}

.newspaper {
  display:table-row ;
}

.newspaper>div {
  display:table-cell ;
  padding: 0 10px;
}

.newspaper>div.con {
  border-right:3px solid white ;
}

.contact {
  color: white;
  font-weight: 5px;
  font-size: 40px;
}

.follow {
  color: white;
  font-weight: 5px;
  font-size: 40px;
}

a.email {
  position: relative;
  top: 5px;
  padding: 5px;
  color: white;
  text-decoration: none;
}

a.feedback {
  position: relative;
  top: 17px;
  padding: 5px;
  color: white;
  text-decoration: none;
}

a.feedback:hover,
a.email:hover {
  outline: 2px white solid;
  padding: 5px;
}

.sm {
  padding: 8px;
  font-size: 30px !important;
  text-align: center;
  text-decoration: none;
  border: white 2px solid;
  border-radius: 5px;
  background-color: black;
  color: white;
}

.newspaper div:first-child() {
  border-right:1px solid white ;
}
<!DOCTYPE html>
<html>

<head>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>

<body>
  <p>
    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
    in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
  <footer>
    <div class="newspaper">
      <div class="con">
        <p><span class="contact">Contact Us: </span><br><a href="javascrit:void(0)" class="email"><i class="fa fa-envelope-o" aria-hidden="true"></i> Email: HyperMathsMail<span style="font-family: 'New Times Roman'">&#64;</span>gmail.com</a><br>
          <a href="C:/Users/imadhami/Desktop/Do Not Open/feedback.html" class="feedback" target="_blank"><i class="fa fa-comments-o" aria-hidden="true"></i> FeedBack</a></p>
      </div>
      <div class="fol">
        <p><span class="follow">Follow Us: </span><span style="position: relative;left: 5px;"><br><a href="javascript:void(0)" class="fa fa-google-plus sm fa-fw"></a> <a href="javascript:void(0)" class="fa fa-twitter sm fa-fw"></a> <a href="javascript:void(0)" class="fa fa-facebook sm fa-fw"></a> <a href="javascript:void(0)" class="fa fa-linkedin sm fa-fw"></a> <a href="javascript:void(0)" class="fa fa-instagram sm fa-fw"></a> <a href="javascript:void(0)" class="fa fa-pinterest sm fa-fw"></a> <a href = "javascript:void(0)" class="fa fa-youtube-play sm fa-fw" ></a></span></p>
      </div>
    </div>
  </footer>
</body>

</html>
Pierre Granger
  • 1,973
  • 2
  • 13
  • 20