I have table within the div. If I view it with IE9 or FF then it is ok. But if I view it within IE8 the table grows beyond the div border. Any ideas?
<div>
<table width="100%" >
<tr>
<td>
</td>
</tr>
</table>
</div>
found the solution here:
http://www.456bereastreet.com/archive/200704/how_to_prevent_html_tables_from_becoming_too_wide/
The trick is to use the CSS property table-layout. It can take three
values: auto, fixed, and inherit. The normal (initial) value is auto,
which means that the table width is given by its columns and any
borders. In other words, it expands if necessary.
What you want to use is table-layout:fixed. Bam! Now the table is as
wide as you have specified in the CSS. No more, no less. And to my
great surprise this seems to be widely supported by browsers. The only
browser of any significance that does not support it is IE/Mac, and
the significance of that browser is rapidly approaching zero.
Next is deciding what to do with the content that doesn’t fit in the
table anymore. If the table only contains text, word-wrap:break-word
(word-wrap is specified in the CSS3 Text Effects Module) will force
the browser to break words as necessary to prevent overflow.
You could set it inside its own div with overflow: scroll; so that it makes a scrollbar when the table expands too much...
Add the style display:table to the div tag. This causes the element to act like a table.
Give table width as 100% so that it will occupy div and wont cross it.
As user384080 mentioned, table-layout:fixed should be added. However, merely having table-layout doesn't always fix the problem. Please make sure that you add the width attribute as well:
<table style="width:100%;table-layout:fixed">
check what box-sizing is set by default by the browser.
box-sizing: content-box; means:
The specified width and height apply
to the width and height respectively
of the content box of the element. The
padding and border of the element are
drawn outside this area.
box-sizing: border-box; means:
The specified width and height
determine the border box of the
element. Any padding or border
specified on the element is drawn
inside the remaining area. The content
box is computed by subtracting the
padding or border widths of the
respective sides from the specified
width and height.
it night just be a matter of changing the box-sizing value.
there's an article about it here: http://ie8demo.com/BoxSizing.aspx
Do you have a width set on the div? If so, it will stick to its width, allowing the table to overlap. Try removing the width and it will expand to its container's width. If you want thwe div to fit the table size, you can float it.
In addition to the first answer, make sure that the container element of the div has overflow: auto or scroll. The clearfix hack is helpful, too.
Related
I have the following div with these two identifiers:
.locations_wrapper
and
#tenn_location_wrapper
the height of the latter is set to 600px and the height of the former is set to 500px. I have set overflow-y:hidden to each div identifier and yet, when the div is rendered in Chrome, the height is 2215px. Is there any way to keep it from expanding to this height and adhere to the asigned height values?
Here is a fiddle with the HTML and CSS:
https://jsfiddle.net/ft74v68f/2/
N.B. the fiddle does not totally illustrate the problem as the Bg image, which is of a size 2048px * 1365px, is not rendering.
my <body> tag ends in the middle of its child, locations_wrapper. However when I increase the height of the body element such that it doesn't overflow, the heights of its children are still not enforced.
The issue lies with your
#tenn_location_wrapper {
display:table !important
}
.locations_wrapper {
display:table !important
}
You replace this by display:block, and you'll see it's fixed. Only use tables for using tabular data, as using them to style your page leads to a lot of issues.
I have the following structure:
http://jsfiddle.net/poztin/q9v9j/10/
I'm trying to get the fieldsets to vertically fill their parent table cells.
My understanding is that in order for the fieldset to have height 100% I need to set a fixed height on it's parent.
However the content within each fieldset is generated dynamically, therefore I cannot set a fixed height.
The above jsFiddle works in Chrome, but not IE.
How can I achieve this in IE? I'd prefer a css solution but would also welcome jQuery suggestions.
You have put the td height as 1px. I removed it.
Is this what you are looking for? http://jsfiddle.net/q9v9j/13/
The main element "table" has to have height:100%, then it magically works.
See here:
http://jsfiddle.net/luissanchezm86/nGCdx/13/
I have this:
http://jsfiddle.net/UHrLH/1/
I set the height on the box element to auto, but min-height is 200px;
Now if i try to make more content in the first box, the height expands but it creates a big white space under it. I do not want that, i want to have the box under eachother like you can see above, where the height on all boxes is 200px
See the issue here:
http://jsfiddle.net/UHrLH/2/
http://jsfiddle.net/chricholson/UHrLH/10/
This will give you boxes inline but unfortunately the pairs will not extend to match the height of it's partner. To do this you will need to use tables or a javscript overwrite to capture the height. Also, bear in mind display: inline-block will not work on divs in IE7 and below, it would work on a span though: http://www.quirksmode.org/css/display.html#t03
http://jsfiddle.net/UHrLH/11/
I have added an additional div if that is ok for you...
<div class="box_Container">
I am trying to give my div and textarea some padding. When I do this, it increases the size of the element, instead of shrinking the content area inside of it. Is there any way to achieve what I am trying to do?
You could add box-sizing:border-box to the container element, to be able to specify a width and height that don't vary when you add padding and/or border to the element.
See here (MDN) for specifications.
Update (copied comment to answer)
Right now, the value border-box is supported in all major browsers, according to MDN Specs
Some browsers of course requires proper prefix i.e. -webkit and -moz as you can clearly see here
According to CSS2 specs, the rendered width of a box type element is equal to the sum of its width, left/right border and left/right padding (left/right margin comes into play as well). If your box has a width of '100%' and also has margin, border and padding, they will affect (increase) the width occupied by the object.
So, if your textarea needs to be 100% wide, assign values to width, margin-left/right, border-left/right and padding-left/right in such a way that their sum equals 100%.
In CSS3 we have three box-sizing models. You can use border-box model:
The specified width and height (and respective min/max properties) on
this element determine the border box of the element. That is, any
padding or border specified on the element is laid out and drawn
inside this specified width and height. The content width and height
are calculated by subtracting the border and padding widths of the
respective sides from the specified ‘width’ and ‘height’ properties.
This was a mess on W3C part and various browsers only added to this complexity with their own versions of box models. Personally, instead of thinking which browser or CSS setting will do the trick I just wrap the box' content in yet another DIV statement and use margins on that DIV, instead of using padding, like this:
<div id="container" style="width: 300px; border: 10px solid red;">
<div id="content" style="width: 250px; margin: 25px;">
Some content
</div>
</div>
Although this only works for fixed size containers
It depends on the browser and it's implementation of the box model. What you are experiencing is the correct behavior.
IE traditionally got it wrong: http://en.wikipedia.org/wiki/Internet_Explorer_box_model_bug
For a more cross-browser solution, you can avoid this behavior, by wrapping whatever tag that needs padding into another tag with fixed width, and giving it width:auto. This way, if the parent has a width of x, and you add padding to the child, the child will inherit the full width of x, applying the padding correctly without modifying the parent width or its own.
A div by default takes the width of its parent container, so to avoid browser compatibility issues, you could add a child div in the specified div then add the required padding to the child div.
N.B - don't specify width to the child div because it would increase if you add padding
I have a table who's columns contain two inline divs, one displaying an image, and the other display text, side by side. So each td is rectangular with an image on the right and text beside it on the left (on a single line). The problem (which happens in all browsers) is when I shrink the horizontal browser size, rather than keeping the td width fixed and adding a horizontal scroll bar, it is wrapping the text and moving it under the image, hence shrinking the width of the td. How can I get the td widths to stay fixed regardless of the browser width? Oh and in case its affecting it, both divs have relative positioning so that I can slightly adjust their position within the td. Also, I can't fix the width of the td since each column width must slightly vary depending on the text. Thanks
<td>
<div style="display:inline;position:relative;">
<img src="some_image.jpg" />
</div>
<div style="display:inline;position:relative;">
some short text
</div>
</td>
You can add the 'nowrap' attribute to the td:
<td nowrap>
or style it with:
td {white-space:nowrap;}
Basically your problem is right there in the question "How can I get the td widths to stay fixed ... Also, I can't fix the width of the td since ..." :)
Anyways, there are two possible solutions that I can think of.
If you know what maximum width of the table you want to allow, you could wrap it in a div with a fixed width. That way the body of your page won't shrink to less of the width of the wrapping div, and therefore it will not push on your table.
Use javascript to fix the width of the td after the page has loaded. That way it will be fixed to whatever width its contents have expanded it to.
You should be able to get the width from the td from the offsetWidth property.