The image basically shows what is happening. I have a wrapper of 1270px. Inside that wrapper (indicated by the vert line on the right) I have 4 divs and one table. The table contents is pushing past the page wrapper. THe page wrapper does not have a float as it is only to center the content on the page.
I have tried the following but nothing works:
border: none;
padding: 0px;
border-collapse: collapse;
overflow: hidden;
table-layout: fixed;
What is causing this? This is also allowing all the other content from the other 4 divs to push past the page wrapper as well.
EDIT:
<div id="wrap-page">
<div id="wrap-content">
<table id="content">
<tbody>
<tr>
<td id="featured">
<h1>h1</h1>
<p>Lorem ipsum</p>
<h2>h2</h2>
<p>Lorem ipsum</p>
</td>
<td class="sidebar">
<p>Lorem ipsum</p>
</td>
</tr>
</tbody>
</table>
</div>
</div>
html, body{
width:100%;
margin:0;
padding:0;
background:#ccc;
font-size:100%;
line-height:1;
font-family:Arial;
}
#wrap-page{
float:left;
margin:auto;
width:1270px;
}
#wrap-content{
margin:0 5px;
border:1px solid;
}
#content{
position:relative;
float:left;
border-collapse:collapse;
width:1270px;
margin:7px 0;
}
#featured{
width:822px;
}
.sidebar{
width:193px;
vertical-align:top;
}
Your inner divs widths and table is greater than your outer wrapper of 1270px.
It looks like you are just trying to add a border to your text...
Please try this alternative (without tables):
http://jsfiddle.net/UXKTA/9/
.test
{
padding: 5px;
border: 1px solid black;
width: 200px;
}
Related
I have studied few days about how to use div to create table cells and merge cells, Actually I can did this with TABLE, but can't do the same screen result in DIV, hope someone can help me drive me the better method or fix the code.
Actually, I want to make all the cells in same Width and Height (Except the Merged Area) in the full screen mode, but the problem was the merged cell at center. I tried many methods cannot make it working like the TABLE style.
Here is the result I want, but make with table:
<style>
html, body{
width:100%;
height:100%;
margin:0;
padding:0;
}
table {
border-width: 1px 1px 0px 0px;
border-spacing:0;
margin:0;
padding:0;
width: 100%;
height: 100%;
}
td {
border-width: 0px 0px 1px 1px;
}
table, td {
border-style: solid;
border-color: purple;
}
.w25 {
width:25%;
height:25%;
}
.w50 {
width:50%;
height:50%;
}
.w100 {
width:100%;
height:100%;
}
</style>
<table class='w100'>
<tr>
<td class='w25'>D</td>
<td class='w25'>E</td>
<td class='w25'>F</td>
<td class='w25'>G</td>
</tr>
<tr>
<td class='w25'>C</td>
<td class='w50' colspan=2 rowspan=2 >MERGED AREA</td>
<td class='w25'>H</td>
</tr>
<tr>
<td class='w25'>B</td>
<td class='w25'>I</td>
</tr>
<tr>
<td class='w25'>A</td>
<td class='w25'>L</td>
<td class='w25'>K</td>
<td class='w25'>J</td>
</tr>
</table>
And this is the code I currently making for DIV version, but no success to balanced all the the width and height in full screen.
<style>
html, body{
width:100%;
height:100%;
margin:0;
padding:0;
}
.table {
border-width: 1px 1px 0px 0px;
}
.intable {
border-width: 0px 1px 0px 0px;
}
.table, .intable {
display:table;
width:100%;
height:100%;
}
.cell {
display:table-cell;
}
.row {
display:table-row;
}
.cell {
border-width: 0px 0px 1px 1px;
width:25%;
}
.table, .intable, .cell {
border-style: solid;
border-color: purple;
}
</style>
<div class='table'>
<div class='row'>
<div class='cell' style="max-width:25%;">D</div>
<div class='intable'>
<div class='cell'>E</div>
<div class='cell'>F</div>
</div>
<div class='cell'>G</div>
</div>
<div class='row'>
<div class='intable'>
<div class='row'>
<div class='cell'>C</div>
</div>
<div class='row'>
<div class='cell'>B</div>
</div>
</div>
<div class='cell'>Merged Area</div>
<div class='intable'>
<div class='row'>
<div class='cell'>H</div>
</div>
<div class='row'>
<div class='cell'>I</div>
</div>
</div>
</div>
<div class='row'>
<div class='cell'>A</div>
<div class='intable'>
<div class='cell'>L</div>
<div class='cell'>K</div>
</div>
<div class='cell'>J</div>
</div>
</div>
Table Version JSFiddle
DIV Version JSFiddle
Wish somebody can fix the code!
Try adding another class to your merged column, like so:
<div class='cell merged'>Merged Area</div>
and change the css of the merged area, like so:
.merged{
width:50%;
height:50%;
}
The reason I did this is because you had the same class on your merged area, but you wanted the size to take up double the space of a normal cell. So all I did was add an additional class changing the width and height of the merged area to get the desired result.
Here is an updated Fiddle:
https://jsfiddle.net/6hx2uooz/4/
How to turn this:
Into this:
In this fiddle:
https://jsfiddle.net/d3ckh9qd/2/
table{
width:100%;
border-collapse:collapse;
}
td{
border:1px solid red;
padding:10px;
}
.td-left{
width:100%;
}
.div-parent{
width:800px;
border:5px solid rgba(0,255,255,0.7);
}
.div-right{
white-space:nowrap;
background:rgba(0,0,255,0.1);
}
.pre-scrollable{
background:rgba(0,255,0,0.3);
padding:10px;
white-space:pre;
overflow:auto;
width:100%;
box-sizing:border-box;
}
<div class="div-parent">
The table below should not exceed parent container:
<table>
<tr>
<td class="td-left">
<strong>This column should fill the remaining width, respecting the dynamic width of the right column</strong><br>
<pre class="pre-scrollable">This should match width of the parent container and it's content should scroll horizontally.</pre>
</td>
<td class="td-right">
<strong>This column should autosize to it's contents</strong><br><br>
<div class="div-right">
Dynamically generated content goes here
</div>
<br>
<div class="div-right">
This content has different width each time it loads
</div>
</td>
</tr>
</table>
</div>
set a fixed width by px for the right one and a 100% width for the left one and a overflow-x
Make sure to set your table-layout to fixed and then just have your td's set to the percentage you want ( in my case its 60/40 ).
https://jsfiddle.net/d3ckh9qd/6/
CSS
table{
width:100%;
border-collapse:collapse;
table-layout: fixed;
}
td{
border:1px solid red;
padding:10px;
}
.td-left{
width:60%;
}
.td-right{
width:40%;
}
.div-parent{
width:100%;
border:5px solid rgba(0,255,255,0.7);
}
.pre-scrollable{
background:rgba(0,255,0,0.3);
padding:10px;
white-space:pre;
overflow:auto;
width:100%;
box-sizing:border-box;
}
.div-right {
word-wrap: break-word;
}
I have a table and in one of the columns I have some graphics. What I need is a vertical line 20px from left on top of all what is in the td element.
I tried something like this but the result is not good.
<td>
<div>
<!-- my vertical line -->
<div style="width:20px; height:30px; z-index:1011; border-right: thin solid red;">
</div>
<!-- other content under the vertical line in td -->
<!-- here width can be more than 20px -->
<div style="width:5px; height:10px; z-index:1001; background-color:gray;"> </div>
</div>
</td>
I have also tried with position: relative; for "main div" and absolute for other 2 but not a good result.
With this in place is perfect, I just need to add a vertical line on top of this 20 px from left
<td>
<div>
<div style="width:5px; height:10px; z-index:1011; background-color:gray;"> </div>
</div>
</td>
red line
--------|----------td-----
|
--------|-- some line (one div in may case)
|
--------|---------</td>---
--------|---------<td>----
|
--- | other line
|
------------------</td>---
Fiddle wrong result ("not good")
this is what is expected
There are numerous pitfalls with a table used for creating a chart.
First, the table's cellspacing and the cells vertical padding must be set to zero to make the red line all the way from top to bottom. Second, the height should probably be set to some value, so the inner div of the last cells in a row can be set to 100% height in order to make the red line go from top to bottom within a cell (it also needs to be position absolutely due to possible overlap). Third, to make the horizontal lines appear in the middle of the cells, all cells should have a fixed line-height and the horizontal lines should be displayed as inline-block with vertical-align: middle.
table tr td {
height: 30px;
padding: 0 10px;
line-height: 30px;
}
.horizontal-line{
height:10px;
z-index:1001;
background-color:gray;
line-height: 20px;
display: inline-block;
vertical-align: middle;
border-radius: 5px;
}
.vertical-line{
width:0px;
z-index:10011;
border-right: thin solid red;
position: absolute;
height: 100%;
left: 20px;
}
.width-5{
width:5px;
}
.width-30{
width:30px;
}
td, td > div {
height: 100%;
position: relative;
line-height: 30px;
}
<table cellspacing="0">
<tr>
<td>1</td>
<td>11</td>
<td>
<div>
<div class="vertical-line" ></div>
<div class="horizontal-line width-5"></div>
</div>
</td>
</tr>
<tr>
<td>2</td>
<td>22</td>
<td>
<div>
<div class="vertical-line" ></div>
<div class="horizontal-line width-30"></div>
</div>
</td>
</tr>
</table>
Note: I also added and altered some other minor stuff like border-radius to reflect your screenshot a bit. If you want to play around, here is the fiddle.
I just made minor changes to your stylesheets and its working.
.horizontal-line{
height:10px;
z-index:1001;
background-color:gray;
margin-left: 5px;//addes this
}
.vertical-line{
height:30px;
width:20px;
z-index:10011;
border-right: thin solid red;
position: absolute;//and this
}
.width-5{
width:5px;
}
.width-30{
width:30px;
}
Let me know if you are satisfied with this answer. :)
Try this :-
<div style="width:5px; height:10px; z-index:1001; background-color:gray;padding-left: 20px"> </div>
or
<div style="width:5px; height:10px; z-index:1001; background-color:gray;margin-left: 20px"> </div>
Hope this'll help.
I'm having a table with a td having two div's. I want both of that div to be in line, but the 2nd div gets wrapped as no of columns increases. I don't want to set the fixed width for each column though.
HTML td structure:
<td class="tableHead">
<div class="tableHeadTxt">Lorem Ipsum</div>
<div class="toggler togglerImgCollapse"> </div>
</td>
div.tableHeadTxt should get a white-space: nowrap; CSS. This will make it not wrap the text, so the second div is forced to.
td.tableHead div.tableHeadTxt, td.tableHead div.toggler should get a float: left; CSS. This ensures it will render inline.
You need a third div following the other two, which has a clear: both; height: 0; width: 100%; CSS attached to it. This ensures that the td retains proper height despite having only inline elements.
Hey now you can do this as like this
Used white-space:nowrap; in your css fine and give to parent div this properties
and child div define display:inline-block; in your css file
Css
.tableHead{
border:solid 1px red;
white-space:nowrap;
}
td.tableHead > div{
border:solid 1px green;
display:inline-block;
}
HTML
<table>
<tr>
<td class="tableHead">
<div class="tableHeadTxt">Lorem Ipsum</div>
<div class="toggler togglerImgCollapse">Lorem Ipsum </div>
</td>
</tr></table>
Live demo http://jsfiddle.net/2965K/
use float in your divs
<table>
<tr>
<td class="tableHead">
<div class="tableHeadTxt" style="float:left">Lorem Ipsum</div>
<div class="toggler togglerImgCollapse" style="float:left">pbaris</div>
</td>
</tr>
</table>
http://jsfiddle.net/gkzdG/
I am using these lines:
<div style="background: transparent url("../Images/20_20.png") no-repeat center; height: 20px; width:80px; ">
<span style=" background: transparent url("../Images/ObjectType/10_10.png") no-repeat center; height: 20px; width:80px; height: 20px; width:20px; margin-left:40px; "> </span>
</div>
Hope it can help you.
Here is an example - http://jsfiddle.net/Xb4gV/
My problem is that I want to have the 2 tables to the left centered as the 3rd table on the right will increase in size(grid view). I would like them centered. How can I do this?
Not entirely sure on what your trying to accomplish, but you can give this a try. Going off of what you said you want all tables to be left aligned and centered in the middle of the page but you want the third table to be able to be revisable with no size restrictions, correct? If so this will work:
HTML:
<div class="wrapper">
<div class="center">
<table id="t1">
<tr>
<td>
text
</td>
</tr>
</table>
<table id="t2">
<tr>
<td>
text
</td>
</tr>
</table>
<table id="t3">
<tr>
<td>
text</br>
text</br>
text</br>
Resizable and centered
</td>
</tr>
</table>
CSS:
.wrapper{
clear: left;
float: left;
left: 50%;
margin: 0;
padding: 0;
position: relative;
text-align: left;
}
.center{
float: left;
margin: 0;
padding: 0;
position: relative;
right: 50%;
}
#t1{
border: 1px solid black;
float:left;
}
#t2{
border: 1px solid black;
float:left;
}
#t3{
border: 1px solid black;
float:left;
}
You can add text to any of the tables cells and it will always re-size and center itself.
Hi you just add width of your parent div as like this
#wrapper{
vertical-align:top;
margin: 0 auto;
overflow:hidden;
width:200px;
border:solid 10px red;
}
Live demo is here http://jsfiddle.net/Xb4gV/57/