I am creating a table which I want to have a top part, middle part, and a bottom part. The middle is also divided into a left, center, and right. I want it so that the only thing that ever gets larger or smaller is the middle's center. I am encountering a few problems with this however:
The table isn't filling the entire height;
The Center-Left and Center-Right aren't holding their widths
I have created a JsFiddle so that you can see what I mean.
http://jsfiddle.net/CGv2Z/
Thanks!
Ignoring the fact that this is a table and you appear to be wanting to use it for layout (hint: You probably shouldn't be), and some other problems.
There were 2 primary problems.
You had every element under .Window set to display: block; and width: 100%. Remove that.
You have the width of .Window-Content-Content set to 100%, which is 100% of it's parent, which isn't what you want. You have left and right set to specific widths, table cells will then naturally fill in the extra width. if the parent table has a width set on it.
http://jsfiddle.net/CGv2Z/10/
take a look at this :
http://jsfiddle.net/CGv2Z/12/
Related
So, I have this code
http://pastebin.com/W3ggtgZB as css, and the body looks like this:
http://pastebin.com/2tkmhnfW
What I am trying to do is create a div with two children divs, one of which has a fixed width, and the other one I want to fill the rest of the blank space. I'm eventually going to want a div going across the top of this side div, too, but, that comes later. My issue is, the child div sub1 expands to be 100% of its parent width, which is an issue, because then it overlaps out of the parent div and keeps going. I tried things like floating left, using block and inline, I tried setting the width to auto (which makes it disappear for some reason) - but nothing seems to really work. It looks okay, at first, but when you zoom in, sub1 kinda follows its own rules. Can someone help me fix it so that sub1 will just fill in the rest of the space left in the main div?
Here is the answer:
http://dabblet.com/gist/6069015
Only need to specify the side column's floating and the rest will take place as you want, adapting the screen size as well.
Hope it helps!
http://codepen.io/anon/pen/BFjCE
I am trying to postion the div which is at the bottom of this example to the right of the larger div. They are both being floated left but the 2nd div won't postion next to the bigger one.
I am guessing it is something to do with the sizing and when ever i make it smaller it works.
This image shows what I mean
Well you have answered the question already, size of the div will matter. In case the adjacent divs size sum up more than the available width of the box containing them, it will cascade down. In case you still want them in same row, you would have to give overflow-x
The problem you're having is that the two widths in reality exceed the 100% page width, because you have padding on the widths. The padding is not included in the 60% and 40% widths that you specified for your sections, so the float is going past 100%, and thus the second element has been pushed down.
I did a quit edit to your CSS changing .grid-1-2 from 60% to 50%, and this solved the problem.
.grid-1-2 {
width: 50%;
}
I have no control over the html in this project, so I need a css only solution unfortunately. The html is horrible, and it this wouldn't even be a problem if I could edit it. I have made a fiddle of where I am at at the moment.
I have a fixed width div, with a fixed width table inside it. They are the same width (500px in example) The table has an unset number of rows, generated in asp. I have floated the rows left so they appear in line (I know this is awful, but it was all I could do without editing the html) Each td is 100px. The heights and background colours added in the css are just to make it a bit clearer, they can be changed to whatever.
What I want to achieve is to get the td to start at the right hand side instead of the left. I have tried floating right instead of left, but this makes the links appear in reverse order which is undesirable.
The only solution I can come up with is to change the table width in css and float it to the right, which would be fine if the number of rows was a constant, but there could be some added to it or removed, which would leave it looking incorrect again.
fiddle link
I think you were correct with your thought to change the table width in css and float it to the right. I think I get what you want if I set the table width to 0px (it will expand to contain the tr's) in CSS, and float the table to the right.
Edit: nevermind. I was using Chrome and it worked there, but not in IE
Edit2: width:auto seems to make it work in IE, Chrome, and Firefox
I you have fixed width tds in your table, they should add up to 500px. In this case they add up to 400px. So you have to prepend one tr with auto width to your table.
Update: Hmm, this does not work since you have floating trs instead of tds
See here: http://jsfiddle.net/KDfTN/
I have a table for which one column will sometimes contain extra-long content. Normally I want the table to stay at its natural width (i.e. not filling its container). However, if the natural width would be larger than the container, I want to cut off the extra-long content with an ellipsis. As shown in the link, I've tried what I think is the correct way of doing this, but it doesn't work: The table just keeps growing past the width of its container. Any ideas or suggestions?
Edit: The width of the table's container is not fixed, just as it is in the JSFiddle interface.
Set max-width:300px; on td.long (or whatever width you want)
I want to make a textfield in my html page to expand as much as possible to fit the parent width. Here is an image shows what I want.
(source: ez2learn.com)
I try to use width: 100%, but the browser sets the width of elemnt as its parent's, which makes no room for other elements, they have to to be placed in second line. How can I let the element to expand as much as possible to fit all space in single line?
Thanks.
If you want to make the input ‘100% minus the widths of those other things’ you're into CSS layout stuff.
You could float: left the label, float: right a wrapper around the buttons, and set left and right margins on a wrapper around the input, then set the input to width: 100%.
(But personally, liquid-layout forms is one of the places I still typically resort to tables, as combining a series of fixed- and variable-width columns is something that easily stretches CSS layout beyond its limits.)
I agree with bobince. I would look into a table option. I would either decide on fixed:width that works for you within the table, or try to make the width:100% within the table.