I'm trying to make that one div in a navbar gets a top-padding when I hover it. My problem is that all my divs makes the same effect (they all go down), and I just want one of them to make this (the one I'm hovering), and I want the others to stay in the same place, with the same height, without any changes.
The current situation is this one: http://jsfiddle.net/3S8ZB/1/
This is my current CSS:
div {
height: 2em;
width: 6em;
border-radius: 5px;
background-color: orange;
display:inline-block;
}
div:hover{
padding-top:2em;
}
What do you suggest?
Demo
inline-block elements are vertically bottom alligned by default. Add vertical-align: top;
css
div {
height: 2em;
width: 6em;
border-radius: 5px;
background-color: orange;
display:inline-block;
vertical-align: top; /* add this */
}
div:hover {
padding-top:2em;
}
Not sure if understood becuse it looks like you are very close to that.
Padding on the hovered item and keeping the siblings vertically aligned to the top.
http://jsfiddle.net/2UvSa/
div {
height: 2em;
width: 6em;
border-radius: 5px;
background-color: orange;
display:inline-block;
vertical-align: top;
transition: padding .5s ease-in;
}
div:hover{
**padding-top:2em;**
}
Put vertical-align: top; on div.
JSFiddle Demo
Related
I've tried to align last div element / elements using text-align-last property but it didn't work. I have much divs in the center, but my page is different on each resolution so I can't control if elements will be perfectly and none of them will be in last line alone or so, that's why I want to align them to left.
Fiddle: http://jsfiddle.net/ecn8c0pt/
Picture of my site:
Adding the following CSS will work.
http://jsfiddle.net/ecn8c0pt/1/
#gallery h2{
margin: 0;
height: 80px; /*Added height for the Heading */
font-size: 1.1em;
font-weight: 300;
color: #33CCFF;
}
.project{
display: inline-block;
margin: 0 15px 40px;
width: 156px; //To show in jsfiddle i reduced the width.
text-align: left;
float: left; //MUST CHANGE: Once you align left it will automatically float to left. Also the number of count per row will depends on the window width and div width.
}
.project .thumbnail{
width: 156px;//To show in jsfiddle i reduced the width.
height: 144px;
border-radius: 3px;
}
try adding styles to your CSS like these:
float:left;
min-width: 200px;
max-width: 200px;
and try to fix the width for the wrapping div tag
for example:
.wrapper {
width:1000px;
}
see in example DEMO and try to predict the width now when you control it good luck!
I have 2 divs, one should be on left side and the other on right side but in same line.
Behind I want to have parent div (#author-box) with grey background that will have height depending on the right div text height, so when you change devices if author-txt goes below author-img the gray background should be behind both of the divs.
I tried float left but then the gray background is really small and doesn't follow author-txt and author-img height.
Also I tried display:inline, but then text starts from the lower part of the image.
<div id="author-box">
<div class="author-img"><img src="img.jpg" width="150px" height="149px" /></div>
<div class="author-txt"><strong>About the author</strong><br/>author text<br/><strong>Connect with me:</strong> FaceBook | LinedIn | Twitter</div>
</div>
#author-box {
background-color: #ECECEC;
margin-bottom: 10px;
font-size: 15px;
padding: 10px;
}
.author-img{}
.author-img img{
border-radius: 100px;
}
.author-txt{}
It's very simple: (there are many other ways too)
.author-img {
display:inline-block;
}
.author-txt {
display:inline-block;
vertical-align: top;
}
Demo: http://jsfiddle.net/sem3qyyo/
If you want to use floating, you will need to "clear" the container:
#author-box:after { /* just one method of clearing, there are others too */
display:table;
clear: both;
content:" ";
}
.author-img {
float:left;
}
.author-txt {
float:left;
}
Demo: http://jsfiddle.net/sem3qyyo/1/
Or use floating and overflow: auto; on the container if your design allows it:
#author-box:after {
overflow: auto; /* add this */
background-color: #ECECEC;
margin-bottom: 10px;
font-size: 15px;
padding: 10px;
}
.author-img {
float:left;
}
.author-txt {
float:left;
}
Demo: http://jsfiddle.net/sem3qyyo/2/
And this can go on!
i have 2 div children floated (left and right) in 1 row.
First div's height is higher then second div. So what i want to do is:
Fit second div height according to the parent container, so it will
be the same for both children
Vertical-align the content of the second div
I tried
.container { overflow: hidden; }
#boxLeft{ width: 50%; float: left;}
#boxRight{ width: 50%; float: right; line-height: 100% }
#box2Right p{ text-align: right; vertical-align: middle;}
but line-height: 100% is not working (is working with pixels but i MUST use 100% because i have different rows with different heights).
I also would like to avoid using table if it's possible.
this is my fiddle: http://jsfiddle.net/qYBfu/2/
Thanks
You might want to use display:table like this:
DEMO:http://jsfiddle.net/qYBfu/4/
.container {
display:table;
}
#boxLeft{
display:table-cell;
}
#boxRight{
display:table-cell;
}
You can check this question: Are floats bad? What should be used in its place
Hope this helps:
For make both divs containers same "height", you can use the following code:
#boxRight{ width: 50%; float: right; background: silver; line-height: 100%; margin-bottom: -99999px; padding-bottom: 99999px; }
http://jsfiddle.net/qYBfu/5/
And what is not clear for me is if you want to align the right content in the middle of the column.
In that case, I think either you have to align only one row, where you can use height & line height equal to the left column (that imply to know the height in advance) or use a JS solution.
You can stretch the left div to full height of parent by making the parent positioned and applying position:absolute; top:0; bottom:0 to the left div.
for aligning the text vertically, you can make use of css3 flex box (if ancient browser support is not an issue, hopefully)
.container {
position:relative;
overflow: hidden;
}
#boxLeft {
width: 50%;
display:inline-block;
background: silver;
}
#boxRight {
display:-webkit-flex;
-webkit-align-items:center;
-webkit-justify-content:center;
position:absolute;
top:0;
right:0;
bottom:0;
width: 50%;
background: pink;
text-align:center;
}
JSFiddle
This technique just uses css :before pseudo-element, without absolute positioning
.container { white-space: nowrap; text-align: center; }
You can avoid the text-align, just add it if you want your boxes centered
.container:before{ content:""; width: 1px; height: 100%; display: inline-block; vertical-align: middle; }
.item{ display: inline-block; vertical-align: middle; white-space: normal; text-align: center; width: 30%; }
DEMO: http://jsfiddle.net/qYBfu/9/
I want to create a header area that has previous and next arrow buttons all the way on the left and right while having some header text centered in the middle of the header area. The trick is that I also want all three elements within the header area to be vertically centered as well, regardless of whether the header text element is so long that it causes it to have a greater height than the arrow links or not.
Here is a rough sketch of what I am trying to achieve:
In the top version, the arrows (the black boxes) are taller than the header text, however, in the bottom version, the text is taller than the arrows. In all cases, I want everything vertically centered, and for the header text to be horizontally centered (which is not shown in my image).
At the moment, this is the best HTML/CSS I have come up with, but I know something is missing, and I'm not sure what it is.
HTML:
<div class="container">
<h1>Header text</h1>
</div>
CSS:
.container {
display: table;
}
.prev, .next {
background: #000;
display: table-cell;
height: 50px;
vertical-align: middle;
width: 20px;
}
.prev {
float: left;
}
.next {
float: right;
}
h1 {
display: table-cell;
margin: 20px;
text-align: center;
vertical-align: middle;
}
Can anyone please offer some advice on how I should change my HTML/CSS to get what I want? Thanks.
How about making the container position:relative and positioning the arrows absolutely?
.container{position:relative;}
.prev, .next {
background: #000;
height: 50px;
width: 20px;
position:absolute;
top:50%;
margin-top:-25px;
}
.prev {left:0;}
.next {right:0;}
h1 {
text-align: center;
padding:0;
margin:0;
margin:0 20px;
}
Demo at http://jsfiddle.net/gaby/M4crZ/1/
Original attempt did not center the text vertically...
Try this one better
.container{position:relative;display:table;border:1px solid #ccc;}
.prev, .next {
background: #000;
height: 50px;
width: 20px;
position:absolute;
top:50%;
margin-top:-25px;
}
.prev {left:0;}
.next {right:0;}
h1 {
text-align: center;
padding:0 20px;
margin:0;
display:table-cell;
vertical-align:middle;
}
Demo at http://jsfiddle.net/gaby/M4crZ/3/
I have this code: http://jsfiddle.net/5qLDz/ inside which I want to have images vertically aligned to bottom of the container (with some padding from container itself). It doesn't work even with li having display: table-cell and both li and img having vertical-align:bottom set. What can it be?
Please stop posting solutions using position: absolute. As you can see in my code, I used text-align: center which is important there.
One simple fix is to set the line-height to be the same as the container height:
ul.thumbnails li {
box-sizing: border-box;
text-align: center;
background: grey;
padding-bottom: 22px;
height: 222px;
line-height: 222px;
display: table-cell;
}
ul.thumbnails li img {
border-radius: 5px;
bottom: 22px;
vertical-align: bottom;
}
That seems to work, http://jsfiddle.net/audetwebdesign/5qLDz/20/
You only need to declare vertical-align: bottom on the img rule.
However, if you add other elements like captions or social media links this could affect how you implement the solution.
For the love of god don't use display:table-cell just to vertically align something. Just using relative positioning will also do this far more easily: forked Fiddle.
Only changed the parent to position:relative and the child to position:absolute.
Update your CSS:
div.left section.box ul.thumbnails {
margin: 0;
padding: 0;
}
ul.thumbnails li {
text-align: center;
background: grey;
height: 222px;
position:relative;
}
ul.thumbnails li img {
border-radius: 5px;
bottom: 22px;
position:absolute;
}