I have a footer with dynamic content & height, so i'm using the display:table version of sticky footer. The problem is I have a menu with an absolute positioned drop-down that extends past the footer if the page is too small, menu too big, etc. This creates a gap below the footer. Check out the fiddle for an example. Thanks.
http://jsfiddle.net/wmTn9/
Here's the css, although its easier to see in the fiddle.
html, body {
height: 100%;
margin: 0;
}
.wrapper {
display: table;
height: 100%;
width: 100%;
background: yellow;
}
.content {
display: table-row;
height: 100%;
background: turquoise;
position:relative;
}
.menu {
position:absolute;
left:0;
width:50%;
background:yellow;
overflow:hidden;
max-height:20px;
}
.menu:hover {
max-height:1000px;
}
.menu li {
height:800px
}
.footer {
display: table-row;
background: lightgray;
}
.footer:hover h3 {
height:300px;
}
In your CSS, take position:absolute; out of the menu class and the footer will move down to accommodate the long menu. If you want the footer to remain at the bottom of the browser window, add the following into your footer class...
width:100%;
position:fixed;
bottom:0;
position:absolute; takes the element out of the document flow. The element is then positioned relative to its first positioned (not static) ancestor element. Taking it out of the menu class puts the menu back into the document flow and stops the menu overlapping the footer.
Amended Fiddle with footer stuck to the bottom of the browser window
I'm trying to put 2 sections beside each other using inline-block and widths as a percentage, but it's not filling up the entire width of my window.
What I have so far:
HTML
<section class="left-content">
"Some Code"
</section>
<section class="main-content">
"Some More Code"
</section>
CSS
.left-content, .right-content {
width: 15%;
min-width: 150px;
padding: 5px;
display: inline-block;
overflow: hidden;
vertical-align: top;
}
.main-content {
width: 85%;
min-width: 712px;
padding: 10px;
display: inline-block;
overflow: hidden;
vertical-align: top;
}
But unless I work out the exact percentage down to a decimal point on my screen it doesn't work. Does anyone know of a way to do this using inline-block or do I have to use float?
It is due to the white-space and line break in your HTML markup which causes this issue. There are two options to resolve the "problem":
1. remove the line breaks and white-space from your code
2. set the font-size of the parent element to '0'
Additionally have you set box-sizing: border-box?
At my site on the first page i have two images put together so it looks like a sunset. I want to my logo to go down between them as if it was the sun, but i cant make this happend. The logo is currently at the second page of the site
Heres i the html:
<div id="intro">
<div id="introbaggrundbagved"></div>
<a name="section1" class="section">SECTION 1</a>
<div id="logo">
</div>
</div> <!--#intro-->
And the css:
#intro{
background: url('images/introforan.png') no-repeat center;
height: 900px;
margin: 0;
position: relative;
z-index: 3;
}
#introbaggrundbagved{
background: url('images/introbagved.png') no-repeat center;
height: 900px;
width: 1440;
margin:0;
position: relative;
}
#logo{
background: transparent url('images/logo.png') no-repeat center;
width: 600px;
height: 600px;
position: relative;
margin-left: 420px;
margin-top: 100px;
z-index: 2;
}
You need to take the #logo div out of its parent element #introand give it a z-index that is larger than both of its siblings— then wrap all of the header elements into an #intro-wrapper div. In addition, I would then position the #logo element using position: absolute, instead of relative, this will give you more granular control on it's placement without disturbing the document flow of the surrounding elements.
Also, it appears that you have the function parallaxScroll updating the top property of #logo, which will prevent the element from being placed between your two images.
function parallaxScroll(){
var scrolledY = $(window).scrollTop();
$('#logo').css('top','+'+((scrolledY*.376))+'px');
....
}
How to fix display:inline-block(display:inline) with float:right in ie6?
code in: http://jsfiddle.net/VGaGt/
html
<div>
text<span>>></span>
</div>
css
div{
float:left;
width: 300px;
height: 20px;
padding:5px;
background:#ccc;
}
span{
float:right;
width:20px;
height:20px;
display:inline-block;
zoom:1;
*display:inline;
cursor: pointer;
}
Your text takes on the width of the entire div in IE6, which is why span breaks the line. One option is to wrap the text in a p tag, float it to the left and control its width by setting width to 200px or something like that.
HTML
<div>
<p>text</p><span>>></span>
</div>
CSS
p {
float:left;
width:100px;
}
Here is the jsFiddle.
As you can see in the following Fiddle: http://jsfiddle.net/EvWc4/3/, I'm currently searching a way to align the second link (link-alt) to the right side of its parent (p).
Why not using float or position:absolute you'll say, well the main reason is that I like the fact that the links' display (inline-block) property allow them to be verticaly aligned in a naturally kind of way.
By using float or position:absolute; I'll be forced to calculate and put some extra margin-top or top value to vertically aligned the links.
Here is the code but better see the Fiddle http://jsfiddle.net/EvWc4/3/ :
<p>
link
link alt
</p>
p {
padding: 20px;
background: #eee;
}
.link {
display: inline-block;
padding: 10px;
background: #ddd;
}
.link-alt { padding: 20px; }
To do this with CSS3 you can use the flex box model
HTML:
<div class="content">
<div class="box box1"><a>Link 1</a></div>
<div class="box box2"></div>
<div class="box box3"><a>Link 2</a></div>
</div>
CSS:
.content {
display: box;
box-orient: horizontal;
box-pack: center;
box-align: center;
}
.box2 {
box-flex: 1;
}
(needs vendor prefixes)
http://jsfiddle.net/EvWc4/18/
CSS3 flex and grid items are supposed to address these issues, but standard support remains spotty as of 2013.
Back to the real world. I don't think it is possible to do this purely in CSS2.1 (IE8+) without pixel hacks. The thing is, text alignment is controlled by the parent element, and since the two anchors share their parent, they either both align to the left or to the right. And justify doesn't work on the last line.
If you can suffer a little additional HTML, there are two approaches:
1) Add another inline that is guaranteed to wrap the line, and then try to hide the empty line. This allows you to use text-align justify on the parent.
<p>
link
link alt
<span class="boom"></span>
</p>
<style type="text/css">
p {
padding: 20px;
background: #eee;
text-align: justify
}
.link {
display: inline-block;
padding: 10px;
background: #ddd;
}
.link-alt {
padding: 20px;
}
span {
display: inline-block;
height: 0;
width: 100%
}
</style>
Pros: works on any number of inline blocks, not just two. Only a little extra HTML required.
Cons: takes extra effort to hide the last (empty) line of text (setting the inline block inside of it to 0 height won't help you), and you're going to have to fiddle with margins or something else to make it really work. Further discussion: How do I *really* justify a horizontal menu in HTML+CSS?
2) Add another layer of inline blocks on top of your anchor tags and size them to 50%. Then you can apply separate text-align to get the final layout you requested. It is important that no whitespace is allowed between two inline blocks sized to 50%, or you'll wrap the line.
<p>
<span class="left">
link
</span><span class="right">
link alt
</span>
</p>
<style type="text/css">
p {
padding: 20px;
background: #eee;
}
.link {
display: inline-block;
padding: 10px;
background: #ddd;
}
.link-alt {
padding: 20px;
}
span {
display: inline-block;
width: 50%
}
.left {
text-align: left
}
.right {
text-align: right
}
</style>
Pros: produces the exact layout you requested without polluting the outer box model.
Cons: only works for two inline blocks (you can try to extend it, but it quickly gets really complicated). Relies on having no extra whitespace, which could jeopardize your nicely formatted markup.
You could set the position to absolute and use right: 0
.wrapper {
position: relative;
}
.right {
position: absolute;
right: 0;
}
http://jsfiddle.net/EvWc4/13/
I believe this accomplishes what you're looking for:
.link-alt {
position: absolute;
right: 0; top: 0; bottom: 0;
margin: auto;
max-height: 1em;
}
You can use position: absolute and right: 0 to obtain the right alignment. To keep the vertical centering, you can use top: 0; bottom: 0; margin: auto;. Of course, you'll also need to set a height on the element, or it will stretch to the full height of its parent.
Here's a jfiddle: http://jsfiddle.net/pHppA/
I've updated Pethas example, so it can be done in pure CSS2. It doesn't work in IE7, as it doesn't support display: table-cell; which I use.
http://jsfiddle.net/EvWc4/133/
The attribute float has no bearing on the element's vertical positioning.
p{padding:20px;background:#eee;overflow:auto;}
.link-alt{padding:20px; float:right}
should accomplish what you're looking for. Setting the overflow of the parent to something besides it's default (visible) will force it to treat floating children like normal elements.
Reference article
I haven't tested this at all outside of Chrome, so it might suck for IE.
This simple (and limited) solution leverages text-align: right and width: 50% on the aligned children, and white-space: nowrap on the parent to achieve the desired result.
Example: http://jsfiddle.net/erikjung/ejcJZ/
.vertically-centered-module {
white-space: nowrap;
}
.vertically-centered-module > * {
display: inline-block;
vertical-align: middle;
width: 50%;
}
.vertically-centered-module > :last-child {
text-align: right;
}