I've run into an issue while trying to bottom-align a logo container to the zero-height parent. Preferably, I want to achieve this with pure CSS.
In the attached fiddle, I want to get the bottom of the control-group to be aligned to the top of the zero-height panel element. The markup needs to stay the way it is. Is it possible to do this without specifying static height or top offset? The parent needs to be zero-heght. Otherwise, if its above the content and it will have height, it will overlap the light-blue container, which will have other content. As such, content in the blue div will not be clickable in the part that is overlapped by the panel div. Any suggestions?
The problem can be seen here: http://jsfiddle.net/jQgHy/5/
I'm not sure if this is what you're looking for...
.control-group {
display: inline-block;
position: absolute;
vertical-align: bottom;
text-align: center;
bottom: 0;
}
http://jsfiddle.net/jQgHy/6/
Related
I don't know if I'm missing something or if this is a bug, paper-fab buttons always "force a new line". So, I can't get several paper-fab buttons aligned horizontally. I have tried <span>ing them:
<span>
<paper-fab mini icon='arrow-forward' on-click='onClickForward'></paper-fab>
<paper-fab mini icon='arrow-backward' on-click='onClickBackward'></paper-fab>
</span>
and they are stacked vertically.
Just set display to inline-block
<style>
paper-fab {
display: inline-block;
}
</style>
I have a site where I have a full width menu, which has negative margins. It works perfect, except on Safari/iOS.
On Safari/iOS I can scroll horizontaly forever....WHY?
background-color: #0a6e96;
margin: -1px -9999rem;
padding: 1.2rem 9999rem;
margin-top: 48px;
Update - Solution
https://css-tricks.com/full-browser-width-bars/
This link has multiple solutions.
To avoid triggering horizontal scrolling, you need to set overflow-x:hidden on both the html and body elements.
This issue has been answered before. Sadly, vertical-align: top does not fix the problem for me.
Here's a JSFiddle: http://jsfiddle.net/CPAtE/2/
How can i vertically align my inline-block DIVs (to the top) ?
Use vertical-align: top; in your .slide class
FIDDLE
I have a header div, inside this is some content. The whole div is text-align:right. I want the content to sit on the right but more importantly sit on the bottom of the div, not the top.
#header {
height:79px;
background:url(images/jtl-logo.png) no-repeat left top;
text-align:right;
padding:0px 9px; }
Surely there must be a way of doing this in the CSS so that content always aligns to the bottom of it's container, it seems like it's incredibly necessary?
The only other way I can think to do it is applying padding to the header to push it down, but that seems a bit ridiculous when this is such a simple thing.
You could wrap up the text in another DIV or SPAN element and then apply CSS positioning to move it to the bottom.
Using CSS3 columns to take a somewhat large text document and make it scroll horizontally. I want each column to be close to the size of the iPad screen, as I am displaying the content in a UIWebView.
If I make the -webkit-column-width: property a relatively small number, everything works great. The text stops at the max-height set for the containing and columns out horizontally.
If I make -webkit-column-width anything larger than about 300px, though, this css seems to get completely ignored. The text displays vertically as it would without styling. Any fixes?
Display when -webkit-column-width is 325px. The view scrolls to the right normally:
Display when -webkit-column-width is 500px. Text appears as one column and the view scrolls downward to the end of the document, ignoring max-height:
You are trying to divide, let's say, 600px wide container into X 500px wide columns. Browser renders only one column because it can't put 2 (or more) 500px wide columns in 600px wide container. First of all - by default, the browser will stretch your content vertically, to make it stretch it horizontally you have to specify fixed height for the container and width needs to be set to auto (which is default). Of course you need to adjust this values so columns will fit iPads viewport.
Here is demo of code, that should work properly - http://jsfiddle.net/wojtiku/bFKpa/
#container {
height: 300px;
-webkit-column-width: 150px;
-webkit-column-gap: 20px;
}
NOTE: I don't have iPad, tested on desktop.