Yes, the saga continues: Presently the only reliable way of getting vertical alignment within nested DIVs is supposedly to use a display-table; property.
Here's a simple fiddle showing it not working: http://jsfiddle.net/aDbFb/1/
or have I misunderstood the trick?
You don't need to use float property when you are using display:table and table-cell. So just remove them from your inline style and then everything will work as expected.
Js Fiddle Example
Related
I'm trying to use whitespace-pre-line to show multiline strings, although it is not respecting the height of what it requires, instead it messes up the alignment of any items following it?
I've created a playground example:
https://play.tailwindcss.com/s3ZMXnUihZ?layout=horizontal
Fixed it by adding overflow-auto helper class for (overflow: auto;) css rule to the parent (p) tag of the span.
Haven't managed to stack divs when creating a flexbox layout. Either they push each other within the container div, or I have to use "position:absolute" on the overlay which gets the div out of its container context.
z-indices seem to not work at all.
I am using chrome latest version and was expecting this behaviour: http://dev.w3.org/csswg/css-flexbox/#painting
Here is a plunker with a basic flexbox layout:
http://plnkr.co/edit/o2BAwvg3XV4YjwAwwmYR?p=preview to illustrate.
You will have to comment/uncomment the positioning in the definition of the .overlay class which is in the css.
Ok, just realized z-index only works with positioned elements.
In the case presented, I needed to set the height of the container of the div .overlay (just put height:100% in .bodybox)
All is good now.
I've set up a JS fiddle of what I'm working with. http://jsfiddle.net/bjankord/2EKQv/
It seems if I add a height to one of the child elements of a parent with display:box set, all the other child elements stretch to that height. I don't know if this is how the display:box and box-ordinal-group properties are supposed to work, if so that's unfortunate. I was hoping to be able to reorder my html markup with CSS using box-ordinal-group when working on responsive web designs, but this height issues is killing me.
I am by no means a flexbox expert but from some quick testing I think you might need to change your layout to be three vertical columns and add box-orient:vertical to each of the parent elements. In order to have one child element taller than the others set the box-flex: property to 2 on your withHeight class and set the min-height of that class to 300px;
Fiddle:
So I messed with your code a bit. I added a parent container with box-orient:horizontal to line up the three columns and gave each column box-orient:vertical. This seemed to fix the issue with height not being respected.
http://jsfiddle.net/mdJ2L/1/
I am trying to just create a basic layout, but i am having trouble to get it to auto-adjust the height.
Something is wrong with the DIV-container since it's not adding the padding correctly to the top and bottom elements. It should be the size of the highest block, right now its the menu block.
Any ideas?
Website
in the container that holds your divs (the one whose height is not adjusting), use a css clear fix. Your container div will adjust once you use this method.
Add overflow: hidden; to the CSS for that particular <div>.
Inspect your HTML by using Google Chrome or Firefox with the firebug addon. Is so easy to see where and where not there is correct padding, margins etc... Additional ye see all css for a selected element as well...
Btw. When you are using padding, are you sure the rows above and below are cleared ?
Tried using margins instead?
removed
So if you look at the tabs and look at hw2, you'll notice it has a little extra spacing that overlaps the spacing on the right. That's because wrapped the div in the <li>. You will notice the others not having it. I don't understand why is it making that extra little spacing after I wrap it.
Just for the record, this is for CSS spacing which has nothing to do with the JS.
Update: I found a ghetto work around!
Is it a space (or the absence of one)?
display: inline will respect whitespace.
You are putting a block level element (div) inside an inline element (li), which is invalid. Most browsers do a reasonable job of rendering this sort of thing, but the results are unpredictable.
I would suggest using divs for the higher level menu. You could use a container div for the menu and float divs within that for the individual tabs.
I ended up just changing the css for that page.