In this snippet, you can find a h2 header with a decoration underline which is implemented with the :after pseudoelement. All is working well until we have a floated image which should appear on the left of the h2 previously mentioned: the h2 will float correctly, however the pseudoelement will not and this breaks the desired effect. (The small orange line should be below the last line of the h2.)
Is there any way around this?
div.post-img-wrap img.thumbnail {
float: left;
max-width: 200px;
padding-right: 20px;
padding-bottom: 10px;
margin-top: 25px;
}
article h2:after {
content: "";
display: block;
z-index: 1;
margin: 0;
width: 10%;
height: 2px;
margin-top: 10px;
left: 0;
background: #E96656 none repeat scroll 0% 0%;
}
<body>
<article>
<header>
<div class="post-img-wrap">
<a href="#">
<img class="thumbnail" src="http://ima.gs/transparent/200x200.png" height="200" width="200" />
</a>
</div>
<h2>This is a very long title with a lot of text in here, so long, so long, so veeeery long</h2>
</header>
<div class="entry-content">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin sed velit a sapien varius tristique. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Praesent mattis eros mi. Donec imperdiet fermentum
lorem. Donec felis nibh, vehicula vel maximus a, aliquet ac ex. Donec euismod magna in pulvinar lobortis. Cras ut orci sollicitudin, rutrum odio nec, vulputate purus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos
himenaeos. Curabitur tristique nibh ac aliquam sollicitudin. Praesent ullamcorper tristique tortor, sit amet mattis diam imperdiet a. Vivamus sagittis id diam sed facilisis. Ut auctor orci et felis accumsan, vel sollicitudin quam eleifend. Nam
sollicitudin turpis augue, molestie pharetra elit vulputate vitae. Quisque nulla ante, vehicula eget dolor non, dapibus congue neque. Vestibulum convallis eros sed sem volutpat auctor.</p>
</div>
</article>
</body>
The problem is that floating elements are out-of-flow:
An element is called out of flow if it is floated, absolutely
positioned, or is the root element.
Therefore, they don't impact surrounding elements as an in-flow element would.
This is explained in 9.5 Floats:
Since a float is not in the flow, non-positioned block boxes created
before and after the float box flow vertically as if the float did not
exist. However, the current and subsequent line boxes created next to
the float are shortened as necessary to make room for the margin box
of the float.
However, block elements that establish a Block Formatting Context (are a BFC roots) are the exception, as explained in 9.5 Floats:
The border box of a table, a block-level replaced element, or an
element in the normal flow that establishes a new block formatting
context […] must not overlap the margin box of any floats in the same
block formatting context as the element itself.
A common way of establishing a BFC is setting overflow to anything but visible, e.g.
article h2:after {
overflow: hidden;
}
div.post-img-wrap img.thumbnail {
float: left;
max-width: 200px;
padding-right: 20px;
padding-bottom: 10px;
margin-top: 25px;
}
article h2:after {
content: "";
display: block;
z-index: 1;
margin: 0;
width: 10%;
height: 2px;
margin-top: 10px;
left: 0;
background: #E96656 none repeat scroll 0% 0%;
overflow: hidden;
}
<article>
<header>
<div class="post-img-wrap">
<a href="#">
<img class="thumbnail" src="http://ima.gs/transparent/200x200.png" height="200" width="200" />
</a>
</div>
<h2>This is a very long title with a lot of text in here, so long, so long, so veeeery long</h2>
</header>
<div class="entry-content">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin sed velit a sapien varius tristique. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Praesent mattis eros mi. Donec imperdiet fermentum
lorem. Donec felis nibh, vehicula vel maximus a, aliquet ac ex. Donec euismod magna in pulvinar lobortis. Cras ut orci sollicitudin, rutrum odio nec, vulputate purus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos
himenaeos. Curabitur tristique nibh ac aliquam sollicitudin. Praesent ullamcorper tristique tortor, sit amet mattis diam imperdiet a. Vivamus sagittis id diam sed facilisis. Ut auctor orci et felis accumsan, vel sollicitudin quam eleifend. Nam
sollicitudin turpis augue, molestie pharetra elit vulputate vitae. Quisque nulla ante, vehicula eget dolor non, dapibus congue neque. Vestibulum convallis eros sed sem volutpat auctor.</p>
</div>
</article>
You can use this code. I added pseudo element (:after) to the anchor (not h2). I also added position: relative to the a tag and position: absolute to the pseudo element.
div.post-img-wrap img.thumbnail {
float: left;
max-width: 200px;
padding-right: 20px;
padding-bottom: 10px;
margin-top: 25px;
}
article h2 > a {
position: relative;
}
article h2 > a:after {
position: absolute;
content: "";
z-index: 1;
width: 10%;
height: 2px;
bottom: -10px;
left: 0;
background: #E96655;
}
<body>
<article>
<header>
<div class="post-img-wrap">
<a href="#">
<img class="thumbnail" src="http://ima.gs/transparent/200x200.png" height="200" width="200" />
</a>
</div>
<h2>This is a very long title with a lot of text in here, so long, so long, so veeeery long</h2>
</header>
<div class="entry-content">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin sed velit a sapien varius tristique. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Praesent mattis eros mi. Donec imperdiet fermentum
lorem. Donec felis nibh, vehicula vel maximus a, aliquet ac ex. Donec euismod magna in pulvinar lobortis. Cras ut orci sollicitudin, rutrum odio nec, vulputate purus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos
himenaeos. Curabitur tristique nibh ac aliquam sollicitudin. Praesent ullamcorper tristique tortor, sit amet mattis diam imperdiet a. Vivamus sagittis id diam sed facilisis. Ut auctor orci et felis accumsan, vel sollicitudin quam eleifend. Nam
sollicitudin turpis augue, molestie pharetra elit vulputate vitae. Quisque nulla ante, vehicula eget dolor non, dapibus congue neque. Vestibulum convallis eros sed sem volutpat auctor.</p>
</div>
</article>
</body>
Related
I've tried every CSS-only implementation of sticky footers that exist on the internet it seems, and for the life of me I cannot figure out why it's not working for me.
The problem code is here: https://jsfiddle.net/7ck2xk2p/1/
So the problem is footer is still just sitting under the content, and is not stuck to the bottom of the page.
As you might be able to see, my most recent attempt was the technique detailed here by Ryan Fait
* {
margin: 0;
}
html, body {
height: 100%;
}
.wrapper {
min-height: 100%;
height: auto !important; /* This line and the next line are not necessary unless you need IE6 support */
height: 100%;
margin: 0 auto -155px; /* the bottom margin is the negative value of the footer's height */
}
.footer, .push {
height: 155px; /* .push must be the same height as .footer */
}
I am very new, so if things are messy in that fiddle please excuse me. The relevant details should still be distinguishable though.
What am I doing wrong?
you can use this approach for sticky footer (CSS only)
html,
body {
height: 100%;
margin: 0;
}
div {
min-height: 100%;
/* equal to footer height */
margin-bottom: -70px
}
div:after {
content: "";
display: block
}
footer,
div:after {
height: 70px
}
footer {
background: green
}
<div>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi dictum vel dolor vel commodo. Nam id nisi eros. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Morbi commodo leo ac enim molestie, vitae sodales
dolor consequat. Donec imperdiet orci at luctus lacinia. Donec bibendum velit sed risus eleifend ultricies. Sed nisl massa, ornare quis augue et, faucibus feugiat sapien. Vestibulum pharetra tempor quam eu congue. Proin posuere lorem quis nisl efficitur
aliquam. Curabitur elit ex, convallis sed fringilla a, varius quis dui. Nullam eget est sed orci imperdiet imperdiet sit amet eget dui. Integer egestas nisi a sagittis rutrum. Quisque id convallis nisl, at blandit nunc. Curabitur elementum viverra tristique.
In auctor pretium mattis. Fusce vulputate porta lacus tincidunt rhoncus. Aenean dapibus tortor non faucibus laoreet. Morbi fringilla leo nisl, imperdiet hendrerit elit semper at. Donec suscipit orci in nulla viverra ultrices. Donec aliquet risus non
libero viverra, sed aliquam massa congue. Aliquam suscipit ullamcorper erat sed vehicula. Donec elementum tincidunt dolor, non scelerisque dolor pretium ut. Praesent vitae porttitor turpis, et pharetra libero. Sed imperdiet tempor facilisis. Cras eget
vehicula dolor.
</div>
<footer>
Sticky Footer.
</footer>
I have this CSS code:
section.products {
display: table;
width: 100%;
table-layout: fixed;
}
section.products > article {
display: table-cell;
width: 33%;
}
This does not set the width correctly (the width of every article is set automatically to fit all article elements to one row). But when I set <article style="width: 33%;"> (inline declaration), the width is right. What is wrong? Thanks for any advice.
EDIT (DEMO): https://jsfiddle.net/Lt822wkq/
The table layout works if you have three child elements as shown below.
If you only have one child element, it will expand to fill up the entire available width, even if you apply an inline style for the width, see Examples 2 and 3.
However, if you set display: block to the single child article, then the width will be 33%, but that is because the element in no longer behaving like a table cell.
section.products {
display: table;
width: 100%;
table-layout: fixed;
border: 1px dotted gray;
}
section.products > article {
display: table-cell;
width: 33%;
border: 1px dotted gray;
}
section.products > article.blocky {
display: block;
}
<section class="products">
<article>Article One Donec adipiscing, lorem non euismod venenatis, diam orci tincidunt magna, ut interdum magna arcu vel elit. Nunc molestie lacus non urna eleifend mattis. Praesent ipsum nulla, tempor malesuada lacinia quis, elementum et tellus. </article>
<article>Article Two Donec adipiscing, lorem non euismod venenatis, diam orci tincidunt magna, ut interdum magna arcu vel elit. Nunc molestie lacus non urna eleifend mattis. Praesent ipsum nulla, tempor malesuada lacinia quis, elementum et tellus. </article>
<article>Article Three Donec adipiscing, lorem non euismod venenatis, diam orci tincidunt magna, ut interdum magna arcu vel elit. Nunc molestie lacus non urna eleifend mattis. Praesent ipsum nulla, tempor malesuada lacinia quis, elementum et tellus. </article>
</section>
<h2>Example 2</h2>
<section class="products">
<article>Article One Donec adipiscing, lorem non euismod venenatis, diam orci tincidunt magna, ut interdum magna arcu vel elit. Nunc molestie lacus non urna eleifend mattis. Praesent ipsum nulla, tempor malesuada lacinia quis, elementum et tellus. </article>
</section>
<h2>Example 3</h2>
<section class="products">
<article style="width: 33%;">Article One Donec adipiscing, lorem non euismod venenatis, diam orci tincidunt magna, ut interdum magna arcu vel elit. Nunc molestie lacus non urna eleifend mattis. Praesent ipsum nulla, tempor malesuada lacinia quis, elementum et tellus. </article>
</section>
<h2>Example 4</h2>
<section class="products">
<article class="blocky" style="width: 33%;">Article One Donec adipiscing, lorem non euismod venenatis, diam orci tincidunt magna, ut interdum magna arcu vel elit. Nunc molestie lacus non urna eleifend mattis. Praesent ipsum nulla, tempor malesuada lacinia quis, elementum et tellus. </article>
</section>
When you set article {width: 33%;} in the stylesheet that applies to every single <article> element. However if you use inline style <article style="width: 33%;"> that applies to that element only.
In your demo, there are 4 table cells total, and you set each to 33%, that won't work correctly because the total width exceeds 100%.
I set color-background for .header and .footer to yellow. But it also sets same background colors for the content div, why ? It isn't logicial.
<html>
<head>
<title>
</title>
<style type="text/css">
.header {
background-color: yellow;
}
.footer {
background-color: yellow;
}
.column {
width: 50%;
}
div.right {
float: right;
}
div.left {
float: left;
}
img {
float: right;
margin: 0 0 1em 1em;
}
</style>
</head>
<body>
<div class='header'>
header
</div>
<div class='left column'>
<img src="css-float.png">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum, nisi lorem egestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas nisl est, ultrices nec congue eget, auctor vitae massa. Fusce luctus vestibulum augue ut aliquet. Mauris ante ligula, facilisis sed ornare eu, lobortis in odio. Praesent convallis urna a lacus interdum ut hendrerit risus congue. Nunc sagittis dictum nisi, sed ullamcorper ipsum dignissim ac. In at libero sed nunc venenatis imperdiet sed ornare turpis. Donec vitae dui eget tellus gravida venenatis. Integer fringilla congue eros non fermentum. Sed dapibus pulvinar nibh tempor porta. Cras ac leo purus. Mauris quis diam velit.
</div>
<div class='right column'>
<img src="css-float.png">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum, nisi lorem egestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas nisl est, ultrices nec congue eget, auctor vitae massa. Fusce luctus vestibulum augue ut aliquet. Mauris ante ligula, facilisis sed ornare eu, lobortis in odio. Praesent convallis urna a lacus interdum ut hendrerit risus congue. Nunc sagittis dictum nisi, sed ullamcorper ipsum dignissim ac. In at libero sed nunc venenatis imperdiet sed ornare turpis. Donec vitae dui eget tellus gravida venenatis. Integer fringilla congue eros non fermentum. Sed dapibus pulvinar nibh tempor porta. Cras ac leo purus. Mauris quis diam velit.
</div>
<div class='footer'>
footer
</div>
</body>
</html>
You haven't cleared the floats so the divs are collapsing
You can fix it with
.footer {
background-color: yellow;
clear:both;
}
JSfiddle Demo
Mathiasaurus is spot on. You could clear your non floating elements, mainly the footer.
.header,
.footer {
width: 100%;
clear: both;
}
or add
.header,
.footer {
width: 100%;
float: left;
}
to include them in the flow.
Putting display: inline-block and setting widths to your header and footer seem to remedy the issue!
http://jsfiddle.net/MathiasaurusRex/jm78Z/4/
div{
display: inline-block;
width: 100%;
}
.header{
width: 100%;
}
.footer{
width: 100%;
}
because u have the same class name for the different div's! And Also the same id's i guess!
<div class='header'>
header
try doing dis for your next div tag
<div class='header1' >
header
in order for the css to work in different manner for different div tags u must have different identites of each div tag!
I think this link will help you
http://www.w3schools.com/css/css_selectors.asp
I have 2 columns (left and right), and these columns are vertical and have images and text and links.
I want to put text in the middle of the page, left column and right column but in the middle there is no column but when i paste the text i get aligning problem. but my text is touching the left column image or boarder, unless if i center the text witch i don't want to center it.
How can i make a space between the element on the left column and my text in the middle of the page so i can justify it properly?
<div style="position: relative; float: right; text-align: center;">
<!-- Images in a vertical line here-->
</div>
<div style="position: relative; float: left; padding-right: 1px; text-align: center;">
<!-- Images in a vertical line here-->
</div>
Thank you,
I believe you're looking to add margin: *some distance in em, px, or %* or padding: *some distance in em, px, or %* to your style rules, depending on where you want that space to occur relative to the CSS box.
Using margin would not help much, but You could put some container (another div) in those divs having padding-right and padding-left.
I made a fiddle to try and make what you've requested: http://jsfiddle.net/MEA8W/
CSS:
.column {
float: left;
text-align: justify;
width: 50%;
}
.column p {
padding: 10px
}
HTML:
<div class="column">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris nec vestibulum mi, eu mollis nibh. Vestibulum euismod, orci ut porttitor dictum, velit dolor sodales leo, at iaculis metus leo malesuada mi. In non fermentum nulla. Vivamus in dapibus dui. Nulla quis mi commodo, tincidunt eros gravida, rutrum nibh. Vestibulum ac arcu vulputate, tincidunt ante id, molestie massa. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.
</p>
</div>
<div class="column">
<p>
Quisque aliquam ultricies varius. Phasellus viverra congue massa, et fringilla sapien. Quisque quis tristique nisi, sit amet rhoncus nulla. Nulla bibendum mauris pretium dui faucibus rhoncus. Praesent nec mauris ac enim auctor rhoncus a ultrices nisl. Nulla commodo lorem vel eleifend semper. Etiam ac sapien iaculis lacus interdum sodales. Maecenas sed turpis sapien. Vestibulum faucibus ipsum vitae hendrerit egestas. Phasellus cursus congue tempus. Nulla facilisi. Donec vestibulum posuere est, ut fringilla nunc congue sit amet. Aenean et ultricies quam.
</p>
</div>
I set up this fiddle to show how all browsers render the red pieces.
Strangely, IE7 renders that fine (on its own).
However, I have a shadow effect on a new site (that works the same as the red strips) that works on Firefox, Safari & IE8.
I swear I have used this same method countless times before and it has worked in IE7.
Here is how it looks in IE7. The strips don't grow to the correct height (using IE's developer tools showed me that). They are not just not repeating the background image.
(source: alexanderdickson.com)
The site is also available here to view. I am using IE8's compatibility view, which I realise isn't strictly a 1:1 of IE7, but I according to NetRender, this also happens on IE7.
Can someone please kindly tell me what I am doing wrong?
Thanks!
<div id="main">
<p>
Donec laoreet ullamcorper iaculis. Fusce sed dolor vel mi varius dictum. Phasellus vulputate vehicula odio et pulvinar. Cras pulvinar, magna quis cursus tempus; dolor diam tempus magna; a varius magna velit aliquet libero. Donec auctor pulvinar ornare. Fusce fringilla velit fermentum elit ornare quis porttitor justo vestibulum. Sed feugiat leo in tellus elementum venenatis. Praesent enim lacus, luctus ac porta vitae, iaculis eu arcu! Praesent commodo eleifend lacus, non fringilla orci commodo non. Praesent varius adipiscing purus, et accumsan orci porta nec? Cras imperdiet blandit dapibus. Curabitur dolor magna, imperdiet at euismod non, pharetra in turpis. Integer aliquam neque a justo imperdiet fermentum. Aenean et vulputate orci. Aliquam volutpat, sapien sed sollicitudin porta, risus massa gravida nibh; pharetra vulputate nisl orci ac nibh? Fusce vehicula tristique magna ut suscipit. Morbi imperdiet diam quis nibh sagittis consequat.
</p>
<p>
Nunc tempus iaculis justo quis ultrices. Nulla diam orci, euismod sed mattis id, condimentum ac est. Maecenas sodales egestas massa hendrerit ultrices. Fusce ut ante id leo placerat pellentesque. Mauris ante dolor, porta quis blandit vel; tincidunt sed sem. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed dictum, nunc vitae posuere suscipit, leo leo dictum nunc, vel laoreet eros dolor ac lacus. Duis at nibh nec lectus commodo vehicula sit amet sed sem. Sed eu massa orci! Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nullam tellus nibh, lacinia sed imperdiet nec, vestibulum ut nunc. Donec fermentum placerat felis, porta lacinia erat pellentesque vel. In eu ornare ipsum. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
</p>
<p>
Praesent fringilla mattis lobortis? Sed id porttitor massa! Pellentesque sodales felis et lacus tincidunt sit amet adipiscing arcu aliquam. Proin ullamcorper elementum urna nec mollis. Etiam convallis elementum massa in egestas! Ut pharetra mauris nec mi auctor posuere. Fusce a velit quis tellus accumsan blandit et sit amet odio. In hac habitasse platea dictumst. Nullam nunc orci; pulvinar ac lacinia id, tincidunt at dolor. Curabitur facilisis volutpat sagittis. Maecenas luctus rutrum ante et tincidunt. Nulla non dapibus dui. Proin consectetur pellentesque nunc, ac convallis enim venenatis ut. Aliquam a interdum nibh. Curabitur tristique ipsum ornare ante semper eget luctus nulla volutpat. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Suspendisse non est sem. Nulla sodales, metus sit amet ullamcorper mollis, velit velit tempus odio, at tristique diam lorem non risus. Suspendisse dictum lorem laoreet metus euismod gravida. Nullam dapibus magna nisi.
</p>
<div id="shadow-left"></div>
<div id="shadow-right"></div>
</div>
html {
width: 100%;
height:100%;
}
div#main {
width: 100px;
min-height: 100%;
margin: 0 auto;
position: relative;
}
#shadow-left,
#shadow-right {
width: 30px;
height: 100%;
position: absolute;
top: 0;
background: red;
}
#shadow-left {
left: -30px;
}
#shadow-right {
right: -30px;
}
I'm not sure why you would apply your shadows in this manner though. How I usually do it is have a wider container (including the widths of the left/right shadows) aligned center (in this case, it's your #mainContainer div, then set a y-repeating background (that is the shadow - just a couple of pixels high will do). I will then specify another div within this container, smaller width, center aligned, that will contain all the text.
Edit: Just noticed your fiddle. I think it may not work in this case due to css conflicts, possible from the osCommerce stylesheet? I'll try to look deeper..hmm
EDIT2: Okay I've traced it to this particular code in stylesheet.css
#login-link,
#logout-link {
position: absolute;
bottom: -20px;
right: 50px;
background: #333;
padding: 5px;
text-decoration: none;
-webkit-border-bottom-right-radius: 5px;
-webkit-border-bottom-left-radius: 5px;
-moz-border-radius-bottomright: 5px;
-moz-border-radius-bottomleft: 5px;
border-bottom-right-radius: 5px;
border-bottom-left-radius: 5px;
z-index: 100;
font-weight: bold;
}
Login to GolfBallBusters
It's your absolute positioning of this element that's causing the problem. Removing the styling fixes your shadow problems. :)
EDIT FIX:
This should fix it. Or at least it does on my stripped down version of your site layout.
Change #user and #login-link to the following:
#user {
float: right;
color: #f90;
position: relative; /* addition */
}
#login-link,
#logout-link {
position: absolute;
top: 31px; /* addition */
/*bottom: -20px; REMOVED */
right: 50px;
height: 15px; /* addition */
white-space: nowrap; /* addition */
background: #333;
padding: 5px;
text-decoration: none;
-webkit-border-bottom-right-radius: 5px;
-webkit-border-bottom-left-radius: 5px;
-moz-border-radius-bottomright: 5px;
-moz-border-radius-bottomleft: 5px;
border-bottom-right-radius: 5px;
border-bottom-left-radius: 5px;
z-index: 100;
font-weight: bold;
}
FIX2:
Change
#user-options .bottom-shadow {
display: block;
width: 100%;
height: 7px;
position: absolute;
bottom: -7px;
#bottom: -5px;
left: 0;
background: url(images/layout/shadow-bottom.png) repeat-x;
z-index: 50;
}
TO
.bottom-shadow {
width: 100%;
height: 7px;
margin-top: -10px;
background: url(images/layout/shadow-bottom.png) repeat-x;
}
And your HTML layout should be:
<div id="user-options">
<div id="choose-your-country">
<p>Choose your country > </p>
</div>
<div id="user"></div>
<div id="current-locale">Golf Ball Busters - AU</div>
<br class="clear">
</div>
<div class="bottom-shadow"></div>
Noticed I change bottom-shadow into a div element and moved it out of <div id="user-options">.
try giving #mainContainer height: 100%