I have a problem with table-layout:fixed and width of inner columns if their content wider than column.
Look at my sample here:
http://jsfiddle.net/H5FLm/
Main idea of this markup that I need centered column with auto-width by inner content and liquid columns on sides.
I'm opened for any suggestions to fix it or use different markup.
Thanks.
I prefer using word-wrap instead of overflow. Check my version here
Added word-wrap: break-word; to content class.
Check out this layout, sounds like it's what you're looking for:
http://matthewjamestaylor.com/blog/perfect-3-column.htm
The only reason your current layout doesn't work is because of your choice to use the string looooooooooooooong as your sample text. HTML does not wrap letters. Technically you can do overflow: hidden; and BOOM... problem fixed.
Had you used loo oooooo oooooo ong, no problem.
Related
I'm looking for a way I can have the text in one column wrap around other elements to overflow into other columns. Is this possible?
Here's an image of the page to illustrate what I mean.
What I would like is for the text to extend its width to both columns after the image. The image is a known height and width.
If it's not possible using Elementor/Wordpress, advice on how to do it with HTML would also work.
Any help would be appreciated. Thank you!
You don't want to use columns. You want to use css float property.
Edit: I am not sure with elementor specifically, but most builders and the built-in WYSIWYG allow to to set float on images without having to use CSS yourself. But if you need to the property is:
.specific-image {
float: right;
}
Note that this could cause some weird alignment with the image and the title text. Might need to also adjust the margin on the image.
http://jsfiddle.net/ADLrh/
Hopefully you can see what I'm after. The three 'fillers' on the top row have sunk, upsetting the pyramid-like formation. Any idea what's causing this?
EDIT: I should also add that the method I go for needs to be flexible because potentially any filler could be a like button and the actual pyramid is quite a lot bigger.
Indeed, like Guy suggested, you're going to want to use the float property rather than display: inline-block, because inline-block is pretty finicky for vertical alignment when using different types of elements next to each other, with whitespace between them.
However, to keep the "pyramid" form, you'll want to wrap the buttons in another div that IS set to display: inline-block, to allow the whole row to center in the current parent div.
Like in this example: http://jsfiddle.net/syd8L/
Remove the white spaces between the HTML elements. This is not however the case where you should use display: inline-block;. Analyze this example. You could use float instead, then you wouldn't need to worry about whitespaces between HTML elements.
Easiest way would be to add some relative positioning to the buttons on the first row, like this:
http://jsfiddle.net/ADLrh/1/
Where you have display: inline-block, you should also add vertical-align: top.
See: http://jsfiddle.net/thirtydot/ADLrh/2/
I was able to get three div's in a row, no sweat. Where the problem lies when the site is done some pages have text in the center column, however when i start typing the text spills over into the other divs..... The text doesn't wrap (stay in that div)
I'm sure I am probably missing one little dumb thing but any help would be greatly appreciated!
I uploaded a test of it for you guys to see:
http://graves-incorporated.com/test_sites/solera_new/test3col.html
and with the text spilling onto the next div:
http://graves-incorporated.com/test_sites/solera_new/test3col_2.html
I think you worry about nothing. Words like
Stufffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffdddddddddddddddddddddddddddddfffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffff
are not found in many languages. You will see if you put normal language in your div, the text will not overflow at all
You could always use CSS's word-wrap CSS Word-Wrap example.
Or PHP's wordwrap() function PHP Word-Wrap example.
There are various ways you can approach it, but that should set you off in the right direction :)
I Think you must use a proper language then it will not go out of Div's Width , Becase your DIV is already in a Fixed Width.Just use another the good words instead of stuuuuuuuuuuuufffffffff. It will work fine then :).
overflow: hidden will help prevent it from breaking the layout, although some content may be hidden. I would suggest word-break: break-all, but that has a tendancy to break words unnecesarily.
I have a table that I'm styling with CSS. Yes I know, tables are bad and all that. I want the "grid" of TD's to all have the height of the row they are positioned in.
http://jsfiddle.net/p87Bv/1/
You'll see if they have varying content, they look all jumbled up! Would prefer not to use Javascript.
tables are not automatically bad. tables are perfect for displaying tabular data... even though that doesn't seem to be what you are doing.
move the style from the div to the table cell...check out my updated fiddle for some CSS changes. i think you could remove the divs from the markup now that they aren't being used for anything via CSS
http://jsfiddle.net/p87Bv/5/
All you have to do is give you tds a height, and then give the divs inside a height: 100%.
Here's the fiddle: http://jsfiddle.net/p87Bv/2/
It's hard to understand your question. Maybe you can clarify - is this what you're looking for? Also notice how the overflowing text is in a scrollable div - more on that later.
Link: http://jsfiddle.net/ZFHUm/
If it is, it's as simple as adding the height CSS property. Also, it's always good to address the text overflow, especially in this manner, in case the text inside the table row (div) is larger than the div itself. Add these to the 'table td div' property to achieve the affect in the new fiddle:
height:200px;
/* or whatever height you'd like them to be */
overflow:auto;
/* makes all overflowing text have a scrollbar */
I have a set width and the height is set to auto.
Each row is a div, inside is a div for each column. and there is a <p> tag inside the column divs where text should be.
The CSS involved is very basic, just some padding and set width/heights...
and float left.
Something I'm missing?
It's actually expected behavior for your code. You have a single "word" in your "cell", with no spaces in it. So browser doesn't know where to wrap and automatically extends the box. You should add word-wrap: break-word CSS rule to .orderHistoryTable selector (or to orderHistoryTable div.row1 if you want this behavior only on this cell)
http://jsfiddle.net/d2Amf/
Did you try setting the CSS overflow property?
http://www.quirksmode.org/css/overflow.html
I live and breath by the Clearfix method. It will solve many of your layout problems w/ divs. It might solve this issue you're having, or might not, but overall it's great to use when doing div heavy layouts. I use Jeff Starr's method from Perishable Press: http://perishablepress.com/press/2009/12/06/new-clearfix-hack/