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.
Related
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 know there are similar questions, but I was not able to find answer to my question.
I have two divs next to each other, left is fixed width of 220px and right should take up the rest of the space. The trick is that the right one contains a table that should be fluid too and always stay as wide as it can.
I tried it even without right div, so there was div on left and table on right. If I don't give the table set width of 100% its fine, but then table stays at about 150px, and does not occupy all free space (as table changes size based on content).
Here is the JSFiddle: http://jsfiddle.net/4tchm0r9/6/
.wrapper {
width: 100%;
max-width: 800px;
}
.left {
border: 1px solid green;
float: left;
width: 220px;
}
.right {
width: 100%;
border: 1px solid red;
}
<div class="wrapper">
<div class="left">
<div>
Some random irrelevant div that has fixed width of 220px no matter what and contians two divs.
</div>
<div>
Ladidaaaa? Maybe? Lolz.
</div>
</div>
<table class="right">
<tr>
<td>
Table that should occupy the rest of the space and fluidly resize!
</td>
</tr>
<tr>
<td>
Table that should occupy the rest of the space and fluidly resize!
</td>
</tr>
</table>
</div>
Thanks for any help. I Googled, but haven't found nothing.
Ps.: I can not set both of them to % or use table for it, as depending on device size, I will be swapping their positions (the two divs on left will go next to each other and the one on right will go below them).
I also can not use calc function for backwards compatibility, no JS too. Pure HTML and CSS required.
Did you tried use table properties?
The .wrapper can be the table, then their children will be the cells. Look:
.wrapper{
width: 100%;
display: table;
}
.left{
border: 1px solid green;
width: 220px;
display: table-cell;
}
.right{
border: 1px solid red;
display: table-cell;
}
<div class="wrapper">
<div class="left">
<div>
Some random irrelevant div that has fixed width of 220px no matter what and contians two divs.
</div>
<div>
Ladidaaaa? Maybe? Lolz.
</div>
</div>
<table class="right">
<tr>
<td>
Table that should occupy the rest of the space and fluidly resize!
</td>
</tr>
<tr>
<td>
Table that should occupy the rest of the space and fluidly resize!
</td>
</tr>
</table>
</div>
Fiddle: http://jsfiddle.net/83295cvs/
Add both of those divs to a 100% parent container, with position set to relative. Then, the fixed div with width of 200px should be absolutely positioned on the top left, and add padding-left to the right div equal to the left div's width.
http://jsfiddle.net/z12p0b5v/
HTML:
<div class="container">
<div class="left">
<div class="content"></div>
</div>
<div class="right">
<div class="content"></div>
</div>
</div>
CSS:
.container {
width: 100%;
position: relative;
}
.left {
position: absolute;
left: 0;
top: 0;
}
.left .content {
width: 200px;
height: 200px;
background-color: red;
}
.right {
padding-left: 200px;
}
.right .content {
background-color: blue;
width: auto;
height: 300px;
}
Just put table with width:100% into a div with display:flex
.wrapper{
width: 100%;
max-width: 800px;
}
.left{
border: 1px solid green;
float: left;
width: 200px;
}
.right{
border: 1px solid red;
width: 100%;
}
<div class="wrapper">
<div class="left">
<div>
Some random irrelevant div that has fixed width of 220px no matter what and contians two divs.
</div>
<div>
Ladidaaaa? Maybe? Lolz.
</div>
</div>
<div style="display: flex;">
<table class="right">
<tr><td>
Table that should occupy the rest of the space and fluidly resize!
</td></tr>
<tr><td>
Table that should occupy the rest of the space and fluidly resize!
</td></tr>
</table>
</div>
</div>
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.
This question already has answers here:
CSS table right margin in scrollable div
(4 answers)
Closed 6 years ago.
I have a div enclosing a table.
Div has a padding of 20px.
If the table size is more than the div then scroll bar should be shown on the div.
Issue:
Padding is working fine when scroll bar is not present.
But when scroll bar is present then the scroll bar totally occupies the right side padding.
But some how the bottom padding is still applied event with scroll bar.
Question:
How to give 20px padding to div and make sure its content do the padding calculation from scroll bar if present else from border of div?
Note: No styles can be specified at table element. Since this table doesn't aware of the div wrapper.
Sample code and output image attached.
<html>
<head>
<style type="text/css">
.parentDiv {
border: 1px solid red;
height: 50px;
width: 200px;
overflow: auto;
padding: 20px;
}
.childDiv {
border: 1px solid blue;
}
</style>
</head>
<body>
<div class="parentDiv">
<table class="childDiv" width="100%" height="100%">
<tr>
<td></td>
</tr>
</table>
</div>
<br/>
<div class="parentDiv">
<table class="childDiv" width="100%" height="100%">
<tr>
<td><pre>Sample text <input type="textbox"/></pre><br/>Sample second line</td>
</tr>
</table>
</div>
</body>
</html>
Output:
take the padding out of the parentDiv class, wrap the table in a new div - you'll still get scroll bars in the parentDiv, but your container div should compress the table to accomodate them.
try this:
<div class="parentDiv">
<div class="childDiv">
<table>
<tr>
<td></td>
</tr>
</table>
</div>
</div>
<style type="text/css">
.parentDiv {
border: 1px solid red;
width: 200px;
overflow:auto;
}
.childDiv {
border: 1px solid blue;
padding: 20px;
width:100%;
height:100%;
}
</style>
You'll notice that as you increase the height of the table, the lower border drops off the bottom of the div - you can scroll down to see it.
You could move the scrolling in to the new div:
<style type="text/css">
.parentDiv {
border: 1px solid red;
width: 200px;
padding: 20px;
}
.childDiv {
border: 1px solid blue;
width:100%;
overflow-y:auto;
height:50px;
}
</style>
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/