I have a P tag, and the end of a sentence always gives me extra space. I tried to fix it with padding, but not helpful; I want all lines to start and end the same. When I have 3 line sentence, the end of the first line will not end in the same place as title line.
CSS
.notAcceptingPatients {
padding: 11px ;
background: rgba(219, 88, 88, 0.1);
border-radius: 8px;
p {
margin: 2px;
font-size: 15px;
color: $black;
background: none;
line-height: 19px;
font-weight: 400;
padding: 1px 0px;
}
}
<div className="notAcceptingPatients col-med-6"\>
<h6 className="font-weight-bold text-dark "\>
<i
style={{
color: '#D14444',
fontSize: 23,
marginRight: 6,
}}
class="fa fa-info-circle"\>\</i\>
This Dental Clinic is not accepting new patients at
this time \</h6\>
<p className="notAcceptingPatients ml-2"\>
<p\>
the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.\</p\>
</p\>
</div\>
not sure if this is what you meant, because your snippet has some issues, but you might want to add text-align: justify; to the <p> tag and see if it gives the result you want
Related
This question already has answers here:
Li item on two lines. Second line has no margin
(8 answers)
Closed last month.
I have the icon and title next together. When the title is too long, the second line starts under the icon instead of the title. I need help when the title is long and must be under the first letter, not an icon.
<div className="notAcceptingPatients col-med-6"\>
<h6 className="font-weight-bold text-dark "\>
<i
style={{
color: '#D14444',
fontSize: 23,
marginRight: 6,
}}
class="fa fa-info-circle"\>\</i\>
This Dental Clinic is not accepting new patients at
this time \</h6\>
<p className="notAcceptingPatients ml-2"\>
<p\>
the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.\</p\>
</p\>
</div\>
CSS
.notAcceptingPatients {
padding: 11px ;
background: rgba(219, 88, 88, 0.1);
border-radius: 8px;
p {
margin: 2px;
font-size: 15px;
color: $black;
background: none;
line-height: 19px;
font-weight: 400;
padding: 1px 0px;
}
}
For the header, you would want to have it styled with flex positioning. Something like this should work for you:
<h6 style={{ display: 'flex' alignItems: 'center' }}>
<i style={{ color: '#D14444', fontSize: 23, marginRight: 6, }} class="fa fa-info-circle"></i>
This Dental Clinic is not accepting new patients at this time
</h6>
The above photo is the output of the CSS code; it was supposed to display 2 columns (#leftcolumn and #rightcolumn) with some random text inside the 2 columns respectively, but the output displayed just the #leftcolumn with the text in it alone.
Please, how do I solve it?
body {
margin: 0;
padding: 0;
line-height: 1.5em;
}
#header {
background: black;
font-family: Arial;
height: 100px;
}
#contentwrapper {
float: left;
width: 100%;
}
#contentcolumn {
margin: 0px 230px 0px 230px;
}
#leftcolumn {
float: left;
width: 230px;
margin-left: -230px;
background: #f0071b;
}
#rightcolumn {
float: left;
margin-left: -230%;
width: 230px;
background: #20e6d2;
}
.innertext {
margin: 20px;
font-family: Arial;
color: #d6a7c4;
text-align: justify;
}
#footer {
clear: left;
/* Cannot float on left */
width: 100%;
background: #000000;
color: #FFF;
font-family: Arial;
text-align: center;
padding: 4px;
}
/* Navigation Bar Begins here */
ul {
list-style-type: none;
margin: 0;
padding: 0;
background-size: #000;
}
li {
float: left;
border-right: 1px solid #bbb;
}
li:last-child {
border-right: none;
}
li a {
display: block;
color: #FFF;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
li a:hover:not(.active) {
background-color: #d2f7f0;
}
.active {
background-color: #025dfa;
}
/* Responsive Css Layout */
#media (max-width: 840px) {
/* drop Right Column Drop Down */
#leftcolumn {
margin-left: -100px;
}
#rightcolumn {
float: none;
width: 100% margin-left: 0;
clear: both;
}
#contentcolumn {
margin-right: 0;
/* left margin to leftcolumnWidth */
}
}
#media (max-width: 600px) {
/* Drop left column down */
#leftcolumn {
float: none;
width: 100%;
clear: both;
margin-left: 0;
}
#contentcolumn {
margin-left: 0;
}
}
<div id="container">
<div id="header">
<ul style="display: inline;">
<li><a class="active" href="#home">Home</a></li>
<li>About</li>
<li>News</li>
<li>Contact</li>
</ul>
</div>
<div id="contentwrapper">
<div id="contentcolumn">
<div class="innertext">
<b>Welcome!</b><br />Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make
a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages,
and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum. <br />Why do we use it? It is a long established fact that a reader will be distracted by the readable content of a page when looking at
its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English. Many desktop publishing packages and web page editors
now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy. Various versions have evolved over the years, sometimes by accident, sometimes on purpose (injected humour and
the like).
</div>
</div>
</div>
<div id="leftcolumn">
<div class="innertext">
<b>The left Column: <em>230px</em></b><br />Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock, a Latin professor
at Hampden-Sydney College in Virginia, looked up one of the more obscure Latin words, consectetur, from a Lorem Ipsum passage, and going through the cites of the word in classical literature, discovered the undoubtable source. Lorem Ipsum comes
from sections 1.10.32 and 1.10.33 of "de Finibus Bonorum et Malorum"
</div>
</div>
<div id="rightcolumn">
<div class="innertext">
<b>The right column:<em>230px</em></b><br />There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don't look even slightly believable.
If you are going to use a passage of Lorem Ipsum, you need to be sure there isn't anything embarrassing hidden in the middle of text. All the Lorem Ipsum generators on the Internet tend to repeat predefined chunks as necessary, making this the first
true generator on the Internet.
</div>
</div>
<div id="footer">Footer</div>
</div>
margin-left: -230%; moves the element out of the visible area (230% to the left). Erase that and you'll see it again.
Or did you mean pixels instead of percent?
As I understood I created a design using your code. Get some Idea if you expect this way
I have used
display:flex
method, have a look
.header{
background: black;
font-family: Arial;
height: 100px;
}
.contentwrapper{
display: flex;
}
.footer{
clear: left;
width: 100%;
background: #000000;
color: #FFF;
font-family: Arial;
text-align: center;
padding: 4px;
}
.leftcolumn {
background: #f0071b;
}
.rightcolumn {
background: #20e6d2;
}
/* Navigation Bar Begins here */
ul {
list-style-type: none;
margin: 0;
padding: 0;
background-size: #000;
}
li {
float: left;
border-right: 1px solid #bbb;
}
li:last-child {
border-right: none;
}
li a {
display: block;
color: #FFF;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
li a:hover:not(.active) {
background-color: #d2f7f0;
}
.active {
background-color: #025dfa;
}
<div id="container">
<div class="header">
<ul style="display: inline;">
<li><a class="active" href="#home">Home</a></li>
<li>About</li>
<li>News</li>
<li>Contact</li>
</ul>
</div>
<div class="contentwrapper">
<div class="leftcolumn">
<b>The left Column: <em>230px</em></b><br />Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock, a Latin professor
at Hampden-Sydney College in Virginia, looked up one of the more obscure Latin words, consectetur, from a Lorem Ipsum passage, and going through the cites of the word in classical literature, discovered the undoubtable source. Lorem Ipsum comes
from sections 1.10.32 and 1.10.33 of "de Finibus Bonorum et Malorum"
</div>
<div class="innertext">
<b>Welcome!</b><br />Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make
a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages,
and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum. <br />Why do we use it? It is a long established fact that a reader will be distracted by the readable content of a page when looking
at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English. Many desktop publishing packages and web page
editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy. Various versions have evolved over the years, sometimes by accident, sometimes on purpose (injected humour
and the like).
</div>
<div class="rightcolumn">
<b>The right column:<em>230px</em></b><br />There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don't look even slightly believable.
If you are going to use a passage of Lorem Ipsum, you need to be sure there isn't anything embarrassing hidden in the middle of text. All the Lorem Ipsum generators on the Internet tend to repeat predefined chunks as necessary, making this the
first true generator on the Internet.
</div>
</div>
<div class="footer">Footer</div>
</div>
If you visit this link, you can see below image at the center of the page:
On this site, if you mouse over currency symbol present on top right of window, you can see drop down options, once you change a dropdown option, you can see "Usually Delivered in 3-5 business days" text next to price - I want this text below the Price, as in the next image:
This is the CSS I am using and, it doesn't matter how I try, can't get the desired result. Can someone please have an advice for me? Thank you.
font-family: 'Roboto Condensed', sans-serif;
color: #636363;
font-size: 14px;
line-height: 1.5;
}
on
.price-info
Take off
max-width: 31%;
So that it takes up the entire line
Try taking the float:left off of your p tag. That should fix a few issues on your page and might fix the issue you're having with the text displaying in the wrong area.
You should probably also add some html and css to your question. Without it it makes it a hassle to answer.
$(document).ready(function() {
$('.qty-btn').click(function(){
if($('.qty').val() > 0)
{
$('.deliveryMsg').text('Usually Delivered in 3-5 days.');
}else {
alert("Qty must be greater than 0");
}
});
});
body {
background: silver;
}
.section {
height: 400px;
width: 500px;
margin-bottom: 20px;
background: #FFFFFF;
margin-left: 100px;
padding: 10px;
}
/* used for demo purposes */
.product-img {
background: silver;
opacity: 0.5;
height: 150px;
width: 150px;
/* center the img within the col */
display: block;
margin: auto;
}
.col-left {
width: 40%;
}
.col-right {
float: right;
margin-top:-165px;
text-align: left;
width: 60%;
}
.title {
font-weight: bold;
}
.price {
margin-top: -5px;
margin-bottom: -5px;
color: blue;
}
input[type="text"] {
width: 50px;
}
span {
font-size: small;
font-weight: bold;
}
input[type="button"] {
background: orange;
color: #FFFFFF;
}
.qty {
width: 20px !important;
}
.wishlist {
width: 130px !important;
}
.deliveryMsg {
font-weight: bold;
opacity: 0.5;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="section">
<div class="col-left">
<div class="product-img"></div>
</div>
<div class="col-right">
<p class="title" >Golden Waves Marble Texture Apple IPhone 4 Phone Case</p>
<hr />
<ul>
<li>Device: Apple iPhone 4</li>
<li>Design: Marbles</li>
<li>Material: Polycarbonate Hard Case</li>
</ul>
<hr />
<h3 class="price">499.00</h3>
<hr />
<form>
<span>Check Delivery Availability <input type="text" placeholder="Enter PIN Code" /> <input type="button" value="CHECK" /></span>
<br /><br />
<span>Qty: <input class="qty" type="text" /> <input class="qty-btn" type="button" value="ADD TO CART" /> <input class="wishlist" type="text" placeholder="SAVE TO WISHLIST" /></span>
<br /><br />
<span class="deliveryMsg"></span>
</form>
</div>
</div>
<div class="section">
<h2>Product Description</h2>
<p>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
</p>
</div>
Hope that helps!
I'm learning frontend web design and i'm trying to build a fully responsive blog like static page.
But my problem is the image are not aligning properly with the paragraph.
As the "Dont Forget to follow Up!" image was supposed to come in the first post content only that is Don't forget to follow Up should be with content What is Lorem Ipsum .. But it's showing up with Where Does it comes from.
My Question is Why Does This happens ? workaround i've seen here How to float paragraph next to image without wrapping the image? but i didn't get this why this problem actually happens.
body {
background-color: #DCDBD9;
color: #2C2C2C;
font: normal 100% Cambria, Georgia, serif;
}
h1 {
font-size: 1.5em;
font-style: italic;
font-weight: normal;
}
h1 a {
color: #747474;
font: bold 0.45833em Calibri, Optima, Arial, sans-serif;
letter-spacing: 0.15em;
text-transform: : uppercase;
text-decoration: none;
}
#page {
margin: 36px auto;
width: 90%;
}
#nav {
float: right;
/*padding: 42px 0 0 30px;*/
}
#nav li {
float: left;
margin: 0 0 0 5px;
}
.blog {
clear: both;
margin: 50px auto 53px;
width: 93.75%;
}
.blog .main {
float: left;
width: 62.88%;
/* 566px / 900px */
}
.blog .other {
float: right;
width: 36.77%;
/* 331px / 900px */
}
.lede {
padding: 0.8em 5.333%;
}
.recent-entries {
margin: 0 auto;
width: 69.788%;
/* 231 / 331px */
}
.article {
padding: 40px 8.480%;
}
.date {
float: left;
margin-left: -17.088%;
/* 81px / 474px */
width: 14.55%;
/* 69px / 474px */
border: 1px solid black;
border-radius: 2px;
padding: 0.59%;
transition-property: background;
transition-duration: 0.3s;
transition-timing-function: ease;
}
.date:hover {
background: #9c3;
}
img,
embed,
object,
video {
max-width: 100%;
}
.figure {
float: right;
margin-bottom: 0.5em;
margin-left: 2.531%;
/* 12px / 474px */
width: 48.734%;
/* 231px / 474px */
}
h2 {
color: #F90B6D;
font-family: 'Open Sans', sans-serif;
font-size: 1.2em;
font-weight: 300;
}
p {
color: #222;
font-family: 'Open Sans', sans-serif;
font-size: 0.9em;
font-weight: 400;
}
<!-- <h1> This is the top header! Read More </h1> -->
<div id="page">
<ul id="nav">
<li>About me
</li>
<li>About Blog
</li>
<li>Stuff
</li>
<li>Junk Stuff
</li>
</ul>
<div class="blog section">
<h1 class="lede">Responsive Blog </h1>
<div class="main">
<div class="article">
<div>
<div class="date">
1 Sept 2015
</div>
<h2> What is Lorem Ipsum ?</h2>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages , and more recently
with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
<div class="figure">
<p>
<img src="http://i.stack.imgur.com/I3hYQ.png" alt="">
<b class="figcaption">Remember This</b>
</p>
</div>
</div>
<div class="date">
5 Sept 2015
</div>
<h2> Where does it comes from ? </h2>
<p>Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock, a Latin professor at Hampden-Sydney College in Virginia, looked
up one of the more obscure Latin words, consectetur, from a Lorem Ipsum passage, and going through the cites of the word in classical literature, discovered the undoubtable source. Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of "de Finibus
Bonorum et Malorum" (The Extremes of Good and Evil) by Cicero, written in 45 BC. This book is a treatise on the theory of ethics, very popular during the Renaissance. The first line of Lorem Ipsum, "Lorem ipsum dolor sit amet..", comes from
a line in section 1.10.32. The standard chunk of Lorem Ipsum used since the 1500s is reproduced below for those interested. Sections 1.10.32 and 1.10.33 from "de Finibus Bonorum et Malorum" by Cicero are also reproduced in their exact original
form, accompanied by English versions from the 1914 translation by H. Rackham.</p>
</div>
</div>
<!--/end.main -->
<div class="other">
<p>Recent Enteries</p>
<div class="recent-entries">
<p>1.Simply First Entry</p>
<p>2. Simply second Entry</p>
</div>
</div>
<!-- /end .other -->
</div>
<!--/end .blog.section -->
</div>
<!-- /end #page-->
floatting element should come first/ahead in code from element in the natural flux.
see (among others links you can find on search engines) : https://css-tricks.com/all-about-floats/
body {
background-color: #DCDBD9;
color: #2C2C2C;
font: normal 100% Cambria, Georgia, serif;
}
h1 {
font-size: 1.5em;
font-style: italic;
font-weight: normal;
}
h1 a {
color: #747474;
font: bold 0.45833em Calibri, Optima, Arial, sans-serif;
letter-spacing: 0.15em;
text-transform: : uppercase;
text-decoration: none;
}
#page {
margin: 36px auto;
width: 90%;
}
#nav {
float: right;
/*padding: 42px 0 0 30px;*/
}
#nav li {
float: left;
margin: 0 0 0 5px;
}
.blog {
clear: both;
margin: 50px auto 53px;
width: 93.75%;
}
.blog .main {
float: left;
width: 62.88%;
/* 566px / 900px */
}
.blog .other {
float: right;
width: 36.77%;
/* 331px / 900px */
}
.lede {
padding: 0.8em 5.333%;
}
.recent-entries {
margin: 0 auto;
width: 69.788%;
/* 231 / 331px */
}
.article {
padding: 40px 8.480%;
}
.date {
float: left;
margin-left: -17.088%;
/* 81px / 474px */
width: 14.55%;
/* 69px / 474px */
border: 1px solid black;
border-radius: 2px;
padding: 0.59%;
transition-property: background;
transition-duration: 0.3s;
transition-timing-function: ease;
}
.date:hover {
background: #9c3;
}
img,
embed,
object,
video {
max-width: 100%;
}
.figure {
float: right;
margin-bottom: 0.5em;
margin-left: 2.531%;
/* 12px / 474px */
width: 48.734%;
/* 231px / 474px */
}
h2 {
color: #F90B6D;
font-family: 'Open Sans', sans-serif;
font-size: 1.2em;
font-weight: 300;
}
p {
color: #222;
font-family: 'Open Sans', sans-serif;
font-size: 0.9em;
font-weight: 400;
}
<!-- <h1> This is the top header! Read More </h1> -->
<div id="page">
<ul id="nav">
<li>About me
</li>
<li>About Blog
</li>
<li>Stuff
</li>
<li>Junk Stuff
</li>
</ul>
<div class="blog section">
<h1 class="lede">Responsive Blog </h1>
<div class="main">
<div class="article">
<div>
<div class="date">
1 Sept 2015
</div>
<div class="figure">
<p>
<img src="http://dummyimage.com/290x400&text=Dont-Forget-To-Follow-Up" alt="">
<b class="figcaption">Remember This</b>
</p>
</div>
<h2> What is Lorem Ipsum ?</h2>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages , and more recently
with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
</div>
<div class="date">
5 Sept 2015
</div>
<h2> Where does it comes from ? </h2>
<p>Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock, a Latin professor at Hampden-Sydney College in Virginia, looked
up one of the more obscure Latin words, consectetur, from a Lorem Ipsum passage, and going through the cites of the word in classical literature, discovered the undoubtable source. Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of "de Finibus
Bonorum et Malorum" (The Extremes of Good and Evil) by Cicero, written in 45 BC. This book is a treatise on the theory of ethics, very popular during the Renaissance. The first line of Lorem Ipsum, "Lorem ipsum dolor sit amet..", comes from
a line in section 1.10.32. The standard chunk of Lorem Ipsum used since the 1500s is reproduced below for those interested. Sections 1.10.32 and 1.10.33 from "de Finibus Bonorum et Malorum" by Cicero are also reproduced in their exact original
form, accompanied by English versions from the 1914 translation by H. Rackham.</p>
</div>
</div>
<!--/end.main -->
<div class="other">
<p>Recent Enteries</p>
<div class="recent-entries">
<p>1.Simply First Entry</p>
<p>2. Simply second Entry</p>
</div>
</div>
<!-- /end .other -->
</div>
<!--/end .blog.section -->
</div>
<!-- /end #page-->
Each HTML element has got a display value which defines how the element is displayed. This value for most elements is block or inline; block elements always start on a new line and take up the full width available while inline elements stay on the same line and take only the amount of space they need.
<p> elements fall within the block elements class while <img> elements fall in the inline one.
For further explanations and example take a look here W3C School - HTML Block and Inline Elements
As the title explains, I have a little problem displaying a <hr> line.
In IE 7, 8, 9, Google Chrome, Opera Safari, all the same, no problem just one doesn't support the CSS3 effects like shadows, etc.
What I'm trying 2 do is, separate some news article by adding that line, but in Firefox that line is out of the container, is like is having position: absolute; and padding: 500px;
Here is my html markup :
<div class="container">
<div class="main-content-container">
<div class="article-container">
<div class="article-header">
<p class="article-count">0</p><p class="article-categories">1,2, 3, 4, 5</p>
<h1 class="article-title"><a href='#'>Lorem Ipsum is simply dummy</a></h1>
<p class="article-auth-date">2013 Apr 06</p>
</div> <!-- end of article-header -->
<img alt="bla bla bla" src="http:/localhost/uploads/test.png" style="border: none;">
<div class="article-post">
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p></div><!-- end of article-post-->
</div>
<hr class="fancy-hr">
</div><!-- end of article-container -->
</div><!-- end of main-content-container -->
<aside></aside><!-- end of aside -->
</div><!-- end of container -->
And this is the CSS :
.main-content-container {
float:left;
margin: 5px 0 0;
padding: 0;
width: 660px;
height: 800px;
background-color: white;
-moz-box-shadow:inset 0px 0px 20px 4px rgba(173, 173, 173, 0.5);
-webkit-box-shadow:inset 0px 0px 20px 4px rgba(173, 173, 173, 0.5);
box-shadow:inset 0px 0px 20px 4px rgba(173, 173, 173, 0.5);
border: 1px solid #818080;
.article-container {
float: left;
margin: 20px;
padding: 0;
width: 615px;
}
.article-header {
float: left;
margin: 0;
padding: 5px 0 0 ;
width: 100%;
height: 50px;
margin-bottom: 20px;
}
.article-post {
border-top:1px solid #D3D3D3;
text-align:justify;
padding:3px;
margin-top:3px;
margin-bottom:5px;
font-size: 14px;
font-family: 'Lato', sans-serif;
color: #000;
}
hr.fancy-hr {
width: 100%;
border: 0;
height: 1px;
background: #c5c3c3;
-webkit-box-shadow: 2px 0px 20px rgba(50, 50, 50, 0.75);
-moz-box-shadow: 2px 0px 20px rgba(50, 50, 50, 0.75);
box-shadow: 2px 0px 20px rgba(50, 50, 50, 0.75);
}
And 2 screenshots from both Google Chrome & Firefox:
http://i1217.photobucket.com/albums/dd399/MarianStroiu/googlechrome.png Google Chrome
http://i1217.photobucket.com/albums/dd399/MarianStroiu/ff.png Firefox
hr has very little support and is not treated well in browsers. It is not used a lot in my experience. The code below is common practice for what you want, customize it how you feel -
div.line {
border-bottom:thin solid #fff;
}
<div class="container">
<div class="main-content-container">
<div class="article-container">
<div class="article-header">
<p class="article-count">0</p><p class="article-categories">1,2, 3, 4, 5</p>
<h1 class="article-title"><a href='#'>Lorem Ipsum is simply dummy</a></h1>
<p class="article-auth-date">2013 Apr 06</p>
</div> <!-- end of article-header -->
<img alt="bla bla bla" src="http:/localhost/uploads/test.png" style="border: none;">
<div class="article-post">
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p></div><!-- end of article-post-->
</div>
<!--<hr class="fancy-hr">--> do not use
<div class="line"></div>
</div><!-- end of article-container -->
</div><!-- end of main-content-container -->
This is related to the foreground color, Kevin Lynch's fix did not work for me on a page with a light grey (#d1d1d1) body background.
Changing the HR colour to white does work and it now appears as etched.
hr {color: #ffffff;}
In practice the HR just needs to be any shade that is lighter than the background, so white will always work.
I'm sure this isn't ideal for you, but rather than having to worry about all that styling, why not just make it an IMAGE instead of HR? It would be much more easily maintained and could simply be included as a wide image and simplify all your CSS.
Otherwise, have you tried lowering the width of the HR? It sounds dumb, but I have encountered situations before where the width has made the HR element pop out of its div.