How can I make a div container expand its width to contain all its child spans in one row?
Please see the example fiddle here.
I would like the div to have all the buttons inside it in one row.
UPDATE
The table from the example can not be removed. Moreover if I had a table instead of the div then the first table would expand. Now I have the div but that's not expanding.
I am going to post this as another answer, as it is not really related to my first answer.
You can wrap your spans with another span that forces no line breaks:
<span style="white-space:nowrap">...</span>
This will make your div (and table) expand to contain the buttons.
Example here: http://jsfiddle.net/jtbowden/JhDwt/
It's not the div that is constraining the spans to be on different rows, it is the table width:
<table width="300">
If you change the width to 600, for instance, all buttons will end up on the same row.
Edit: See my other answer for a method that does what you want.
It may be better to remove the table -- depending on your needs. http://jsfiddle.net/simply_simpy/nxD4G/3/
Related
I've got a table row which has 3 columns now. text text image(with cellspan=2 and rowspan=2)
How can I remove that padding from the right inside the td.
Basically I want to push the image to the left.
img is inside td too
the problem here is, Verticle- align try to change the values as you wanted
example code
vertical-align:baseline;
assigned generally applies to common html elements. with this change, Now everything works as supposed to.
If you want to effect the entire table, you can remove explicit width from all <td>s, and then the text will take as much space as it actually needs.
If you want to effect only one row, you can put the text and the image inside the same <td colspan=2> instead of two separate <td>s
I have a container div that contains an unordered list, that contains multiple li's (simplified to one in the fiddle for simple demonstration). Basically the text in the li's is spilling out over the containing div, which is odd because I added
white-space:normal
which is supposed to mitigate the issue, but clearly doesn't, see http://jsfiddle.net/hQA6u/.
I then tried to give the li a set width, but that doesn't work either.
Basically, I just want the li's text to not extend past the maroon/brown color, and have it break into multiple lines.
Thanks for all help!
jsFiddle
word-wrap:break-word;
this will do the trick
Just add "overflow:hidden;" to your css, or you can use "overflow:scroll;" to make div scrollable.
Hope this helps.
I'm trying to create a table of rows, each of which has some content in some block element (I'm using a DIV in this example for simplicity) whose element I want to stretch to the full height of the TD cell. In this example, the "test" text on the right should have its containing grey DIV filling up the full height of the containing TD cell:
http://www.game-point.net/misc/browserTests/scratchpads/fullTableCellHeight/
I don't want to explicitly set the height of anything (except maybe to a percentage) - setting height:100% on the child DIV doesn't change its height. Is there any way to do this? It seems absurd that the browser, which obviously knows the table cell's rendered height, provides absolutely no way to size a child element to fill it without using Javscript!
NOTE: I'm aware that there are other questions similar to this but they don't seem to take into account CSS3's new flexbox functionality - perhaps that could solve this problem?
You can set the parent element to relative positioning and the child to display block and it should fill the height. I use the technique a lot when trying to get link text to fill the entire button container. Hopefully, it translates to what you are trying to do but since you have no code to show I will give you a brief example of a real life scenario when I use it:
<div style="position:relative; width: 50px; height: 50px;">
some link
</div>
I'm told by Boris Zbarsky himself that it is completely impossible to do this - make a child element of a table cell fill the cell's full height - unless the height of the cell is specified explicitly. Browser makers could probably make this work if they wanted to, but they can't be bothered.
http://img580.imageshack.us/img580/1811/sinttulooh.png
I have the problem you see in the picture. That's a div with three columns. This div has a display:table property, and every column has a display:table-cell property. The problem is that, as you see, the left and right columns begin their content when the middle one has finished its content, and they should start writing from the top, as the middle column.
I don't know why it behaves like that, because there is no conflict with any other rule in the rest of the CSS. And I've seen in other examples that it is not necessary to define table-column or table-row to get that style.
How should I declare the divs to get the desired structure?
Here is the code: http://jsfiddle.net/3fMM3/2/
You don't need tables there and also you don't need to make put display:table.
Just use css styling to make a three column layout, this is what appears you want to achive.
Check this link for example :
http://matthewjamestaylor.com/blog/perfect-3-column.htm
Here's a working example :
http://jsfiddle.net/NyqGQ/1/
Note the "border-collapse" property, to merge container's and children border.
Try to set the vertical-align property to top on your table-cells.
.your-table-cells
{
vertical-align:top;
}
I really hope that you can help me.
I created this fiddle to show what I'm trying to do.
My question is: How do I stretch two div-elements to fill available horizontal space?
As you can see there are 5 div-elements strung together, wrapped by a div-element where I set the background-color and width with 100%.
There are three div-elements with a width of 50px.
The width of the other two div-elements should fill up to the rest availiable space, they should have the same width, too ->50% for each of both divs.
My problem is that the 50% for those both div-elements amount to a 100% total-width. And not to a availiable space width.
I'm trying not to use tables, etc.
Let me know if there is something unclear.
EDIT:
I'd like to hear your comments about this way.
One way to solve this is to treat your divs like the cells of a table. A unique property of tables is that the cells will fill the width of the table no matter what widths you give them. By giving some cells a width the other cells will fill the remaining space. By using display:table and display:table-cell you can take advantage of this without changing your html. Have a look at this example:
http://jsfiddle.net/GyxWm/
I've not tested this but it should work in all "current" browsers. It should work in IE8+ but probably doesn't work in IE7 and certainly won't work in IE6.
You can do it with help of javascript. Change div tags like this:
<div id="part1" class="sectionFillUp">section2</div>
<div id="part2" class="sectionFillUp">section4</div>
And add this javascript somehwere after those tags:
var elem1 = document.getElementById("part1");
elem1.style.width = (screen.width - 150)/2;
var elem2 = document.getElementById("part2");
elem2.style.width = (screen.width - 150)/2;
And remove width:50%; from sectionFillUp in css
Afraid I dont think you can.
The float:left; removes your code from the containing div and all the elements end up next to each other, once an element leaves the screen to the right, it wraps underneath leaving a space (a bit like relative positioning does).
Also, you are attempting to compare a fixed width with a variable width, which is close to impossible.
If you take a look here: http://jsfiddle.net/P5Kjh/5/
First I reduced your code back to 2 divs and got that working.
I've added overflow:hidden to the backgroundG class to make sure there is a grey background and floated both divs left.
Then I set the widths, the cumulative total has to be around 100%, if you add a border to each element you need to work to a smaller percentage.
Then I added back the other 3 in a new backgroundG element and created a separte class for the fillup element so it would be 80% (without a border).
Probably doesnt help you a lot. sorry if not.
Cheers