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/
Related
I have some tables with print-reapeating thead and many rows. Sometimes a new table starts at the very bottom line of a page, when printing.
I want to force the table to do a page break, if the space left on the page is less than, say 10 cm.
I tried to put an (invisible) overlapping div before that table:
<div style="position:relative;">
<div style="position:abolute; top:0px; width:32px; height:10cm; overflow:visible; page-break-inside: avoid;"> </div>
</div>
<table goes here...>
But it's not working. (FF and IE11)
Is there any way to do that? (I'm trying to print a book, and the table is a new chapter).
I believe this is a bug in Chrome.
The code below demonstrates the best method I've found for multi-page table printing. It has the following features:
column headers repeat on each page
if a page break occurs near the top of the table, it will not leave behind an orphaned set of column headers (a problem which isn't limited to just Chrome)
page breaks occur only between rows
no need to worry about paper size or how many rows will fit-- the browser handles everything automatically
cell borders are always fully closed
the above 3 features apply whether or not the table has headers
works in Chrome!
... and the following known limitations:
doesn't support s (tfeet?)
only supports 1 (which is apparently the most you're allowed to have anyway).
only supports top-aligned
any CSS size values that affect height (including border-width and line-height) must be in px
table cannot (easily) be changed dynamically after the js has run
column widths cannot be set by applying width values to individual table cells; you should either let cell content automatically determine column width, or use s to set specific widths, if needed
I put two tables side by side: the left one (1px) only has a thead with 10cm height, the other contains the contents to print.
That sort of works.
I used float:left; for both tables, so they are side-by-side, but IE11 puts underneath.
Any better idea or an improvment of this approach?
I have a .html file containing text content like:
<div> The study concludes that 1+1 = 2. (Author in Journal..., Page ...) Another study finds...</div>
Now when viewing this in Firefox, I want to be able to conveniently copy the text in the () brackets. But 2 left mouseclicks only mark one word like "Journal", and 3 clicks mark the content of the whole div.
So my idea was to put the brackets in another div like:
<div> The study concludes that 1+1 = 2. <div>(Author in Journal..., Page ...)</div> Another study finds...</div>
But this leads to the () text being pushed into a new line, but the text flow shouldn't be altered at all, I just want to achieve the copy+paste behavior. Is there a way to achieve this? I thought about applying a div class to the () and canceling the attributes in the .css file, but somehow it did not work.
Essentially a triple click will mark a paragraph. So even if you were able to make your inner div inline (which is very simple, you can use style="display:inline"), the browsers text analyzing engine would still read it as one paragraph (or one block) and use the standard behaviour: mark the paragraph.
So basically: no, not if you use only CSS. You have to use JavaScript to identify a triple click on the element and mark it.
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>
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.
I need to create three divs, next to each other (attribute float:left).
Then I read the data from database and I need to present this data in three divs, in such a way that I first fill up the first div, line by line and when I reach certain height, I go to the next div and fill it with data, and so on.
This is something like reverse table, that is I first fill the first column in first row then go to second and so on until the end of the row, then I move to the second column of first row
and so on. I hope you get the picture.
Is there a way to achieve this in CSS or in some other way?
This functionality is available in CSS3 using column-count and column-span.
I do not know how to make it efficient, but it should be possible with javascript... you know the line-height, you check the height of first div with all content, then you truncate it to desired size and the rest put to the next div.. repeat.. but this looks odd.. ?
You might be able to do this by requesting the first 30 results in the database in one column, then request the next 30 in the next div, and so on. I can't see it being possible in CSS 2.1 alone.