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.
Related
In this series they all used a wrapper div.
MDN - CSS GRID Layout
Is this necessary, and if yes, why?
The purposes of wrappers are several, including:
to group elements semantically, for instance to separate page heading
from body text from sidebar from footer.
to group elements cosmetically, such as with a surrounding border or
a common background image or color.
to group elements in layout, such as to keep them all in the same
column when columns are floated next to one another.
to enable special positioning, as when a wrapper is given relative
positioning in order to contain child elements with absolute
positioning.
to make it more convenient to specify elements in CSS and JavaScript
by referring to their parent, without having to id or class each
child element.
(Note: the var above should all be on one line)
So in this case, i think they all used a wrapper div just to group elements in layout.
I'm looking for a general best practice for responsive design, when modules are nested in HTML. Are there standard properties like display and position that allow width/height/left/top/right/bottom properties to be passed onto children? Are float/clear used to provide fresh slates for children?
In my example, this would mean using percentage widths of the #main ancestor for each <img> inside an <a> tag. Right now, my percentage seems to be based on the sibling text width and corresponding CSS table cell width.
Thank you
Are there standard properties like display and position that allow width/height/left/top/right/bottom properties to be passed onto children?
You cannot pass parent properties to the children but you sure can inherit from the parent it, e.g. using position:inherit in the children element you can inherit whatever value the parent had for position.
Now for widths and heights you have to use percentage. In your case you are using display:inline-block on the anchor tag which behaves almost like using display:block with float:left; but I don't see you using any width property.
Try this:
#main-work .section{
display:inline-block;
width: calc(100%/3);
}
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
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?