I have a div that contains two other divs, one floated to the right and one to the left, and both of these inner DIVs have a table each. I need the outermost div to contain the divs within it, but it doesn't. It seems as if the inner divs don't contain the inner tables. Because the outermost div has a border, I can see that its height is a lot shorter than the contained content.
<style>
.bluebox{ border:1px solid blue; }
.floatleft
{
float:left;
}
.floatright
{
float:right;
}
</style>
This is my HTML:
<div class='bluebox'>
<div class='floatleft'>
<table cellspacing=10>
<tr><td class='head'> Qty ordered: </td><td> 100</td> </tr>
<tr><td class='head'> Description: </td><td> Business Card</td></tr>
<tr><td class='head'>Stock: </td><td> SPRONDIGRLE WHITE</td></tr>
<tr><td class='head'>Lamination: </td><td> XXX</td></tr>
</table>
</div>
<div class='floatright'>
<table cellspacing=10>
<tr><td class='head'> Parent A3 Sheets: </td><td>XXX </td></tr>
<tr><td class='head'>Finish Size: </td><td> 9 x 5cm</td></tr>
<tr></tr>
<tr><td class='head'>Finishing touches: </td><td> Rounded corners</td></tr>
</table>
</div>
</div>
Since I need the border to show, I can't do something like padding-bottom:-5000px; overflow:hidden, because then the border will stretch the page by miles!
You need to clear your floats. The simplest way to do that would be like so:
.bluebox{ border:1px solid blue; overflow: hidden }
http://jsfiddle.net/LBfxY/
There are other ways to do this, but using overflow is the most concise. Here are some demos on other clearfix techniques:
http://codepen.io/cimmanon/pen/qDjdr
Related
I have a table where one of the cells is like this:
<td>
<div class="table-wrapper">
<table class="inner-table">
<!--content-->
</table>
<div>
</td>
The div is there so I can put a border around the table, with a gap of 10px. As it displays, though, the div is the entire width of the enclosing td. What I would like is for it to be just the width of the table it wraps (plus margin, to be specified). I can't figure out the CSS to do this, simple though it no doubt is, although I've got it working with Javascript - but I would prefer to do it using CSS, if possible. I had hoped setting width:auto for the div would work, but it makes no difference,
One way is to use inline-block
<style>
.table-wrapper {
border : 1px solid black;
padding : 10px;
display : inline-block;
}
</style>
<table width="400px">
<tr>
<td>
OUTER
</td>
<td>
<div class="table-wrapper">
<table class="inner-table">
<tr><td>INNER</td></tr>
</table>
<div>
</td>
</tr>
</table>
I have a rounded box where I display information and would like to show alternate line with a different background color. The problem is the color does not flow to the borders and inbetween cells and it does not appear very nice. Additionally there is a scrollbar that appears when there are many lines and the scrollbar hides the rounded corner (I can probably live with this if it becomes too complicated).
Here is my basic html:
<div style="width:80%">
<div id="Activity" style="width:100%; display:inline-block; border-radius:20px; border:1px solid black; padding:10px; background-color:black; height:500px; overflow-y:auto; overflow-x:hidden;">
<table class="list" id="ActivityList" style="width:100%;">
<thead style="color:white; font-weight:bold;">
<tr>
<td style="padding-right:10px;">Date/Time</td>
<td>Log</td>
</tr>
</thead>
<tbody>
<tr><td style="white-space:nowrap; padding-right:10px;">2017/04/23 10:08:03</td><td>Variable Paul is at home updated to False</td></tr>
<tr><td style="white-space:nowrap; padding-right:10px;">2017/04/23 10:08:03</td><td>Variable Paul is at home updated to False</td></tr>
<tr><td style="white-space:nowrap; padding-right:10px;">2017/04/23 10:08:02</td><td>Variable Paul is at home updated to False</td></tr>
</tbody>
</table>
</div>
</div>
And here is a jsfiddle showing the problem.
Add cellspacing="0"to remove the space between the cells
And for the scrollbar, remove the overflows from the child div and set it to the parent div or vice versa you fine bellow link for both solutions:
Solution 1
Solution 2
For the lines to touch the right/left border, all you have to do is remove the right/left padding of the divs
Solution 3
I have problem with absolute positioning DIV over the table element. I have a DIV that’s set the position absolute and set the top position to display the exact place. Now what happened in chrome browser while zooming (ctrl +) the DIV position has been changed at zoom level 125, 150, 175 ... etc. But Zoom level 100,200, 300… (Multiple of 100) it’s displayed the same position. The problem was other than the multiple of 100 zoom level the DIV position changed. How can I fix this issue ?
I have created the sample page in jsfiddle - demo . please run the page in chrome browser and zoom the browser ( ctrl + ) the red color DIV position will be change, this is the issue. I really hope someone find a solution for this.
HTML :
<div class="container">
<table width="700px" class="custom">
<tr>
<td>
</td>
</tr>
<tr>
<td>
</td>
</tr>
<tr>
<td>
</td>
</tr>
<tr>
<td>
</td>
</tr>
<tr>
<td>
</td>
</tr>
<tr>
<td>
</td>
</tr>
<tr>
<td>
</td>
</tr>
<tr>
<td>
</td>
</tr>
<tr>
<td>
</td>
</tr>
<tr>
<td>
</td>
</tr>
<tr>
<td>
</td>
</tr>
<tr>
<td>
</td>
</tr>
<tr>
<td>
</td>
</tr>
</table>
<div>
<div class="apptest"> </div></div>
CSS :
table
{
border-collapse:collapse;
}
.custom tr td
{
height:20px;
border:1px solid;
background-color:White;
}
.container {
position: relative;
}
.apptest
{
height:70px;
width:400px;
position:absolute;
top:185px;
left:0px;
background-color:Red;
}
Link : http://jsfiddle.net/mJcsb/5/
Use a container with a style like this;
.Container {
margin-right: auto;
margin-left: auto;
width: 500px;
}
I'm not going to debate whether tables are a poor choice or not these times. But an absolute positioning here is a pretty bad idea.
I don't know what you have to do and what is your aim, but you could have a different (and probably better) solution using divs; in that case, a div containing your "red" div would just.. contain it, heh!
If you want to go anyway with absolute positioning and tables, be aware that this is a dirty solution and could break anytime. In that case, I'd suggest you to go with percentage-based absolute positioning, so that the box flows with the zoom (that is, by the way, difficult to predict and normalize in every browser).
i.e.
.apptest
{
height:70px;
width:400px;
position:absolute;
top:61.2%;
left:0px;
background-color:Red;
}
A fork of you fiddle with percentage for absolute positioning (POOR SOLUTION WARNING HERE): http://jsfiddle.net/U4TGd/
Keep in mind that, again, this is a bad solution and mixing percentages and pixels in often a bad idea. If you have time or possibility, convert your table-based design and use divs instead of tabs.
Its not the div position which was changing, the one which our eye relates the div position was changing(in this case the table border of each cell).
I found out this with some testing,
use this css to know that the absolute position div is in exact position.
.custom tr td {
height:20px;
border:0px solid;
}
.container {
position: relative;
height:185px;
background:#0F6;
}
.apptest {
height:70px;
width:400px;
position:fixed;
top:185px;
left:0px;
background-color:Red;
}
So you have no problem with absolute positioning DIV, but maybe chrome rendering the table cells differently.
I have the following HTML:
<div class="wall" >
<table>
<tr>
<div class="tbr01"><th>Content</th></div>
<div class="tbr02"><th>User</th></div>
<div class="tbr03"><th>Published</th></div>
</tr>
</table>
</div>
How do i adjust the width of the th div.tbr01
This is what i've tried in my css file: but i am doing something wrong?
div.wall table tr div.tbr01 th {
width: 100px;
}
Regards,
Thijs
Your HTML is invalid.
You cannot have a <div> as a child of a <tr> or a parent of <th>.
Browsers will perform error recovery in various different ways and often give you a DOM that isn't like you expect (e.g. by moving all the div elements outside the table).
Get rid of the div elements and apply your styles directly to the table cells.
seems it doesn't like the div... apply the class to the th or use
div.wall table tr th {
width: 300px;
}
OR
<div class="wall" >
<table>
<tr>
<th class="tbr01">Content</th>
<th class="tbr02">User</th>
<th class="tbr03">Published</th>
</tr>
</table>
</div>
div.wall table tr th.tbr01 {
width: 300px;
}
<style>
.special p { display:none; }
.special:hover p { display:block; }
</style>
<table>
<tr>
<td style="width:200px">Things</td>
<td style="position:relative; width:220px">
<div style="position:absolute;right:0" class="special">
<img id="shows" />
<p>Variable width upto, say 600px (Will be hidden until this td is :hovered</p>
</div>
</td>
</tr>
<tr>
<td style="width:200px">Things</td>
<td style="position:relative; width:220px">
<div style="position:absolute;right:0" class="special">
<img id="shows" />
<p>Variable width upto, say 600px (Will be hidden until this td is :hovered</p>
</div>
</td>
</tr>
</table>
Can I make this work? Ie, can I make the #special p expand over the top of 'Things'? As I currently have it set up #special won't ever grow outside the 220px wide td. Any ideas?
I am still not fully clear, but try this. This will allow the TD to grow when the content is displayed.
<table>
<tr>
<td style="width:200px">Things</td>
<td style="text-align: right;">
<div class="special">
<img id="shows" />
<p>Variable width upto, say 600px (Will be hidden until this td is :hovered</p>
</div>
</td>
</tr>
</table>
I'm not 100% sure what you are trying to achieve, but wow about taking away the position: relative from the td and making the .special p s position: absolute but not the special elements themselves?
That way, your special elements will be in the normal table flow, and the paragraphs popping up will leave the table cell's boundaries.