Is it possible to have a vertical float working by analogy with the horizontal one? In the Html below I'd like the green button to be as it is and the yellow to float to the bottom beyond gray shape edge.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<body>
<table style="margin: 250px; width:50px; height: 100px; background-color: #ccc; table-layout: fixed;">
<tr>
<td style="vertical-align:top;">
<div style="margin-top:-20px; width:50px; height: 40px; background-color: Green;">Top</div>
<div style="margin-bottom:-20px; width:50px; height: 40px; background-color: Yellow;">Bottom</div>
</td>
</tr>
</table>
</body>
</html>
Update 1 - here's a bit closer to realm picture of what I'm trying to achieve. I'm looking for a vertical uniform panel, i.e. the distance between its children should be the same. I managed to do it with the horizontal layout, but got stuck to the vertical implementation.
Html:
<html xmlns="http://www.w3.org/1999/xhtml">
<body>
<table style="margin: 250px; width:70px; height: 400px; background-color: #ccc; table-layout: fixed;">
<tr>
<td style="vertical-align: middle; background-color: Gray; padding: 5px;">
<!-- <div style="margin-top:-20px; width:50px; height: 40px; background-color: Green;">1</div>-->
<div style="margin: -20px auto auto auto; width:50px; height: 40px; background-color: white;">Top!!!</div>
<div style="margin: auto auto -20px auto; width:50px; height: 40px; background-color: white;">2</div>
</td>
</tr>
<tr>
<td style="vertical-align: middle; background-color: Gray; padding: 5px;">
<div style="margin: auto auto -20px auto; width:50px; height: 40px; background-color: white;">3</div>
</td>
</tr>
<tr>
<td style="vertical-align: middle; background-color: Gray; padding: 5px;">
<div style="margin: auto auto -20px auto; width:50px; height: 40px; background-color: white;">4</div>
</td>
</tr>
<tr>
<td style="vertical-align: middle; background-color: Gray; padding: 5px;">
<div style="margin: auto auto -20px auto; width:50px; height: 40px; background-color: white;">5</div>
</td>
</tr>
</table>
</body>
</html>
If they don't always have to be in top-down 1st-to-last order did you try simple inline-blocks? That should allow them to fill out horizontally and then wrap vertically when not enough space.
.columns .icon { display: inline-block; width: 80px; height: 80px; background-color: lightblue; margin: 10px }
http://jsfiddle.net/JT3La/
using relative position and and set the bottom as the negative of the box height
http://jsfiddle.net/e9uet/
Related
I'm working on modifying a legacy application where I'm allowed to do only css changes but no html and javascript changes. There are some styling issues which I'm trying to resolve thru CSS and one of them is that the elements are getting hidden behind each other.
I tried setting the position attributes and the z-index attributes at different levels for the elements, but none of them seem to work. Here is a scaled down version of the layout of the application
Currently the yellow box is partially hidden under the pink box. The expectation here is that the yellow box is shown completely, overlapping on both the aqua and pink boxes. Any help to resolve this by modifying only the CSS and not touching anything inside the table element would greatly be helpful
.mainTable {
border: black 1px solid;
}
.aquaBox {
border: green 1px solid;
background: aqua;
overflow: visible;
}
.yellowBox {
border: black 1px solid;
background: yellow;
}
.pinkBox {
border: red 1px solid;
position: relative;
background: pink
}
<!DOCTYPE html>
<html>
<body>
<table class='mainTable'>
<tr>
<td rowspan='2' class='aquaBox' style=' width:100px; height: 100px;'>
abcdefg hijklmnop qrstuvw xyz
<div class='yellowBox' style='width: 40px; top: 25px; height: 40px; margin-top:25px; margin-left:60px; position:absolute; '>
</div>
</td>
</tr>
<tr>
<td class='pinkBox' style='width: 100%; height: 200px;'>
</td>
</tr>
</table>
</body>
</html>
You can add z-index: 1 to make this work, which promotes the element's stacking order and allows it to show on top of elements placed outside the stacking order.
.yellowBox {
…
z-index: 1;
}
Demo
.mainTable {
border: black 1px solid;
}
.aquaBox {
border: green 1px solid;
background: aqua;
overflow: visible;
}
.yellowBox {
border: black 1px solid;
background: yellow;
z-index: 1;
}
.pinkBox {
border: red 1px solid;
position: relative;
background: pink
}
<table class='mainTable'>
<tr>
<td rowspan='2' class='aquaBox' style=' width:100px; height: 100px;'>
abcdefg hijklmnop qrstuvw xyz
<div class='yellowBox' style='width: 40px; top: 25px; height: 40px; margin-top:25px; margin-left:60px; position:absolute; '>
</div>
</td>
</tr>
<tr>
<td class='pinkBox' style='width: 100%; height: 200px;'>
</td>
</tr>
</table>
By setting the z-index: 1; on your .yellowBox class, I was able to get the desired layout.
<!DOCTYPE html>
<html>
<head>
<style>
.mainTable {
border: black 1px solid;
}
.aquaBox {
border: green 1px solid;
background: aqua;
overflow: visible;
}
.yellowBox {
border: black 1px solid;
background: yellow;
z-index: 1;
}
.pinkBox {
border: red 1px solid;
position: relative;
background: pink
}
</style>
</head>
<body>
<table class='mainTable'>
<tr>
<td rowspan='2' class='aquaBox' style=' width:100px; height: 100px;'>
abcdefg hijklmnop qrstuvw xyz
<div class='yellowBox' style='width: 40px; top: 25px; height: 40px; margin-top:25px; margin-left:60px; position:absolute; '>
</div>
</td>
</tr>
<tr>
<td class='pinkBox' style='width: 100%; height: 200px;'>
</td>
</tr>
</table>
</body>
</html>
```````````````````````````` Currently the yellow box is partially hidden under the pink box. The expectation here is that the yellow box is shown completely, overlapping on both the aqua and pink boxes. Any help to resolve this by modifying only the
CSS and not touching anything inside the table element would greatly be helpful
I have a table inside of div and I am trying to set the width so that the columns on the output fill the whole div with id left.
Here is all the code and along with jsfiddle : https://jsfiddle.net/qsogubjd/
#sortPanel {
width: 565px;
height: 165px;
margin: 10px 15px;
display: block;
border: 0px solid #fff;
}
#sortPanel td {
height: 165px;
width: 11px;
overflow: hidden;
display: inline-block;
white-space: nowrap;
padding: 0;
position: relative;
}
.cc {
display: block;
width: 5px;
position: absolute;
bottom: 0px;
background-color: #999;
border-top: 4px solid #fff;
margin: 0px;
margin-top: 4px;
}
.ccH1 {
display: block;
width: 5px;
background-color: #F22613;
margin: 0px;
position: absolute;
bottom: 0px;
}
.ccH2 {
display: block;
width: 5px;
background-color: #F2B705;
margin: 0px;
position: absolute;
bottom: 0px;
}
#left {
width: 590px;
height: 190px;
margin: 10px;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
border-radius: 3px;
-webkit-box-shadow: 0 1px 3px #000;
-moz-box-shadow: 0 1px 3px #000;
border-top: 1px solid #555;
box-shadow: 0 1px 3px #000;
background: -webkit-linear-gradient(#444, #333);
background: -moz-linear-gradient(#444, #333);
background: -o-linear-gradient(#444, #333);
background: -ms-linear-gradient(#444, #333);
background: linear-gradient(#444, #333);
position: relative;
float: left;
}
<div id="left">
<table id="sortPanel">
<tr>
<td id="b0">
<div class="cc" style="height: 144px;"></div>
</td>
<td id="b1">
<div class="cc" style="height: 35px;"></div>
</td>
<td id="b2">
<div class="cc" style="height: 6px;"></div>
</td>
<td id="b3">
<div class="cc" style="height: 64px;"></div>
</td>
<td id="b4">
<div class="cc" style="height: 12px;"></div>
</td>
<td id="b5">
<div class="cc" style="height: 153px;"></div>
</td>
<td id="b6">
<div class="cc" style="height: 70px;"></div>
</td>
<td id="b7">
<div class="cc" style="height: 137px;"></div>
</td>
<td id="b8">
<div class="cc" style="height: 19px;"></div>
</td>
<td id="b9">
<div class="cc" style="height: 131px;"></div>
</td>
</tr>
</table>
</div>
So far I tried putting position: relative; on selectors, it didn't work. Then I tried display: block;, it didn't work either.
To make reading code easier:
The width attribute of td defines the seperation between the columns in the html output. Increasing the value of width will set columns further for each other, spreading them.
While width of div inside of td sets the width of column itself. Increasing this value will make colums thicker.
As far as I researched the solution should include %: width: someValue%.
How can I change the css code in order to spead the columns across the div with id "left" and make the whole table responsive?
The following caused the issue:
table#sortPanel has a display: block;
td.cc has a display: block;
table has a defined width (565px)
td has a defined width (5px)
td's naturally expand to occupy full width of the table without the need of any css.
When td's are given display: block, they loose this natural property.
Just remove these styles and td's will occupy full span of the table.
Give table a width: 100% and it'll occupy the full span of div#left.
Here is your code with modifications:
<div id="left">
<table id="sortPanel">
<tr>
<td id="b0">
<div class="cc" style="height: 144px;"></div>
</td>
<td id="b1">
<div class="cc" style="height: 35px;"></div>
</td>
<td id="b2">
<div class="cc" style="height: 6px;"></div>
</td>
<td id="b3">
<div class="cc" style="height: 64px;"></div>
</td>
<td id="b4">
<div class="cc" style="height: 12px;"></div>
</td>
<td id="b5">
<div class="cc" style="height: 153px;"></div>
</td>
<td id="b6">
<div class="cc" style="height: 70px;"></div>
</td>
<td id="b7">
<div class="cc" style="height: 137px;"></div>
</td>
<td id="b8">
<div class="cc" style="height: 19px;"></div>
</td>
<td id="b9">
<div class="cc" style="height: 131px;"></div>
</td>
</tr>
</table>
</div>
#sortPanel {
//width: 565px;
width: 100%;
height: 165px;
margin: 10px 0x;
//display: block;
display: table;
border: 0px solid #fff;
}
#sortPanel td {
height: 165px;
//width: 11px;
overflow: hidden;
//display: inline-block;
white-space: nowrap;
padding: 0;
position: relative;
vertical-align: bottom;
}
.cc {
display: block;
//width: 5px;
width: 100%;
//position: absolute;
bottom: 0px;
background-color: #999;
border-top: 4px solid #fff;
margin: 0px;
margin-top: 4px;
}
.ccH1 {
display: block;
width: 5px;
background-color: #F22613;
margin: 0px;
position: absolute;
bottom: 0px;
}
.ccH2 {
display: block;
width: 5px;
background-color: #F2B705;
margin: 0px;
position: absolute;
bottom: 0px;
}
#left {
width: 590px;
//height: 190px;
margin: 10px;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
border-radius: 3px;
-webkit-box-shadow: 0 1px 3px #000;
-moz-box-shadow: 0 1px 3px #000;
border-top: 1px solid #555;
box-shadow: 0 1px 3px #000;
background: -webkit-linear-gradient(#444, #333);
background: -moz-linear-gradient(#444, #333);
background: -o-linear-gradient(#444, #333);
background: -ms-linear-gradient(#444, #333);
background: linear-gradient(#444, #333);
position: relative;
float: left;
}
https://jsfiddle.net/cpr4ztvj/
You have to delete some of the unnecessary attribute value pairs specifically related to display and position, those are very important in css, be sure to read up on them. I added the changes in the comments of css code and also I will share fiddle link to check the responsiveness https://jsfiddle.net/nukjh6ea/, now you may add up td s as you want.
#sortPanelA, sortPanelB {
width: 100%;/* occupy the whole width of div left */
height: 165px;
margin: 10px 15px;
border: 0px solid #fff;
}
#sortPanelA td, sortPanelB td {
height: 165px;
overflow: hidden;
white-space: nowrap;
padding: 0;
position: relative;
}
.cc {
display: block;
width: 50%;/* the width of column, you may play around with it */
position: absolute;
bottom: 0px;
background-color: #999;
border-top: 4px solid #fff;
margin: 0px;
margin-top: 4px;
}
.ccH1 {
display: block;
width: 5px;
background-color: #F22613;
margin: 0px;
position: absolute;
bottom: 0px;
}
.ccH2 {
display: block;
width: 5px;
background-color: #F2B705;
margin: 0px;
position: absolute;
bottom: 0px;
}
#left {
width: 90%;/* take up the 90% of body */
height: 190px;
margin: 10px;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
border-radius: 3px;
-webkit-box-shadow: 0 1px 3px #000;
-moz-box-shadow: 0 1px 3px #000;
border-top: 1px solid #555;
box-shadow: 0 1px 3px #000;
background: -webkit-linear-gradient(#444, #333);
background: -moz-linear-gradient(#444, #333);
background: -o-linear-gradient(#444, #333);
background: -ms-linear-gradient(#444, #333);
background: linear-gradient(#444, #333);
position: relative;
float: left;
}
<div id="left">
<table id="sortPanelA">
<tr>
<td id="b0">
<div class="cc" style="height: 144px;"></div>
</td>
<td id="b1">
<div class="cc" style="height: 35px;"></div>
</td>
<td id="b2">
<div class="cc" style="height: 6px;"></div>
</td>
<td id="b3">
<div class="cc" style="height: 64px;"></div>
</td>
<td id="b4">
<div class="cc" style="height: 12px;"></div>
</td>
<td id="b5">
<div class="cc" style="height: 153px;"></div>
</td>
<td id="b6">
<div class="cc" style="height: 70px;"></div>
</td>
<td id="b7">
<div class="cc" style="height: 137px;"></div>
</td>
<td id="b8">
<div class="cc" style="height: 19px;"></div>
</td>
<td id="b9">
<div class="cc" style="height: 131px;"></div>
</td>
</tr>
</table>
</div>
Change .cc {width: 100%} and #sortPanelA td {width: 3.5rem}
EDIT
To make whole table responsive here are steps:
change div, table and tbody width to 100%
set table display: table
remove td width
set div.cc to 100%
set , not with css
Here is the code in fiddle: https://jsfiddle.net/meshin/uuL2f43g/
You're mixing and matching different block models without understanding what they do. A table block model is pretty responsive by default and by adding blocks and inline-blocks to things you're complicating matters.
Remove all the display: block and display: inline-block from your table elements. Then set the .cc div to 100% width of the table cell. Your table will then scale to whatever you need. If you want it 100% set the table to 100%.
See example:
https://jsfiddle.net/mede6n8j/
Steps to fix:
Remove display: block; from #sortPanelA, sortPanelB
Remove display: block and display:inline-block; from #sortPanelA td, sortPanelB td
Remove width: 11px; from #sortPanelA td, sortPanelB td
Change width: 5px; to width: 100% on .cc. This will make the divs scale to the table-cells
I would recommend you to first try making the table width 100% , It should work.
In case if it does not work then since you have 9 td's in a row try setting the td with to 11.11%. But if you have n number of td then it will not work.
Regards,
Vinit Patil.
After going through many solutions non of them could solve my problem.
I have a <td> which has a <table> in it. However, the text inside this inner table does not fit in. Text clips out. I tried various things like overflow:hidden, table-layout: fixed on the <table> and word-wrap:break-word on <td> and still it didn't solve the problem.
Here's my code:
<table id="table1">
<tr>
<td id="td1">
<img src="http://lorempixel.com/165/232" />
</td>
<td id="td2">Long text goes here</td>
<td id="td3" rowspan="7">
<table id="table2">
<tr>
<td>Long text goes here</td>
</tr>
</table>
</td>
</tr>
And here's the CSS:
#table1 {
width: 765px;
border: 1px solid red;
border-spacing: 0;
padding: 0;
}
#td1 {
width: 175px;
vertical-align: top;
}
#td2 {
vertical-align: top;
}
#td3 {
width: 180px;
vertical-align: top;
background-color: #F3F3F3;
}
#table2 {
width: 100%;
border: 1px solid blue;
border-spacing: 0;
padding: 8px;
}
The content inside the inner table clips out. Could anyone please provide a solution so that the inner table can have proper content in it without clipping.
JSFiddle
This can be achieved much more simply. Let's do this with display: table; and display: table-cell;. We can layout block elements with similar behaviour to a table, but much simpler and easier to maintain.
Read more on CSS display
Have a Fiddle!
CSS
.box {
border: solid 1px #CCC;
display: table;
padding: 10px;
}
.box div {
display: table-cell;
vertical-align: top;
margin: 10px;
padding: 10px;
}
.right {
border: solid 1px #F00;
}
HTML
<div class="box">
<div class="left">
<img src="http://placehold.it/200" />
</div>
<div class="center">Content</div>
<div class="right">Content</div>
</div>
I have an HTML page in which there is a table which populates data from a database table and I am trying to restrict the size of the table by placing it in a div like in the following
<div id="scrollablebody">
<table class="clientTable">
<thead>
<tr>
<th>Grade</th>
<th>Term</th>
<th colspan="3">Actions</th>
</tr>
</thead>
<!--ko foreach: products-->
<tr>
<td class="clientproductHeader" data-bind="text: $data">
</td>
<td class="clientproductHeader" colspan="13"></td>
</tr>
<tbody data-bind="foreach: ko.observableArray($root.datainput()).extendsdistinct('Product').index.Product()[$data]">
<tr data-bind="template: { name: $root.displayMode, data: $data }"></tr>
</tbody>
<!--/ko-->
</table>
</div>
CSS for div
#scrollablebody{height:500px;overflow-y:auto;width:100%;}
But for some reasons the text in tbody is occupying all the space like in the following image
As you can see in the above picture the row with c5+ is unusually occupying lot of space
CSS for the Table
.clientTable {
max-width: 100%;
background-color: grey;
height:75%;
border-collapse: collapse;
border-spacing: 0;
margin-bottom: 20px;
width: 98%;
margin-left:0;
margin-right:100px;
float: left;
overflow:scroll;
}
table.clientTable thead tr .header {
background-image: url(images/bg.png);
background-repeat: no-repeat;
background-position: center right;
cursor: pointer;
}
table.clientTable td {
padding: 1px;
line-height: 10px;
text-align: center;
/*background-color:#3C78B5;*/
vertical-align: auto;
border: 1px solid #0088cc;
width: 120px;
}
.clientTable th {
padding: initial;
line-height: normal;
text-align: center;
width: initial;
height: 20px;
border: 1px outset gray;
background-color: black;
color: white;
cursor: pointer;
}
Change height to max-height. It's going grow to size if you don't specify and have the overflow as auto.
When I zoom out far on my browser, Chrome, the info_table moves down. Why does it do this? Also when added overflow: auto; to section, it also moves. What can I do?
Jsfiddle http://jsfiddle.net/PbwS8/3/
CSS
*{
font-size:100%;
margin: 0px;
padding: 0px;
}
body{
width: 100%;
}
#info_table{
float: left;
width: 480px;
margin: 40px 0px 0px 16px;
border-spacing: 0px 0px;
}
#left{
float:left;
margin: 60px 0px;
}
#photo{
float: left;
width: 176px;
height: 176px;
border: 1px solid black;
}
#section{
margin: 160px auto 0px;
width: 675.2px;
height: 320px;
#overflow: auto;
#border:1px solid black;
}
#choosephoto{
width: 64px;
}
#submitwords{
width: 72px;
height: 28px;
margin-left: 104px;
#border:1px solid purple;
}
#wrapper{
display: block;
box-shadow: 3px 10px 5px #888888;
margin: 0px auto;
margin-top: 48px;
width: 1024px;
height: 960px;
overflow: auto;
background:white;
}
HTML
<div id="section">
<body>
</body>
<form>
<div id="left">
<div id="photo">
</div>
<br/>
<input type="file" id="choosephoto" name="uploadphoto"/>
</div>
<table id="info_table">
<tr>
<td>Name:</td>
</tr>
<tr>
<td><input/></td>
</tr>
<tr>
<td>Info:</td>
</tr>
<tr>
<td><textarea></textarea></td>
</tr>
<tr>
<td><button type="submit" id="submitwords">Update</button></td>
</tr>
</table>
</form>
</div>
As for what is going on: It appears the browser is compensating for the zoom level by changing the width of the borders on #photo.
67% Zoom:
50% Zoom:
As for how to fix it? Unless being able to zoom like this is a badly needed, I wouldn't worry about it because it is a lot of work to make sure everything scales correctly.
This is because the width for info_table is set too wide for section width.
For example, reducing the width in info_table would alleviate this. So you could try replacing it with the following.
#info_table{
float: left;
width: 460px;
margin: 40px 0px 0px 16px;
border-spacing: 0px 0px;
}
Having said that, it would be better to read up on using a Grid System (like 960.gs).
Why you have a body tag inside?
Your code is a mess, I re-write it for you here