I want the footer to be stuck at the buttom of the page, the I added: buttom:0px; and made it position:fixed;, but then when I resize window the footer hides other stuff (I want it stay at bottom):
enter image description here
I also tried with position:static; but then it changes the selected height:
enter image description here
here code:
footer {
font-size: 14px;
color: gray;
border-top: 1px solid #2672fb;
bottom: 0px;
width: 100%;
height: 2.5rem;
position:static;
}
<body>
<div>
...
</div>
<footer>
<p>Lorem ipsum dolor ...</p>
</footer>
</body>
There was a wrapping element that held everything except the footer. It had a negative margin equal to the height of the footer.
!-- begin snippet: js hide: false console: true babel: false -->
html, body {
height: 100%;
margin: 0;
}
.wrapper {
min-height: 100%;
/* Equal to height of footer */
/* But also accounting for potential margin-bottom of last child */
margin-bottom: -50px;
}
.footer,
.push {
width:100%;
height:100px;
}
.footer{
background-color:yellow;}
<!-- language: lang-html -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<body>
<button id="add">Add Data</button>
<div class="wrapper">
<div class="push">
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>
</div>
</div>
<footer class="footer"></footer>
</body>
Related
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>
I have a very weird problem. I was actually creating a JSFiddle to answer another question when I ran into an alignment issue. Just creating two inline-block elements results in a very weird situation where the left block is pushed down by about 40px.
I know that this is an issue in both Chrome and Firefox (on Mac, not sure about Windows).
See for yourself: JSFiddle
All I have are two custom elements that I called <cell> that contain a title, held in <t> and a lipsum paragraph held in <cnt>.
HTML:
<div align="center">
<cell>
<t>This is a short title</t>
<cnt>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus sit amet adipiscing diam, suscipit commodo augue. In tellus nunc, dapibus eu interdum at, laoreet volutpat est. Duis non mi quis urna malesuada dapibus. Nunc sit amet nulla quam. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Quisque molestie neque cursus viverra luctus. Mauris ac placerat purus. Aenean vel dictum sem, condimentum pharetra diam. Nunc sed leo et arcu malesuada placerat sit amet nec ipsum.</cnt>
</cell>
<cell>
<t>This is a very very very very very very very chocolate very very very very very very long title</t>
<cnt>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus sit amet adipiscing diam, suscipit commodo augue. In tellus nunc, dapibus eu interdum at, laoreet volutpat est. Duis non mi quis urna malesuada dapibus. Nunc sit amet nulla quam. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Quisque molestie neque cursus viverra luctus. Mauris ac placerat purus. Aenean vel dictum sem, condimentum pharetra diam. Nunc sed leo et arcu malesuada placerat sit amet nec ipsum.</cnt>
</cell>
</div>
CSS:
cell
{
display: inline-block;
width: 300px;
height: 400px;
border: 1px solid #ccc;
padding: 10px;
margin: 0;
}
Result:
You need to specify the vertical-align property (e.g. vertical-align:top;) since the default value is baseline (which you can see if the fiddle and image).
cell {
display: inline-block;
width: 300px;
height: 400px;
border: 1px solid #ccc;
padding: 10px;
margin: 0;
vertical-align:top;
}
jsFiddle example
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>
A slight twist on the common question of sticking a div to the bottom of a parent div. In this case I want the stuck div to STAY stuck even when it's parent is scrolled, and to be on top of the text that scrolls underneath. What's the trick? jsfiddle here: http://jsfiddle.net/forgetcolor/vYjMv/1/. code repeated below:
<!doctype html>
<html>
<head>
<style type="text/css">
#wrapper {
width:300px;
height:300px;
background-color:#eee;
position:relative;
overflow:auto;
}
.bot {
border:1px solid #ddd;
display:inline;
position:absolute;
bottom:0;
right:0;
color:blue;
}
</style>
<title>tst</title>
</head>
<body>
<div id="wrapper">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed sed tempor nibh. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Donec molestie tortor non nisi accumsan placerat. Morbi elit risus, venenatis et sodales congue, tristique vel ligula. Maecenas convallis arcu turpis. Praesent nibh leo, blandit ut posuere et, aliquet at sapien. Ut placerat, libero id faucibus pellentesque, leo nulla consectetur ligula, quis malesuada sapien nulla id diam. Nullam turpis nisl, malesuada non gravida eu, eleifend et quam. Proin sit amet elit euismod odio tincidunt tempor. Sed eleifend tincidunt blandit. Cras eget sapien odio, a sodales dui. Pellentesque tincidunt varius sagittis. Nullam nisl est, volutpat sed fringilla at, faucibus id mi. Phasellus vel lacus nibh, eget consectetur nulla. Quisque vel elementum nibh. Etiam vitae lectus erat, eu euismod est.
</p>
<span class="bot">bottom</span>
</div>
</body>
</html>
you need to put another new div same width & height of warpper and stuck div to it:
check this:
<!doctype html>
<html>
<head>
<style type="text/css">
#fake_wrapper{
width:300px;
height:300px;
position:relative;
overflow:none;
}
#wrapper {
width:300px;
height:300px;
background-color:#eee;
overflow:auto;
}
.bot {
border:1px solid #ddd;
display:block;
position:absolute;
bottom:0px;
right:15px;
color:blue;
}
</style>
<title>tst</title>
</head>
<body>
<div id="fake_wrapper">
<div id="wrapper">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed sed tempor nibh. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Donec molestie tortor non nisi accumsan placerat. Morbi elit risus, venenatis et sodales congue, tristique vel ligula. Maecenas convallis arcu turpis. Praesent nibh leo, blandit ut posuere et, aliquet at sapien. Ut placerat, libero id faucibus pellentesque, leo nulla consectetur ligula, quis malesuada sapien nulla id diam. Nullam turpis nisl, malesuada non gravida eu, eleifend et quam. Proin sit amet elit euismod odio tincidunt tempor. Sed eleifend tincidunt blandit. Cras eget sapien odio, a sodales dui. Pellentesque tincidunt varius sagittis. Nullam nisl est, volutpat sed fringilla at, faucibus id mi. Phasellus vel lacus nibh, eget consectetur nulla. Quisque vel elementum nibh. Etiam vitae lectus erat, eu euismod est.
</p>
</div>
<div class="bot">bottom fixed</div>
</div>
</body>
</html>
Check this one.
Made the position: fixed of .bot and added a top and left.
so here is the problem i'm trying to solve, i want to use a background image that is 500px wide for my divs that has a drop shadow on the right edge however i want the text to stop and wrap after 475px and i still want the entire image to show up to include the dropshadow. is there anyway to accomplish this?
html code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Untitled Document</title>
<link href="tech/sandbox2.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="page1top">top</div>
<div id="page1mid">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec sodales, sapien vel porttitor eleifend, dui ante rutrum ligula, sed volutpat urna sapien vitae nisl. Vestibulum iaculis ligula elit, in dapibus urna. Aenean ullamcorper varius porttitor. Etiam facilisis ipsum vitae nulla gravida convallis sollicitudin nibh gravida. Fusce in turpis magna, at tempus lorem. Nulla sed mi libero. Aenean vulputate ultricies enim, sit amet vulputate arcu condimentum sed. Duis arcu metus, lobortis nec commodo non, suscipit semper lectus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Phasellus sit amet condimentum elit. Nullam interdum elit sapien. Curabitur lorem ligula, aliquam quis rhoncus ac, egestas vitae tellus. Phasellus quis massa quis eros gravida mollis posuere nec mi.</div>
<div id="page1btm">this is the bottom</div>
</body>
</html>
css code:
#charset "UTF-8";
/* CSS Document */
#page1top{
position:relative;
background:url(../media/page1top.png) no-repeat;
width:500px;
}
#page1mid{
position:relative;
background:url(../media/page1mid.png) repeat;
overflow:visible;
width:500px;
height:auto;
padding:30;
margin:30;
top:-10;
}
#page1btm{
position:relative;
width:500px;
background:url(../media/page1btm.png) no-repeat;
}
Use nested <div> tags. While #Robusto's suggestion is not incorrect, it is not semantically desirable. It mixes a design element with a style descriptor. Your block elements should determine such design spacing, and then use your element styles to control the margin/padding of the text itself.
CSS:
#page1top{
position:relative;
background:url(../media/page1top.png) no-repeat;
width:500px;
}
#page1mid{
position:relative;
background:url(../media/page1mid.png) repeat;
overflow:visible;
width:500px;
height:auto;
padding:30;
margin:30;
top:-10;
}
#page1btm{
position:relative;
width:500px;
background:url(../media/page1btm.png) no-repeat;
}
.content_container{
width: 475px;
overflow: inherit;
}
HTML:
<div id="page1top">top</div>
<div id="page1mid">
<div class="content_container">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec sodales, sapien vel porttitor eleifend, dui ante rutrum ligula, sed volutpat urna sapien vitae nisl. Vestibulum iaculis ligula elit, in dapibus urna. Aenean ullamcorper varius porttitor. Etiam facilisis ipsum vitae nulla gravida convallis sollicitudin nibh gravida. Fusce in turpis magna, at tempus lorem. Nulla sed mi libero. Aenean vulputate ultricies enim, sit amet vulputate arcu condimentum sed. Duis arcu metus, lobortis nec commodo non, suscipit semper lectus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Phasellus sit amet condimentum elit. Nullam interdum elit sapien. Curabitur lorem ligula, aliquam quis rhoncus ac, egestas vitae tellus. Phasellus quis massa quis eros gravida mollis posuere nec mi.</p>
</div>
</div>
<div id="page1btm">this is the bottom</div>
Keep the div at 500px wide and put the text in a p tag inside it, setting the p tag to 475px in width.
<div class="shadow-div" style="width:500px">
<p style="width:475px">
Text here blah blah blah.
</p>
</div>
If you declare units on your padding, this would probably happen for you automatically. Change padding: 30; to padding: 30px;. If you need more padding, just adjust the number. If you don't want the padding to be even on each side, write it like this: padding: 10px 25px 10px 10px;. The measurements travel clockwise so it goes top, right, bottom, left;
Can you modify your HTML?
<div class="fancybackground"><div class="text">something</div></div>
CSS:
.fancybackground { background: url(...) }
.text { margin-right: 25px; }