I have a div inside a table that is overflowing the screen size. It looks like this:
<table id="hlavni" style=" position:absolute; border:none; position:relative; background-color:#FFC; border:#999 1px solid;" cellpadding="5">
<tr>
<td id="yamana" class="trida" valign="top" style="line-height:1.5em;">
<div style="background-color:#FFC;" id=load_tweets>44444444444444444444444444444444444444444444444444444444444444444444444444444444444444444444444</div>
</td>
</tr>
</table>
How can I prevent it from overflowing?
<html>
<head>
<style type="text/css">
#limit {
max-width: 500px;
}
</style>
</head>
<body>
<div id="limit">Your content goes here</div>
</body>
</html>
max-width and width -both- do not prevent the overflow if the text does not contain any spaces as in the example in the question.
div {
max-width : 300px;
word-wrap: break-word;
}
see this fiddle for a solution.
For this case, the div must have the style "word-wrap: break-word"
in order to work.
Or "overflow-wrap: break-word"
With max-width . Example : http://jsfiddle.net/YCV8H/
Related
I have a table which overflows its containing div. I want to show all the contents in the table, so the table has to go over 100% width to do so. The problem is the containing div does not reflect the size of its child. I have an example here, it's a responsive page, but the problem only happens at low widths - at high widths it is fine.
<html>
<head>
<title>Test</title>
<style type="text/css">
body, table, td {
color : #1D1F22;
}
#content {
padding: 10px;
/*overflow: hidden; */
background-color:red;
}
.border {
background-color: #4385DB;
color : #4385DB;
}
table
{
word-break: break-all
}
#media(min-width: 800px) {
#content {
width : 98%;
}
}
</style>
</head>
<body>
<div id="content">
<table cellpadding="7" cellspacing="1" class="border">
<tr>
<td>VeryLongBitOfTextVeryLongBitOfText</td>
<td>VeryLongBitOfTextVeryLongBitOfText</td>
<td><img src="dogs.jpg" width="400" height="100" alt="trev"></td>
<td>VeryLongBitOfTextVeryLongBitOfText</td>
</tr>
</table>
</div>
</body>
</html>
js fiddle here: http://jsfiddle.net/GrimRob/qg75arbs/
You should consider using table-layout: fixed and some width on the table or cells.
Relevant CSS:
table {
table-layout: fixed;
min-width: 960px;
}
table-layout: fixed is the other table layout algorithm where browser stick to what the author (you) want and don't try anymore to adapt dimensions to the content. That works if you've some indication of width wanted, like a min-width: http://jsfiddle.net/qg75arbs/1/
A simple min-width on table without table-layout: fixed also works, depends on your requirement.
Removing table { word-break: break-all; } also works, seems strange to allow this while trying to have large cells.
Add this to your #content css if you want the table to push out the containing div.
display: table-cell;
<html>
<head>
<title>Test</title>
<style type="text/css">
body, table, td {
color : #1D1F22;
}
#content {
padding: 10px;
/*overflow: hidden; */
background-color:red;
}
.border {
background-color: #4385DB;
color : #4385DB;
}
table
{
word-break: break-all;
width:100%;
}
.img1 {
min-width:200px;
width:100%;
height:auto;
}
#media(min-width: 800px) {
#content {
width : 98%;
}
}
</style>
</head>
<body>
<div id="content">
<table cellpadding="7" cellspacing="1" class="border">
<tr>
<td>VeryLongBitOfTextVeryLongBitOfText</td>
<td>VeryLongBitOfTextVeryLongBitOfText</td>
<td><img src="dogs.jpg" class="img1" alt="trev"></td>
<td>VeryLongBitOfTextVeryLongBitOfText</td>
</tr>
</table>
</div>
</body>
</html>
I think the problem here is that the table will only shrink down to as small as the content (most of the time) and in this case you will note that each column has got to it's smallest size (1 character width), with a static width image.
In essence, the table element is not really responsive as much as you want and becomes static at a smaller size. You can scale the image or hide columns below a certain width but if you do use a table element it will always only shrink down to a certain size.
Sorry to have to ask this since there are many CSS 100% height questions here (which I've read).
I'm to achieve a simple layout using DIVs instead of a TABLE. The first 3 rows are fixed height, the 4th row should expand and the fifth row should be a fixed size (at the bottom).
This is strait forward with a table, how can I do this with DIVs?
Here's the TABLE version:
<html>
<head>
</head>
<body>
<table width="100%" height="100%" border="1">
<tr height="20px">
<td>
fixed height 20
</td>
</tr>
<tr height="50px">
<td>
fixed height 50
</td>
</tr>
<tr height="100px">
<td>
fixed height 100
</td>
</tr>
<tr>
<td>
auto expanding height
</td>
</tr>
<tr height="50px">
<td>
fixed height 50
</td>
</tr>
</table>
</body>
</html>
Here's my best attempt so far which doesn't work.
<html>
<head>
</head>
<body>
<div style="width: 100%; height: 100%; border-width: 2px; border-style: solid;">
<div style="height: 20px; border-width: 2px; border-style: solid">
fixed height 20
</div>
<div style="height: 50px; border-width: 2px; border-style: solid">
fixed height 50
</div>
<div style="height: 100px; border-width: 2px; border-style: solid">
fixed height 100
</div>
<div style="border-width: 2px; border-style: solid;">
Auto expanding?
</div>
<div style="height: 50px; border-width: 2px; border-style: solid">
fixed height 50
</div>
</div>
</body>
</html>
Divs stack up automatically so all you have to do is hand them a height and you should be all set. Try this:
HTML
<div class="container">
<div class="twenty">
fixed height 20
</div>
<div class="fifty">
fixed height 50
</div>
<div class="hundred">
fixed height 100
</div>
<div class="auto">
<div class="content">
....
</div>
</div>
<div class="fifty" style="border-bottom:none; border-top:1px solid">
fixed height 50
</div>
</div>
CSS
html,body {
height:100%;
margin:0;
padding:0;
overflow:hidden;
}
.container {
width:100%;
height:100%;
}
.twenty, .fifty, .hundred, .auto {
border-bottom:1px solid black;
}
.twenty {
height:20px;
}
.fifty {
height:50px;
}
.hundred {
height:100px;
}
.auto {
height:100%;
overflow:hidden;
-webkit-box-sizing:border-box;
-moz-box-sizing:border-box;
-ms-box-sizing:border-box;
box-sizing:border-box;
margin:-120px 0;
padding:120px 0;
}
.content {
float:left;
overflow:auto;
height:100%;
}
.content{
width:100%;
}
EDIT Updated answer for future reference. Now the container completely fills the width and height of the document and just scrolls the scrollable portion of the page while keeping the sections that OP wanted available.
Full view: http://jsfiddle.net/8abeU/show/
Fiddle: http://jsfiddle.net/8abeU
You need to set the parent's position attribute to absolute and set the auto div's height to 100%. You can see it here. Also remember to include a doctype declaration at the top of your HTML, that'll help make it render more consistently across browsers.
Note:
This won't cause the container to fill the entire window vertically but if you don't have to put a border on it, it will look as if it does.
The quick answer is replace your table and tr elements with DIVs. Then set the first three rows with a css class="fixed-height-(whatever size)" Let the forth div expand as needed and the last row have a css class="fixed-height-(whatever size). You can use the same class where the heights are the same, assuming all the other styling is the same.
I've been trying to align an image to the center of the table td. It worked with setting margin-left to a specific value but it also increased the size of td too and that isn't exactly what I wanted
Is there any efficient ways of doing this? I used percentages for the height and witdh of the table.
<td align="center">
or via css, which is the preferred method any more...
<td style="text-align: center;">
Simple way to do it for html5 in css:
td img{
display: block;
margin-left: auto;
margin-right: auto;
}
Worked for me perfectly.
Center a div inside td using margin, the trick is to make the div width the same as the image width.
<td>
<div style="margin: 0 auto; width: 130px">
<img src="me.jpg" alt="me" style="width: 130px" />
</div>
</td>
This fixed issues for me:
<style>
.super-centered {
position:absolute;
width:100%;
height:100%;
text-align:center;
vertical-align:middle;
z-index: 9999;
}
</style>
<table class="super-centered"><tr><td style="width:100%;height:100%;" align="center" valign="middle" >
<img alt="Loading ..." src="/ALHTheme/themes/html/ALHTheme/images/loading.gif">
</td></tr></table>
Set a fixed with of your image in your css and add an auto-margin/padding on the image to...
div.image img {
width: 100px;
margin: auto;
}
Or set the text-align to center...
td {
text-align: center;
}
<table style="width:100%;">
<tbody ><tr><td align="center">
<img src="axe.JPG" />
</td>
</tr>
</tbody>
</table>
or
td
{
text-align:center;
}
in the CSS file
td image
{
display: block;
margin-left: auto;
margin-right: auto;
}
Another option is the use <th> instead of <td>. <th> defaults to center; <td> defaults to left.
As per my analysis and search on the internet also, I could not found a way to centre the image vertically centred using <div> it was possible only using <table> because table provides the following property:
valign="middle"
I'm learning CSS and finding that it's not always so intuitive (welcome to webdev, I guess). :)
In an attempt to make a simple, static progress bar, I use the HTML file below:
<html>
<head></head>
<body>
<table border='1' cellspacing='0'>
<tr>
<td>Sample Cell</td>
<td>
<!-- This is meant to be a progress bar -->
<div style="background-color: #0a0; width: 20%;">
<div style="text-align: center; width: 300px;">
Text Here!
</div>
</div>
</td>
</tr>
</table>
</body>
</html>
and I get this:
which is good, except for the fact that the width of the second column is fixed. But if I go ahead and change width: 300px to width: 100%, the text instead goes into the green box, rather than the whole table cell.
How can I "fill" the table cell with the text, without imposing a specific length restriction?
By placing your text div inside (as a child of) your colored div, you're telling HTML that you want the text to appear inside the colored div. So a width of 100% on the inner div means whatever the width of its parent div is, which you have set to 20%.
EDIT: added code
*EDIT: updated code*
<html>
<head>
<style>
#bar{
width: 100%;
position: relative;
}
#progress{
background-color: #0a0;
width: 20%;
position: absolute;
z-index: 0;
}
#progress_text{
text-align: center;
width: 100%;
position: relative;
z-index:1;
}
.progress_cell{
}
</style>
</head>
<body>
<table border='1' cellspacing='0'>
<tr>
<td>Sample Cell</td>
<td class="progress_cell">
<div id="bar">
<!-- This is meant to be a progress bar -->
<div id="progress">
</div>
<div id="progress_text">
Text Here! Text Here! But it's really long, and it's going to overflow ...
</div>
</div>
</td>
</tr>
</table>
</body>
</html>
here's your intro to html / css. thank me when you get my bill ;). first ... tables are for tabular data. not layout second ...
#wrapper {
position:absolute;
top:10px;
left:50%;
width:900px;
height:500px;
margin:0px auto 0px -450px;
padding:0px;
background-color:#369;
}
#box_1 {
width:100%;
height:100px;
margin:0px auto;
padding:0px;
background-color:red;
}
and here's the html ...
<html>
<head>
</head>
<body>
<div id="wrapper">
<div id="box_1">
<p>stuff</p>
</div>
</div>
</body>
</html>
hope this helps get you started
If you set width to %,it will take the width of their parent element.In your case.the div takes the width of the parent element i.e td
Here's a solution (I think?)
http://jsfiddle.net/tT2HR/
I am trying to build a html table but I want to force all rows to have the same height (no matter how much content is in the cells). If a cell overruns the space, I want it to just cut off the text and hide the rest.
Is this possible using CSS, etc?
IE only
#fixedheight {
table-layout: fixed;
}
#fixedheight td {
height: 20px;
overflow: hidden;
width: 25%;
}
<table id="fixedheight">
<tbody>
<tr>
<td>content</td>
<td>lots of content that should spend way more time wrapping down than it should if I were just to have a short bit of stuff, that would be invaded by zombies and the such</td>
<td>more content</td>
<td>small content</td>
<td>enough already</td>
</tr>
</tbody>
</table>
Universal solution
#fixedheight {
table-layout: fixed;
}
#fixedheight td {
width: 25%;
}
#fixedheight td div {
height: 20px;
overflow: hidden;
}
<table id="fixedheight">
<tbody>
<tr>
<td>
<div>content</div>
</td>
<td>
<div>lots of content that should spend way more time wrapping down than it should if I were just to have a short bit of stuff, that would be invaded by zombies and the such</div>
</td>
<td>
<div>more content</div>
</td>
<td>
<div>small content</div>
</td>
<td>
<div>enough already</div>
</td>
</tr>
</tbody>
<table>
Set the CSS height property to what you want the cell heights to be, and use overflow: hidden (see CSS overflow) to prevent contents from expanding the cells.
Give the table a class:
<table class="myTable">...</table>
And in the CSS, try the following:
table.myTable td {
height: 20px;
overflow: hidden;
}
The CSS Styles you will want to set are:
display:block, min-height, and max-height.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
<style>
html{font-size:16px;}
table{}
table tr{
display:block;
border-bottom:solid green 1px;
height:.8em;
min-height:.8em;
max-height:.8em;
background-color:#E300E3;
overflow:hidden;
}
</style>
</head>
<body>
<table id="MyTable">
<tr><td>16px Font-Size</td><td>Column2</td></tr>
</table>
</body>
</html>