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'">@</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>