I have a table that has three td's. Inside the first and last td there are nested tables. The last has lines and lines of text, while the first will be just one or two lines. The middle is just one line of text. How can I make the first table have its second row fill up the remaining horizontal space so that one line of text is centered horizontally, lining up with the free floating text in the second td. I've tried wrapping it in a div with a constant height, but that didn't do anything. I'm not sure what else I can do.
Desired result:
+------------+------------+------------+
| blah | bleh | blet |
+------------+------------+------------+
| | | asdf ds |
| | | sdff sdf |
| blah | blah | sadf sd f |
| | | sdf sdfs df|
| | | dss dsd |
+------------+------------+------------+
JSBIN
If the site doesn't need to be responsive and you know the height of the table you could add a CSS height/min-height property - otherwise I think you'd have to leverage some JavaScript to calculate the height of the table and then apply that value to the table.
http://jsbin.com/pifanoja/6/edit
.less_text table {
height:140px
}
Related
I have an HTML table with a column of cells containing two parts e.g.
| Cat (meow) |
+---------------------------+
| Long-dinosaur-name (roar) |
There are also other columns not shown. My users' browsers have unknown widths. On a wide one, I wish to show the cell as one line, as above. If it gets too narrow, I'm fine with wrapping
| Cat |
| (meow) |
+----------+
| Long- |
| dinosaur-|
| name |
| (roar) |
but if one line wraps, all lines must also wrap:
| Cat |
| (meow) |
+---------------------+
| Long-dinosaur-name |
| (roar) |
Without using Javascript, is it possible to do this?
I know I can use <td nowrap> to prevent wrapping, or <br> to force a wrap, but how can I make one cell depend on another?
Try using media query(CSS) with breakpoints. I know you said, the user browsers width's are unknown, but you can anticipate for different width's etc
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.