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.
Related
I'm struggling with a difference between WebKit and Firefox:
If one div (B) is nested in another (A) (both having CSS position absolute) but B is geometrically outside A. Desired look is what both WebKit and IExplorer do:
|---------------| Desired !! (Webkit,IExplorer)
|A |
| |
| |--|------|
| |B | |
| | | |
| |--|------|
| |
|---------------|
i.e. Chrome: shows B outside A, both have the expected border size
but Firefox: enlarges the border of A to go around.
|-----------------------| Firefox, why ... ???
|A |
| |
| |---------||
| |B ||
| | ||
| |---------||
| |
|-----------------------|
How can I force Firefox to behave like Chrome/Safari(and IExplorer) ?
Take a look at https://jsfiddle.net/r29knz8z/4/
Is this a Firefox bug ?
The problem in your case seems to be the CSS property outline. If you remove it and mark your boxes some other way (border, background-color or something like that), your example is displayed correctly in Firefox as well.
According to this article, though it's a few years old, Firefox has its problems with outline. So it might be a good idea to look into replacing it in your code.
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 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.
This is a tricky question, but I will do my best to ask it:
I have a middle column of content and I want to add columns to the left and right of it, but I want them to "hug" the middle column. How can I center the middle column always and have the other two columns "hug" it?
The columns have a fixed width of 750px and basically when the viewport is maximized it should be something like this on a big monitor:
-------------------------------------
| | | | | |
| | | | | |
| | left | mid | right | |
| | | | | |
| | | | | |
-------------------------------------
and when the window is not wide enough, the left and right columns should get cut-off, but the middle column should still be centered and visible (assuming they don't make it too small horizontally):
-------------
| | | |
| | | |
le|ft | mid | ri|ght
| | | |
| | | |
-------------
Where "le" and "ght" are off-screen and not visible in the viewport.
I'm interested in any ways of accomplishing this. Currently I'm using
margin-left: auto;
margin-right: auto;
to center the middle column, but if there are ways to accomplish this without that, by all means =)
Thanks for reading this tricky question. I hope I got my idea across.
(If you can think of a better question title, feel free to edit it. I wasn't sure what to put)
P.S. Each column is actually made up of a few divs itself, (blocks that make up a column), I'm not sure if that makes the problem any easier to solve, or if that totally changes the problem...
Something like this ? http://jsfiddle.net/ndtLX/
i'm using an absolute positioned div above 2 floated divs, each large 50% of the container.
the problem is that on the left and right columns, the off-screen happen on the other side, and not on the same side as you asked...
You could also try floats to see if that gives you what you want
.divLeftCol
{
float: left;
}
.divRightCol
{
float: right;
}
<div class="divLeftcol"></div>
<div class="divCenter"></div>
<div class="divRightcol"></div>
I have a list that looks like this
--------------------
| | |
| 1 | 2 |
| | |
| 3 | 4 |
| | |
| 5 | 6 |
| | |
--------------------
(it's a simple <ul> with <li>'s)
the container of this list, let's call it div.wrap has a fixed width like 400 pixels, and the list items are floated to left with 50% width.
How can I add a 10 pixel spacing between the left and right list items, without screwing up the layout?
Note that I have no control over the HTML from within the list, so I can't add any classes to these list items :(
I tried with margin-right: 10px on the <li>'s and margin-right: -10px on the <ul> but that doesn't work :)
An example with margin-right.
edit
If you want to hide second margin, you can make ul a little bit bigger than its wrap and hide overflow:
http://jsfiddle.net/YBy2K/3/
Not terribly elegant, but simple enough.