simplified, i have three elements A, B and C. B and C are together in a div. if there is enough horizontal space (browser window wide enough) i want them displayed as
A B C
trivial so far. if the window gets smaller, i want them to wrap like this:
A
B C
i solved this by giving the div a style.whiteSpace = "nowrap".
the problem is, that B C now simply wont wrap any more, even if there is not enough space to display them. when the window gets even smaller, i want this to be displayed as
A
B
C
so what i am looking for is kind of a softer version of 'nowrap' which prevents wrapping if there is room to evade to, but allows wrapping if not.
EDIT:
a reply solved the above by making everything float: http://jsfiddle.net/nF4k5/6/
this made me realize that my simplification went too far. actually in my application A is a text and has wrapping in itself, so will sometimes fill the whole width. B and C can be imagined as single words that should appear
a) together in the last line of text A or if they wont fit there together
b) on a new line or if that line is too short
c) on two lines.
i made an example to play around with: http://jsfiddle.net/nF4k5/5/
ever smaller screens should result in:
A A A A B C
A A A A
B C
A A A
A B C
A A
A A
B C
A
A
A
A
B
C
it would be especially nice if the solution didnt involve making changes to A, like my adding of nowrap to the div around B C, which doesnt work.
EDIT:
solution: instead of giving the wrapper of B and C a whiteSpace="nowrap" i give it a display="inline-block".
put A in div X , B and C in Y. Float X and Y to left.
Whenever width is smaller than width of X+Y, Y will go down.
Inside Y : put B in div sonOfX, put C in sonOfY, Float sonOfX and sonOfY to left.
Whenever width is smaller than width of sonOfX+sonOfY , sonOfY will go down.
here you go - http://jsfiddle.net/nF4k5/
This should do it: http://jsfiddle.net/nF4k5/7/ for your new question
Since you said these are elements, I'm assuming you mean HTML elements, right? If that's the case, just float them. That's the natural behavior of floats.
Related
I have three <div>s, A, B, and C. They are all lines of text. The basic layout is:
aaaaaaaaaaaaaa ccccccccccccccccccccccccc
bbbbbbbbbbbbbbbbbbbbbbbbbb
When the window is opened fully, the cccccccccccc can be kerned (i.e can fit) above the bbbbbbbbb and therefore I want it to do so, as illustrated above.
However, when the window is reduced in size such that either A and C can't fit on the same line, I want ccccccccccc to move below bbbbbbbbb, like this:
aaaaaaaaaaaaaa
bbbbbbbbbbbbbbbbbbbbbbbbbb
ccccccccccccccccccccccccccccccc
Therefore, I somehow need to make the default position of C to the right of A, but to make C move below B when there isn't enough space to accommodate C in its full length (and I don't want any line-wrapping).
Placing A and B together in a containing <div> and having C follow that <div> simply doesn't work, as I want C to be next to A, on the same line, in its default positioning; if I wrapped A and B into a dedicated <div> container, I'd end up with:
aaaaaaaaaaaaaa
bbbbbbbbbbbbbbbbbbbbbbbbbbb ccccccccccccccccccccccccc
...and that's not what I want. (I'd also likely end up with text-line wrapping of B and C, and I'm trying to avoid that.)
How can this be most efficiently accomplished?
I've Solved it...no JQuery required, just judicious styling:
<!DOCTYPE html>
<div style="float:left">AAAAAAAAAAAAAAA </div>
<div style="float:left; width:100%">BBBBBBBBBBBBBBBBBBBBBBBBBB</div>
<div style="display:inline-block; vertical-align:top">CCCCCCCCCCCCCCCCCCCCCCCCCCC</div>
See it in action here: https://jsfiddle.net/TomJS/wj44qqe4/
I'm having a problem building tooltips for elements inside an html table. Basically I have this:
Table1
a b
c d
Table2
a b
c d
Every element (a,b,c,d) is composed of an image and an empty paragraph which will host the description. Every image has a function, onMouseOver=showDescription(idParagraphToBeShowed, Text), which shows the description of the image when you hover the mouse. The <td> elements have the CSS attribute:
position: relative
and the paragraphs have:
position: absolute
text-align: center
z-index: 1
In this way I'm able to center the description with respect to the image on each cell of the table.
All works perfectly, the only (big) problem is that is I hover (for example) on the cell c, Table1 the description follows on the cell b instead of going beyond the table covering Table2 and its cells. This is of course an extremely nasty bug.
So, how can I 'allow' the description to go over other elements outside its container?
I have a div which contains two lines but i want to make them show up as vertical.
This is how my div looks like
<div>
Line One <br>Line Two
</div>
Is there a way to make text orientation inside the div vertical so that it appears like
L L
I I
N N
E E
O T
N W
E O
Wrap them both in p tags, and set word-break to break-all, and the width to 1px.
A hacky solution, but one that works!
See this example, otherwise, I don't believe there is a cross-browser solution unfortunately.
in css you can rotate text. but a few different:
<div style="-webkit-transform:rotate(90deg);-moz-transform:rotate(90deg);-o-transform: rotate(90deg);filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);">
Line One
</div>
I have an HTML table (populated from a datatable on server side), with no styling except background color, and for some reason it breaks some of the lines.
Is there any CSS behavior that dictates this? I tried to replicate it with a table populated with a random string of "M "s, and it also broke the line after every space...
EDIT:
What's happening:
|M|M|
|M|M|
|M|M|
What's supposed to happen:
|M M M |M M M |
Thanks!
I think you mean the NOWRAP option.
<table><tr><td NOWRAP>Text</td></tr></table>
I need some HTML/CSS guidance. My goal is to create a contacts list screen in my app, and like most contacts list screens, users should be able to pick a letter the name starts with, and the app will filter to that letter. Easy enough.
How I'd like the UI to look is something like this:
Find by Name | all # a b c d e f g h i j k l m n o p q r s t u v w x y z
Where everything to the right of the | is a clickable link.
My problem is that I've got a dynamic width UI, and I'd like the bar to take up the whole width of the users browser even as they resize--so the letter z should be on the far right end. I'd like for there to be even spacing between the letters.
The "Find by Name" text can in another module could read: "Find by Street Name", so that isn't fixed width either.
How is this best accomplished in css/html? If it matters, i'm not using a fixed width font.
Put each letter in an element with a width of 3.8% (100/26).
The drawback to that is you'll run into some odd rounding issues in some browsers.
Personally, I wouldn't try to make them span the entire width. The way you have now seems to be visually proper.