Is it possible to align a button to the bottom of it's parent element, but keep it in the flow so that space is made for it?
I know how to align a button to the bottom use position: absolute; bottom:0 but that makes text overwrite it (example).
I would prefer not to have to hard code the height of the button as bottom padding for the parent element.
You can set padding bottom for parent equal to button height, then text won't go over button.
here is fiddle example
http://jsfiddle.net/t0e9hhn9/
Related
I know I can make a div scrollable on hover by using a fixed height, and by using overflow:none normally, and overflow-y: scroll on hover.
However, my div is a list of 30 items, and height 50px. If I hover, and scroll down to the 25th item, then move cursor out, the div changes to show the first few items (i.e. top of the div), NOT where I was previously just before moving cursor out.
How can I keep div in same position when I've hovered out?
Working here:
https://jsfiddle.net/wsxgt8yf/
Your CSS just needed to be changed to:
#listOfTags{ overflow:hidden; height: 50px; } #listOfTags:hover{overflow-y: scroll;}
I have a newsletter subscription box which looks like this:
The form takes the whole width of the parent, and so the button fills up all of the available width.
Using the before CSS clause, I'm drawing a small 'arrow' shape on top of the Subscribe button.
The problem is that the arrow is not properly centered, relative to the button. This can be demonstrated by reducing the viewport width. For example, here the problem can be seen:
The arrow is not properly centered horizontally, relative to the button.
How can I solve this alignment issue ?
JSFiddle: http://jsfiddle.net/ahmadka/7965p/
CodePen (JSFiddle is down sometimes): http://codepen.io/anon/pen/qFvbc
To center something that is positioned absolute, and of which you know the exact width, I always do the following:
left: 50%;
margin-left: -[halve the width of the element]px;
So your problem should be solved by adding magin-left: -12px; to your .form-wrapper button:before selector.
In below code how do I do vertical center element span with class "ExclamationPoint" ?
I want to design it like below picture :
I tried Padding-top and vertical; align but I couldn't style like image
I want to position span with class "ExclamationPoint" vertically middle regardless the height of side DIV.
JSFiddle Link
You can force it to the middle of the div like so:
First make sure the parent div (NewsNote) has a position set, so add position:relative;.
Now, you can center .ExclamationPoint by giving it a height of 0, position:absolute; and top:50%;. This will push the div down to the exact middle.
Now the exclamation point will be below the center, to fix this add line-height:0;.
http://jsfiddle.net/vNDUx/1/
So I have a div tag to sort of draw boxes around various sections, and of course make actual sections.
In one of the sections, there is more text than can be held in the div tag, so I want to for the text within the div tag to have a scroll bar to make it so the text doesn't overflow outside of the box.
How would I do that?
Use the following:
div {
overflow: scroll;
}
If you want them to scroll only in one direction, you can use the overflow-x and overflow-y properties.
Add width and height CSS properties to the div, as well as overflow:auto
If you add overlow:scroll, the scroll bars will be always visible.
If you want to have only horizontal scroll, add white-space:nowrap to the element inside of the div.
There are a lot of questions regarding side-by-side divs. I didn't miss those. But I need something that spans the whole width of the screen. This is the situation:
I need three divs positioned side-by-side. The left, middle, and right divs we'll call them. The middle div holds the header contents of the site and is a fixed width (800px). I want the left and right div to span the rest of the screen width on either side. So..
<-LEFT-> | MIDDLE | <- RIGHT ->
The reason I want to do it this way is because the middle (content holding) div has a backgrond that is a gradient. Let's say the left side of the gradient is white and the right side is black. I need the Left div to be white so it is a continuation and the Right div to be black. This way it looks like one fluid heading that spans the whole width of the screen.
Thanks.
A solution for this problem I once implemented was using 2 div elements, absolutely positioned, with the center div as an overlay. I have a working example here:
jsFiddle solution
This way, it doesn't matter how wide the screen is: The div's span 50% of your screen, and the middle part is behind the centered div.
Note that you might have to use a javascript workaround for the height-issues.
Do you want content in the left or right divs? If not, Simply stick with your one center div, give it a width and position it using margin: 0 auto; in your css. You can then set the background image of the body tag with an image (say 1px by 2400px) that is half white and half black.
If you want that effect just behind your header, then you could create a div the same height as the heading and give it the following css properties:
position: absolute;
width: 100%;
z-index: -1;
that way it should sit behind your container (middle) div.
You should consider having just one centered div and on the body put a background-image of 1px height and large enough width and centered. That image will have the left half white and the right one black.
Hope this helps, Alin
...WWWWW| DIV |BBBBB...
Anyway I don't think it's possible without using a table.
Usually floatting div are size-fixed and center div is fluid.