I have a peculiar issue with CSS -- the 'VPS Plans' div and 'Features' div should be floated together and line up at the bottom. Unfortunately, unless I adjust the size of the Features div to 460px, it kicks down to the next line and I can't figure it out.
The page can be seen here.
Thanks!
Everything is looks good, you need to add display: inline-table; for below CSS.
The element will displayed as an inline-level table
ul.vt li.vt-line-header {
display: inline-table; //----Add this to your CSS
}
Hope you understand.
Related
I'm trying for some days to vertically align the .sl_container.
I have tried vertical-align: middle, but that doesn't work.
If i specify a height and width for the .slideshow, then using top: 50%; and transform: translateY(-50%);, that works. See here.
The problem is that if i remove the height and width for the slider to take up the available space and adapt, then the this will make the inner div appear moved upwards. See here.
display: table-cell; was not an option as it would have the arrows at the sides of the full width of the parent div instead of on the image.
I've tried flex before, and it gets vertically aligned, but if the parent DIV width is bigger than the child DIV, for some reason it goes to
As I said, I’ve tried multiple ways and there is not a single one that gets it done well without breaking the arrow positions.
What I’ve done until now: JSFiddle
The before mentioned settings are commented out in the CSS section.
Any insight to this would be helpful as to a way or how to get it aligned without breaking the whole slide and arrows.
FYI: There is a bleeding effect from the DIV's or images expanding like 1-2px to the bottom, reason why I have each DIV coloured to see if I can fix it. I'm sure it something silly and if you know what it is, please say so. It’s not important so I don’t really care much. xD
Add this to your slideshow element, using flexbox. Flex Needs prefixing for IE11 (caniuse)
.slideshow {
display: flex;
align-items: center;
}
Edit: I enabled the commented height and width styles in your jsFiddle, but this method will vertically align slideshow child regardless of width and height.
Try using flexbox, it's the most elegant solution for vertical alignment
E.g.
<div class='parentDiv'>
<div class='childDiv'>
</div>
</div>
.parentDiv {
display: flex;
align-items: center;
justify-content: center;
}
Take a look -> here
I am confused how to bring two div into same line.
I used float:left and float:right one for each of them and also they are contained as two different div id of a div class. Also used display:inline in class.
Please give any idea regarding this problem.
try float: left for both of them
You can chance the display property to either inline or inline-block.
For example:
<div class="example">One</div><div class="example">Two</div>
With
.example {
display: inline;
}
There are several methods to achieve this, and I've detailed seven of them on a sample page. Tl;dr:
floating the divs (#vladkras' answer)
Using display: inline-block; (#Sohnee's answer)
Using Flexbox: display: flex on the parent
Playing with negative margin to move the second div around
Using display: table on the parent and display: table-cell on the children
Playing around with position: absolute
And, the newest and in many cases best solution, CSS Grid Layout: display: grid on the parent.
I have a problem with FireFox rendering that I don't have in other browsers. I have a table cell that is resizable via the colResisable plugin. In my second cell I have two divs, one containing an unordered list and the other with a table. I'm not sure the contents of these div matters.
Both of these divs are styled as inline-block. The parent has nowrap for the whitespace in an effort to prevent the second inline-block from falling beneath the first. My intention is that the content would overflow the parent TD with a scrollbar.
This works correctly in IE, Safari and Chrome, but in FireFox the content overlaps on top of the border of the parent.
Here are two screenshots showing the difference:
I have a JSFiddle that approximates this behavior, but I can't quite get it the same. Hopefully someone will see this and know what's going on.
You could change display: inline-block to float: left:
#content_1, #content_2 {
...
float: left;
...
}
Working example: http://jsfiddle.net/xVNae/24/
If you want to keep display: inline-block try changing changeing border-collapse to inherit for table:
table {
border-collapse: inherit;
}
Working example: http://jsfiddle.net/xVNae/25/
I'm implementing a menu based on this one:
http://www.jankoatwarpspeed.com/post/2009/01/19/Create-Vimeo-like-top-navigation.aspx
(Demo)
The menu uses a UL / LI structure and CSS for appropriate rendering.
The trouble is, if the browser is not wide enough, the main menu items wrap.
I have surrounded the menu in a DIV.
When I apply
overflow-x: auto;
to that DIV, mousing over a menu item causes scroll bars to appear around the DIV (presumably to accommodate the drop down menus).
How can I prevent the DIV from wrapping while retaining the drop-down menus?
You could simply add a fixed width to the div tag, like such width: 700px;
The best solution I can think of is the one suggested in the comments in The Jonas Persson's answer. It's using white-space: nowrap. For this to work though, you'd have to be using display: inline-block instead of float:left/right to horizontally align the menu's elements.
I played around with your demo using chrome's web developer and made it work.
Just replace every float: left with display: inline-block Add font-size: 0 to ul#menu and override it on ul#menu li with font-size:12px - that's the size your using. (Using display: inline-block adds some whitespace between the blocks. That font-size stuff takes care of it.).
Next ensure the inline blocks are vertically aligned with the top of the container - add vertical-align: top to the li's.
Finally, add the whitespace: no-wrap to the div wrapping ul#menu. That's it.
http://jsfiddle.net/XKL6E/
How can I centre these images so they form a pyramid (overlapping each other halfway)?
If you don't care to support IE7, you can use display: inline-block instead of float: left and just center the whole chunk: http://jsfiddle.net/XKL6E/16/
Add display:inline-block to .empty-button, and text-align:center to .button_row:
http://jsfiddle.net/XKL6E/14/
If you change all of the buttons to span elements instead of div, you can apply the display: inline-block to them.
Credit to #Blender for the inline-block idea and the original version of this fiddle.
http://jsfiddle.net/XKL6E/21/
Edit:
I forgot to mention, the difference between inline-block on a div and a span element is IE7 support. Articles like this one give all sorts of hacky ways to make this work. In the case of div elements, substituting span is good enough.
Using fixed width divs and centring them automatically with
margin-left: auto;
margin-right: auto;
The fixed width is dependant on the width of the images. If the image width is always the same, which I assume in your case is, you can multiply the width by an integer ( use jQuery .css(attr,value) selector ).