I want to overlapping, relatively positioned divs, and for a parent div to wrap them, such that it fits both (as if they weren't overlapping). So something like this:
+------------------------+
|+----------+ |
|| Child 1 | |
|| +---------------+|
|| | ||
|+------| Child 2 ||
| | ||
| +---------------+|
+------------------------+
So, the parent should always fit child 1 and child 2. Child 1 and Child 2 are themselves not a set width or height, their size is a function of their contents. Technically, the image above does more than I care about, since I plan for both divs to be at 0,0. I can't absolutely position them, because then they won't grow the parent.
Related
I want to display "cards" in a line (for ex. 4 cards on each line). Each card is a div that contains a title (a span). My main problem is that the height of the title will change regarding the number of lines required to display the whole title.
So if I have a title that needs 2 lines to be displayed, the cards that contains itself will be shifted compared to the ones where the title can be displayed in only one line.
In such case, I get something like that:
+-----+
+-----+ | ABC | +-----+
| ABC | | DEF | | ABC |
+-----+ +-----+ +-----+
| | | | | |
| | +-----+ | |
+-----+ +-----+
Here is a live demo: http://plnkr.co/edit/eO9MwDyhFQg3BriMjikJ?p=preview
How can I solve that, i.e. I want all the cards to have the same height, and of course perfectly aligned.
Thanks
Just add vertical-align on the class title for spans:
.title {
vertical-align:top;
}
For default is baseline that makes the span align change based on the lenght of another baseline text inline-block elements.
You can also add this to the xxx class and works
Check this Demo http://plnkr.co/edit/X8vmBasqq3lZslMylSjI?p=preview
is this what you mean?
i have replaced display inline block with float left
http://plnkr.co/edit/xvP2ElSyEV1oXHSkV4Fb?p=preview
I have a few block-level (or inline-block, it doesn't matter) elements with pre-defined dimensions. I want them at the top-right portion of a container div. I want them being positioned one next to the other, from top to the bottom. When there isn't enough space, I want a new column at left of the previous one, also going from top to the bottom.
In other words, I want something like this:
.------------.
| 4 1 |
| 5 2 |
| 3 |
'------------'
How can I achieve it using a pure-CSS solution with a clean HTML?
Even better if it can adapt itself to the available height.
Alternative effects that I can achieve (but are not what I want):
With a combination of column-width: <something>; column-gap: 0;, I can achieve this effect:
.------------.
| 1 4 |
| 2 5 |
| 3 |
'------------'
With float: right;, I can achieve this effect:
.------------.
| 3 2 1 |
| 5 4 |
| |
'------------'
If you change the writing mode, you can get the columns module to do what you want:
http://tinker.io/9f846
ul {
columns: 10em;
direction: rtl;
}
li {
direction: ltr;
}
I have a box which contains an image, which has float:left set, and textual contents.
-------------------------------------
|--------- |
|| | |
|| Image | |
|| | Content |
|--------- |
| |
| |
| |
--------------------------------------
Fig. 1
I generally consider it good to have the content float around the image. However, in case of using lists, the following look is annoying:
-------------------------------------
|--------- |
|| | List |
|| Image | |
|| | 1. Item |
|--------- 2. Item |
| 3. Item |
| 4. Item |
| |
--------------------------------------
Fig. 2
I'd rather have it the following way (at least for considerably short lists, let's assume the list is short for now)
-------------------------------------
|--------- |
|| | List |
|| Image | |
|| | 1. Item |
|--------- 2. Item |
| 3. Item |
| 4. Item |
| |
| Additional content (not in list) |
--------------------------------------
Fig. 3
I got the above look by making the list display: inline-block (and either inserting a <br> before the list, or wrapping it in a block-level element)
However, in case of any long list items (longer than the small width of the content field),
the float is cleared.
-------------------------------------
|--------- |
|| | |
|| Image | |
|| | |
|--------- |
| 1. Item |
| 2. A very long item, which makes |
| the list box just as wide as the|
| outer box. |
| 3. More items |
-------------------------------------|
Fig. 4
Why this happens seems clear to me. In the floated environment, first, the list is rendered as a block (because of display: inline-block), using the width of the outer box as environment width. As there is a long items, the resulting block will be as wide as the outer box. In a second step, the block is tried to fit next to the floating image, where it won't fit. Lastly, the float is cleared.
Is there any way to amend the situation? Like, first try to render the list with the shorter width, and if that fails, re-render? Or a completely different way to achieve what I want?
Put the list inside a DIV that is also floated left with a defined width.
Try a plain overflow:hidden on your list - this should do the trick.
See the example.
I have a table in a div element. The div is used as a placeholder only (it has "fixed" position and hard defined sizes/left/top). The table has 100% width and height (of the div).
When I use internal "caption" tag within the table it seems like it's not included in the total height of the table. The table is out of the div from the bottom.
Without caption everything is OK (the table has the same position/size as the div):
--------<div>--------
| =<table>========= |
| | ||
| | ||
| | ||
| |================||
---------------------
With caption it's broken (the table is outside the div):
--------<div>--------
| |
| Caption (large) |
| |
| =<table>========= |
| | ||
| |
| |
|================|
What I want is to make table have the div height minus caption's height.
Try fixing the captions width and height and setting margin and padding to 0. Then add up the table height + caption height to make the div height.
Add overflow: hidden; to the outer <div> - as long as your div doesn't have a pre-defined height, it will cause all internal elements to be included in any background-color/image size computing for the <div>.
I have 3 floating containers of unknown width. The surrounding container has a fixed width.
-------------
| X | X | X |
-------------
Inside the third container there are again floating elements:
---------------------------
| X | X | X [ O | O | O ] |
---------------------------
What happens when these elements execeed the width of the surrounding container is that single elements will drop into a new line (which is quite fine and expected behavior):
-------------------------
| X | X | X [ O | O | O |
O | O ] |
-------------------------
But what I want is that the float child elements are indented like this:
---------------------------------------------------------------------------------
| X | X | X [ O | O | O |
O | O ] |
---------------------------------------------------------------------------------
Has anyone a CSS only solution to this problem? Should work in IE6 too. I tried many things but got lost in float.
Try this example to reproduce your problem.
I can't even get the behaviour you are describing, are there really only floats there?
If the column-elements are floating without width, then every float will just expand with it's content, and when it doesn't fit in the container, it'll drop down (the whole element). Without setting the width of these column-elements, there is not a lot you can do about it css-wise.
I'm not sure about all the tricky consequences right now - maybe show the code in a JSFiddle for people to play around with? - but the best solution that comes to mind # will probably be another wrapper around the three O s that floats left as well.