I have a web page that consists of a header, slider menu content and footer.
I need the content to start from the menu (menu size and location is based on the elements above that depends on device), and it should always be 25px from the bottom overlapping the footer.
If I try to make it relative, it hangs to the middle and doesn't reach the end, if I make it absolute, I have to specify the value it should be started from which is dynamic.
Is there an efficient way to do this?
UPDATE
I don't mind doing it with jQuery as long as the top of the content is dynamic and depends on the previous element no matter what it is.
UPDATE
Here's an abstract example to what I need.
The footer should always be anchored to the bottom (later I'll apply sticky footer technique, here my issue is the content), the header, slider and menu are anchored to element above, the content should be anchored to the element above and to the footer.
your not very clear with what you want exactly. so I've made some assumptions.
(all of those assumptions can be corrected if I assumed wrong).
Assumptions:
Header should scroll with the content. (that behavior can be changed if you want)
the scroll should be applied on the 'Content Zone' only. (that behavior can be changed if you want)
the content wrapper should always span to the end of the page, even if the physical content is smaller then that. and should have a scrolling only when the physical content is larger than the available space. (that behavior can be changed if you want)
[as you can see, all of those behaviors can be changed with the correct CSS]
Here is a Working Fiddle
this is a pure CSS solution. (I always avoid scripts if I can)
cross browser (Tested on: IE10, IE9, IE8, Chrome, FF)
HTML: (I've added a wrapper for the scroll-able content)
<div class="scollableContent">
<div class="header">
<h1>header</h1>
</div>
<div class="main">
<h1>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque lacinia tempus diam in malesuada. Aliquam id enim nisl. Integer hendrerit adipiscing quam, fermentum pellentesque nisl. Integer consectetur hendrerit sapien nec vestibulum. Vestibulum ac diam in arcu feugiat fermentum nec id nibh. Proin id laoreet dui, quis accumsan nisi. Quisque eget sem ut arcu faucibus convallis. Sed sed nisl commodo, faucibus leo sed, egestas est. Cras at nibh et erat ullamcorper sollicitudin vitae non nibh.</h1>
</div>
</div>
<div class="footer">
<h2>footer</h2>
</div>
CSS:
*
{
padding: 0;
margin: 0;
}
.scollableContent
{
position: absolute;
top: 0;
bottom: 25px; /*.footer height*/
overflow: auto;
}
.scollableContent:before
{
content: '';
height: 100%;
float: left;
}
.header
{
/*Addition*/
background-color: red;
}
.main
{
/*Addition*/
background-color: yellow;
}
.main:after
{
content: '';
display: block;
clear: both;
}
.footer
{
position: fixed;
width: 100%;
bottom: 0px;
height: 25px;
/*Addition*/
color: white;
background-color: blue;
}
Explanation:
The .footer is fixed to the view port bottom, with a fix height. and spans the whole view port width.
the .scollableContent is absolutely positioned to span exactly all the space between the top of the view port, and the top of the footer. with automatic overflow that allow scrolling if the content is bigger than the available space.
inside the .scollableContent we have a simple block element for the header, that will span his content height. after him we have another block element for the content itself.
now we want the content to always stretch to the end of the container, regardless of the header height (so we can't apply it with a fixed height).
we achieve this using floating & clearing techniques.
we create a floating element before the .scollableContent, with no content (so it's invisible and doesn't really take any place at all) but with 100% height.
and at the end of the content div, we create a block with clear instruction.
now: this new block cannot be position in the same line with the floating element. so he has to be moved down, dragging the content div along with him.
Et voilà!
EDIT:
you're probably going to use this solution inside some existing Container in your website. (and not as the whole website layout).
I've updated the fiddle so that the content is enclosed within a container. that way it will be easier for you to port this solution to your working website.
here is the Updated Fiddle
<style>
div {
border: 3px solid black;
height: 300px;
width: 100%;
position: absolute;
bottom: 25px;
}
</style>
<div></div>
I'm looking for a solution to have a sticky footer which height may be dependent on the width of the browser.
Sticky footers in fluid designs are not all that trivial. I've found hints, discussions and solutions to implement sticky footers. However, all these are dependent on a fixed and known height of the footer. In my case, the height of the footer contains text and the number of lines is dependent on the width of the screen.
Rather than making al sorts of media queries and building some work aorund, I'm would prefer a clean CSS solution in which the sticky footer auto adapts when the width of the screen varies.
Does anyone of you have the ultimate answer?
Welcome to the magical world of flexbox! Try this out...
http://jsfiddle.net/n5BaR/
<body>
<style>
body {
padding: 0; margin: 0;
display: flex;
min-height: 100vh;
flex-direction: column;
}
main {
flex: 1;
padding: 1em;
}
header, footer {
background-color: #abc;
padding: 1em;
}
</style>
<header>Hello World</header>
<main>Content</main>
<footer>
Quisque viverra sodales sapien, in ornare lectus iaculis in. Nam dapibus, metus a volutpat scelerisque, ligula felis imperdiet ipsum, a venenatis turpis velit vel nunc. In vel pharetra nunc. Mauris vitae porta libero. Ut consectetur condimentum felis, sed mattis justo lobortis scelerisque.
</footer>
</body>
The paddings and margins are just to be a little pretty, but the magic happens with display: flex; min-height: 100vh; flex-direction: column; and flex: 1;.
For more information and other examples, see http://philipwalton.github.io/solved-by-flexbox/demos/sticky-footer/
From Mozilla...
The CSS3 Flexible Box, or flexbox, is a layout mode providing for the
arrangement of elements on a page such that the elements behave
predictably when the page layout must accommodate different screen
sizes and different display devices. ... Note: Though CSS Flexible
Boxes Layout specification is at the Candidate Recommendation stage,
not all browsers have implemented it.
Try something like this:
http://jsfiddle.net/6BQWE/2/
Where the height of the sticky footer is relative to the height of the container, with a percentage:
#sticky_footer {
position:fixed;
bottom:0;
left:0;
width:100%;
height:10%;
background:red;
text-align:center;
}
You may need to sort out some margin/padding for the text with media queries but the footer dimensions will be dynamic without them.
In this fiddle you see divs like so:
http://jsfiddle.net/tickzoom/gzREg/
<div class="excerpt">
<div class="excerpt-text">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce cursus
scelerisque aliquet. Aenean tincidunt cursus adipiscing. Phasellus viverra
facilisis tortor. Pellentesque interdum scelerisque eros, id auctor est
porttitor at. Vestibulum semper lacus sed ipsum varius eu semper erat condimentum.
</p>
</div>
<div class "excerpt-more">
<p>Learn more</p>
</div>
</div>
And style like so:
.excerpt {
position: absolute;
width: 200px;
height: 100%;
}
.excerpt-text {
width: 100%;
height: 80px;
padding: 5%;
}
.excerpt-more {
height: 20px;
width: 100% color: red;
}
Notice in the fiddle that the the lipsum text of the first div overruns the Learn More text in the second div. The text needs to be bounded inside the the top div so that when the whole page is resized either more or less of text gets shown but the Learn More is always shown.
There must be something simple that I'm missing or doing wrong because I have a site where this works from a plugin on WordPress for the Genesis Framework called the Genesis Responsive Slider. The trouble with their plugin is that the "Learn More" link follows the text and so at smaller screens it disappears outside the bounding box.
So the plan is to introduce the second div to the plugin PHP code to protect the Learn More link from disappearing at smaller screen sizes.
If you want to see the temporary development site in question: http://side.tickzoom.com
Do you mean like this?
See on jsFiddle
.excerpt-text {
overflow:hidden;
}
Then making the text size larger is then a different problem of resizing the height of .excerpt-text.
See on jsFiddle
.excerpt-text {
height: 50%;
}
EDIT: Try removing the following rule
html > body .slide-excerpt-border {
float: left;
}
Also you should remove html > body from this rule so it's just .slide-excerpt-border, the start part is redundant.
EDIT: While you were fixing it I did this
I added this:
.slide-excerpt-border {
height: 95%;
display: block;
overflow: hidden;
}
And moved the Learn Move anchor down below .slide-excerpt-border
try
.excerpt{text-overflow: ellipsis;}
but check it works in all browsers you desire, it's a CSS3 property which haven't worked in most browsers not so long ago.
edit: Combination with overflow:hidden mentioned above may be the best way.
you need to use responsive media queries for different screen types.
here is an example and explanation how to use it http://css-tricks.com/css-media-queries/
or there was another question about this
Making div content responsive
I'm trying to resize an img proportionally with the container. The IMG floats left and there is a paragraph wrapping around it.
HTML:
<div>
<img src="picture.png">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla vestibulum venenatis libero, eu egestas elit laoreet nec. Donec in nunc dictum nunc luctus eleifend sagittis id augue.</p>
</div>
CSS:
div {
width: 80%;
}
img {
max-width: 100%;
float: left;
margin: 0 10px 10px 0;
}
The image gets resized only when the left div border hits the image and the paragraph is completely bellow the img. I want to resize the img as soon as the div resizes. I know I can put the img in a wrapper div and give it a percentage width, but I'd like a cleaner solution, if it's possible.
JSFiddle: http://jsfiddle.net/989uX/
The 'max-width' CSS property sets the maximum content width of the IMG element. In other words, this element is never wider even if you set a bigger width.
If you want to re-size the element you should use the 'width' property instead of 'max-width'. This property accepts also percentage values (as Passerby mentioned above). Note that percentage values of the element refer to the width of the containing block.
How to get the following layout using HTML + CSS:
| |x| |
| |x| |
All three columns (two columns and separator) should be touching, i.e. their background colors have to be touching without any gaps.
The problem I have with creating such layout is that I want the "separator" to have width measured in em (i.e. font-width based), while main contents columns are to fit the rest of width of encompassing element (i.e. around 50%). I want this layout preserved, without the separator overlying left or right contents columns independently on font size (i.e. layout should be preserved if I increase or decrease font width).
Note that this layout is inside other container, and these containers can be repeated in the page. Because of this I was not able to use any absolute-positioning solution.
Also container should not use fixed width: think of it as container having width: 100%; or width: auto; (or unset width).
Bonus points if the layout can be created with either left or right column missing (i.e. empty column).
Using the inline-blocks you could create a lot of different non-trivial layouts.
I've made two examples, the first, with the faux equal heights: http://jsfiddle.net/kizu/nMWcG/
And the second variant, with the physical gap separator: http://jsfiddle.net/kizu/nMWcG/5/
They are somewhat different (and there could be even more layouts based on the inline-blocks that solve your problem), hope at least one of them would work for you :)
The whole idea is to use the white-space: nowrap on wrapper, so the columns won't drop if the sum of their widths is greater than wrappers' and then add a padding on a wrapper with a width: auto that would be equal to the desired gap.
If you'll need only one column, you could have one of the columns empty (without the .column-content), or remove them and have an extra class on them. Well, it depends on how you want the lonely column to behave etc.
One possibility:
HTML:
<div class="container">
<div> Column A </div>
<div> Column B </div>
</div>
CSS:
.container {
overflow: auto;
}
.container > * {
float: left;
width: 50%;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.container > :first-child {
border-right: 0.5em solid COLOR;
}
.container > :last-child {
border-left: 0.5em solid COLOR;
}
where COLOR is the color of the background-color of the separator column.
Live demo: http://jsfiddle.net/3XHSu/show/
You can always use absolute positioning, but you need to position the common ancestor as well (relative). Flexible multi-column layouts can be done best with floats:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>CSS Test Case: 2-Column Layout with Separator</title>
<style type="text/css">
.container {
position: relative;
float: left;
background-color: green;
}
.container .left {
float: left;
width: 50%;
background-color: red;
}
.container .left .padding {
margin-right: 5em;
}
.container .right {
float: right;
width: 50%;
background-color: fuchsia;
}
.container .right .padding {
margin-left: 5em;
}
.container .separator {
position: absolute;
left: 50%;
top: 0;
width: 10em;
height: 100%;
margin-left: -5em;
background-color: blue;
}
div.clearBoth {
clear: both;
margin: 0;
padding: 0;
height: 0;
line-height: 0;
font-size: 0;
overflow: hidden;
}
</style>
</head>
<body>
<h1>CSS Test Case: 2-Column Layout with Separator</h1>
<div class="container">
<div class="left">
<div class="padding">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam nulla dolor, tempor ac sollicitudin malesuada, tempus in metus. Nulla eget augue ut velit ullamcorper aliquam. Aliquam in nibh eu arcu tincidunt eleifend et ac justo. Donec mauris orci, tristique et ornare quis, dictum a ante. Suspendisse rhoncus commodo ligula, ac mattis eros dignissim vitae. Morbi pulvinar ultrices aliquam. Praesent tempus velit justo, eget fringilla leo. Aliquam fringilla risus eget justo ornare pellentesque. Duis ullamcorper scelerisque mauris vitae blandit. Morbi et bibendum orci. Sed vestibulum posuere nisi, vitae rhoncus mi laoreet in. Quisque commodo porttitor risus, id ullamcorper libero gravida at. Donec interdum accumsan blandit. Vestibulum ac eros et nisl fermentum cursus. Integer vitae ornare orci. Vestibulum facilisis adipiscing metus a suscipit.
</div>
</div>
<div class="right">
<div class="padding">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam nulla dolor, tempor ac sollicitudin malesuada, tempus in metus. Nulla eget augue ut velit ullamcorper aliquam. Aliquam in nibh eu arcu tincidunt eleifend et ac justo. Donec mauris orci, tristique et ornare quis, dictum a ante. Suspendisse rhoncus commodo ligula, ac mattis eros dignissim vitae. Morbi pulvinar ultrices aliquam. Praesent tempus velit justo, eget fringilla leo. Aliquam fringilla risus eget justo ornare pellentesque. Duis ullamcorper scelerisque mauris vitae blandit. Morbi et bibendum orci. Sed vestibulum posuere nisi, vitae rhoncus mi laoreet in. Quisque commodo porttitor risus, id ullamcorper libero gravida at. Donec interdum accumsan blandit. Vestibulum ac eros et nisl fermentum cursus. Integer vitae ornare orci. Vestibulum facilisis adipiscing metus a suscipit.
</div>
</div>
<div class="separator"></div>
</div>
<div class="clearBoth"><!-- clear --></div>
</body>
</html>
Please notice that
the background colors are touching as you can see no horizontal green (but see below);
container dimensions are irrelevant (it works with any viewport size and any text content; but see below);
it works with any font size;
it works with any separator width, provided you adjust the margins as well (see below);
it works anywhere, and several times, in a document because it uses CSS classes, not IDs;
it works if you set display: none on the left column, the right column, or both. As a result, it works if the left column, the right column, or both, are missing from the markup;
it uses a minimum set of selectors, properties, and property values, that are all available since CSS1 or CSS2.
Because of the latter, it should also work in all CSS2-capable browsers as it does not rely on any UA-specific implementation. I have tested this positive in the following browsers:
Microsoft Internet Explorer 9.0.8112.16421 for Windows 7
Google Chrome 16.0.912.41 beta for Debian GNU/Linux
Google Chrome 15.0.874.121 m for Windows
Chromium 14.0.835.202 (Developer Build 103287 Linux) Built on Debian unstable, running on Debian 6.0.3
Mozilla Firefox 8.0.1 for Windows (on Wine)
Iceweasel (Debian Firefox) 8.0
Mozilla Firefox 7.0.1 for Windows (on Wine)
Mozilla Firefox 6.0.2 for Windows (on Wine)
Mozilla Firefox 5.0 for Windows (on Wine)
Mozilla Firefox 4.0.1 for Windows (on Wine)
Mozilla Firefox 3.6.24 for Windows (on Wine)
Mozilla Firefox 3.5.19 for Windows (on Wine)
Mozilla Firefox 3.0.19 for Windows (on Wine)
Iceape (Debian SeaMonkey) 2.0.14
Apple Safari 5.0.2 (7533.18.5) for Windows (on Wine)
Apple Safari 4.0.5 (531.22.7) for Windows (on Wine)
Opera 11.52.1100 for Linux
Konqueror 4.6.5 for GNU/Linux (on KDE 4.6.5)
Google Android 2.3.4 Browser
Dolphin Browser HD 7.1.0 for Android
Mozilla Firefox 8.0 for Android
Opera Mobile 11.50 for Android
Apple Mobile Safari 5.0.2 (6533.18.5) on iOS 4.2.1 (8C148) on iPhone 3G (MB496FD)
It does not work in:
Mozilla Firefox 2.0 for Windows (on Wine): Floats are not supported.
Mozilla Firefox 1.5.0.12 for Windows (on Wine): Floats are not supported.
Mozilla Firefox 1.0.8 for Windows (on Wine): Floats are not supported.
Microsoft Internet Explorer 6.0.2800.1106 for Windows 98 (on Wine): The separator is not always displayed, and if the viewport width changes, the layout falls apart. Probably you can work around this with a stylesheet triggered by Conditional Comments. (See also tereško's answer.)
Test case
Explanation:
With floats, you can have columns of 50% width, but you cannot have horizontal margins or paddings on them, because in the W3C (standard) CSS box model the box width equals the width plus horizontal padding. So any (horizontal) paddings must be created by child elements.
In order to have the content of a column end at the separator box's boundaries, you need margin-right and margin-left for the child (DIV) elements within the left and right column half the width of the separator (5em), respectively. padding-right and padding-left might work as well if no further width is involved.
In order to position the separator absolute between the left and right column, the container must be positioned relative. The separator has a negative margin (margin-left: -5em) so that its box shifts left half its width: 10em from the middle (left: 50%).
The container must float: left so that it provides the stacking context for the separator to be displayed on top of the columns (and to always have the correct width). Therefore, you need clear: left before and clear: both after the container (the latter with a zero-height DIV element here).
Caveats:
If the height of the left and right columns differ, you will see vertical green. Use the usual tricks to emulate equal height. (See also tereško's answer.)
If the viewport grows shallower, content in the columns may overflow horizontally if it cannot be wrapped; especially replaced inline elements like images, and long words. Declare an overflow or overflow-x value different from the default (visible) to prevent that.
Update: Validates as HTML 4.01 Strict and CSS2 now; clearing BR as child of BODY, and magenta color name did not, respectively. Also, the position property was introduced with CSS2.
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:svg="http://www.w3.org/2000/svg"
xml:lang="en">
<head> <title>CASH REGISTER</title>
<style type="text/css">
#media all {
body { margin:0 ; padding:0 ; background:#000000 ; color:white }
div { margin:0 ; padding:0 ; font-size:2em }
}
</style >
</head>
<body>
<div style="background-color: #888 ; width: 51em">
<div style="background-color:red;float:left;width:25em">1</div>
<div style="background-color:green;float:left;width:1em">2</div>
<div style="background-color:blue;float:left;width:25em">3</div>
</body>
</html>
You can do it with combination of :after & text-indent. It's work till IE8 for IE7 & below you can use css :after hack http://css-tricks.com/snippets/css/clear-fix/. In this example i didn't use hack for IE7 for if you want you can use.
check this:
http://jsfiddle.net/3XHSu/4/
OR
For modern browsers you can use css3 box-flex property there is no need to define width:50%
Check this:
http://jsfiddle.net/XMg2h/2/
I don't know if you expect equal height columns (there are plenty of places that talk about that if you want to implement them), but this fiddle http://jsfiddle.net/TNpnh/11/ shows some variations. This avoids Sime's box-sizing if IE7 and lower is needing to be supported. The basic structure is:
HTML
<div class="container">
<div class="LC"> Left </div>
<div class="RC"> Right<br/>Taller </div>
</div>
CSS
.container {
padding: 0 0 0 1em; /*this creates the extra space */
border: 1px solid red;
overflow: auto;
margin: 10px 0;
}
.container .LC {
width: 50%;
margin: 0 -1em; /* this allows all to fit */
float: left;
background-color: yellow;
border-right: 1em solid blue;
}
.container .RC {
width: 50%;
float: left;
background-color: cyan;
border-left: 1em solid blue; /* this is duplicated so it fills the tallest column */
}
Assuming i understood you right:
simple fluid-fixed-fluid layout: http://www.webdevout.net/test?0v&raw To view source click here.
with ability to remove either <div class="left"> or <div class="right">, or both, try this link: http://www.webdevout.net/test?0w&raw ( imho, it has the feel of ugly hack , but works ). To view source click here
The basic idea is this:
you take a 50-50% floated layout
stick a fixed width element <div class="main"> between sides
adjust both initial elements, so that they use less space then before
As for ability to remove right side - it works in the original version, but to remove left side, there is require a placeholder <div class="fix">, which takes up the space, because all the elements are floated and page would collapse otherwise.
P.S. the fluid-fixed-fluid layout is sometimes affectionately called: the unholy grail.
P.P.S the layout might have the 3px gap bug on IE6 (but i am not sure about that .. the ie6fix.css file was in the folder, but it was not included in the original testcase).
Have a look at http://jsfiddle.net/gjQVW/4/
<div class="container">
<div>left</div>
<div>right</div>
<!--div>3rd</div>
<div>4th</div-->
</div>
With these styles
.container {display: table; width: 100%; margin-left: 0; margin-right: 0; margin-top: 3em; background: red}
.container > DIV {border: 1px dashed red; display: table-cell; width: 1%; border-left: 0.5em solid black; border-right: 0.5em solid red; background: yellow}
.container > DIV:first-child {background: pink; border-left: 1px solid lime}
.container > DIV:last-child {background: teal; border-right: 1px solid yellow}
Using display: table and table-cell lets you have both columns keep the same height and make sure they are one right next to the other. You also are able to add more columns or just leave 1. You might need to tweak the width: 1%. For only two columns 50% should suffice, but as you add columns you have to start lowering it to keep the columns the same width, etc. You can also use padding for the separator, but margin and table-cell don't get along.
Also note that :last-child css selector is not supported in IE 8 and you'll need to use class or id on the column DIVs.
EDIT: Added another fiddle to cover the DIV that needs to be in the middle, since it needs to hold somecontent
http://jsfiddle.net/frozenkoi/RfzWb/
HTML:
<div class="mightyContainer">
<div class="container3">
<div>lefty<br><br><br>more lefty</div>
<div class="divider">i</div>
<div>right</div>
<!--div>3rd</div>
<div>4th</div-->
</div>
</div>
CSS:
.mightyContainer {position: relative; background: magenta; margin-top: 3em}
.container3 {display: table; width: 100%; margin-left: 0; margin-right: 0; background: red; -k-position: relative}
.container3 > DIV {border: 1px dashed red; display: table-cell; width: 50%; border-left: 0.5em solid yellow; border-right: 0.5em solid black; background: yellow}
.container3 > DIV:first-child {background: pink; border-left: 1px solid lime}
.container3 > DIV:last-child {background: teal; border-right: 1px solid yellow}
.container3 .divider {text-align: center; width: 1em; background: lime; border: none; opacity: 0.5;
display: block; position: absolute; top: 0px; bottom: 0px; left: 50%; margin-left: -0.5em; /*height: 100%*/;
}
The separator is positioned in the middle with absolute positioning. Note that the additional DIV with the mightyContainer class is necessary because in FireFox the DIV with divider class uses the whole page as the parent for positioning instead of the conteiner3. RockMelt (webkit) and IE 8/9 didn't seem to need it if you move the styles from .mightyContainer to .container3 and remove the mightyContainer DIV (for an example of how FireFox behaves without that extra DIV see http://jsfiddle.net/frozenkoi/3zhsv/).
I really hope this would help you http://jsfiddle.net/EzfAs/
Here you go - http://jsfiddle.net/wbednarski/w97ax/5/
Solution works with one column as well. The trick is in the .separator class.