I have the following HTML
<div class="page-content container">
<div class="row">
<a class="btn btn-default btn-lg btn-block" href="#">Add Exercise</a>
</div>
<div class="row">
<table class="table table-condensed table-hover">
<caption>Exercises</caption>
<thead>
<tr>
<th>ID</th>
<th>Name</th>
<th>Technique</th>
<th>Sub Technique</th>
<th>Description</th>
<th>Accents</th>
<th>Min Persons</th>
<th>Max Persons</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Lorem</td>
<td>Ipsum</td>
<td>Dolor</td>
<td>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus. Phasellus viverra nulla ut metus varius laoreet. Quisque rutrum. Aenean imperdiet. Etiam ultricies nisi vel augue. Curabitur ullamcorper ultricies nisi. Nam eget dui.</td>
<td>sit</td>
<td>0</td>
<td>0</td>
</tr>
</tbody>
</table>
</div>
</div>
The problem i'm having is that the table overflows the .row parent. I've tried several thing, searched on google and found some answers but no solutions (at least not for me).
I tried this but then all columns are equal width and I don't want that.
Tried this, this and this but nothing does the trick for me.
I've made a fiddle so you can see what I mean. What I want is to fit all the content inside the .container with the red border.
EDIT:
Problem appears to be only occuring in chrome.
Expected Output:
By default table-layout is set to auto. You need to set it to fixed so that it can take the width:
table{
table-layout: fixed;
}
solved fiddle
Using table-layout:fixed will make the columns equals of equal width and wont break your max-width:100% by overflowing.
But given the fact that you have a 'long-content column', you might give that column a class name and set a max-width value for that class.
Related
I'm creating a new layout for my site and I'm starting with tables. Currently I've got a fairly simple code for my tables and you can see it here: (http://www.thelanternlight.com/misc/new01.html)
I'm trying to have NO scrollbars on the entire page but rather ONLY a vertical scrollbar in ONLY the teal cell you see on that page (the one with lowright written in it). That is where my content will be.
The main issue I'm facing is that I don't want to provide dimensions for my table or its cells because I want to use 100% for width and height so that it covers the entire page no matter what browser settings the user has. If at all possible I just want to add an overflow scrollbar to that teal TD cell alone.
I'll also provide the code I have currently:
<table style="width:100%" height="100%" bgcolor="pink" cellspacing=0 cellpadding=0 class="alignment">
<tr>
<td align="left" bgcolor="red" colspan="2" height="150">topleft</td>
<td align="right" bgcolor="yellow">topright</td>
</tr>
<tr>
<td align="left" bgcolor="magenta" width="100">lowleft</td>
<td align="center" bgcolor="blueviolet" width="100">lowcenter</td>
<td align="center" bgcolor="teal">
<div style="overflow-y:scroll; overflow-y:auto; width:100%">lowright
<p>
</div>
</td>
</tr>
</table>
Give that cell a height or it will keep growing as content is added never triggering the scroll:
<table style="width:100%" height="100%" bgcolor="pink" cellspacing=0 cellpadding=0 class="alignment">
<tr>
<td align="left" bgcolor="red" colspan="2" height="150">topleft</td>
<td align="right" bgcolor="yellow">topright</td>
</tr>
<tr>
<td align="left" bgcolor="magenta" width="100">lowleft</td>
<td align="center" bgcolor="blueviolet" width="100">lowcenter</td>
<td align="center" bgcolor="teal"><div style="overflow-y:auto;
height: 100px; width:100%">lowright
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras accumsan eleifend enim, nec vestibulum risus dignissim sit amet. In hac habitasse platea dictumst. Maecenas at enim eu magna laoreet rhoncus. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Phasellus ac pellentesque enim, at pulvinar orci. Phasellus quis vestibulum nunc. Etiam mattis nulla orci. Donec elementum odio lacus, quis tempus ante eleifend sit amet. Nam congue ut dui vitae eleifend.
Nulla convallis consectetur diam vitae pulvinar. Nam varius hendrerit rutrum. Quisque finibus mattis turpis at dignissim. Praesent hendrerit libero lacinia nibh sodales pretium. Etiam in massa lacinia, posuere lectus non, efficitur nisl. Donec ut turpis vel lectus consequat ornare non molestie nulla. Sed at ante id diam laoreet facilisis vitae et nunc. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Nunc pulvinar, enim vitae hendrerit tincidunt, nibh libero egestas velit, mattis volutpat ante purus et nisi. Mauris feugiat, massa aliquet venenatis semper, ante lectus tempor orci, at tristique leo metus id magna. Sed vestibulum blandit orci, non facilisis felis mollis vel. Donec auctor tincidunt hendrerit. Donec sodales mollis consectetur. Nulla eget tristique felis, eget scelerisque massa. Aliquam nisi mi, feugiat eu ligula quis, dictum varius turpis. Praesent sed leo a dolor egestas rutrum vitae nec diam.
</p>
</div>
</td>
</tr>
</table>
<table style="width:100%" height="100%" bgcolor="pink" cellspacing=0 cellpadding=0 class="alignment">
<tr>
<td align="left" bgcolor="red" colspan="2" height="150">topleft</td>
<td align="right" bgcolor="yellow">topright</td>
</tr>
<tr>
<td align="left" bgcolor="magenta" width="100">lowleft</td>
<td align="center" bgcolor="blueviolet" width="100">lowcenter</td>
<td align="center" bgcolor="teal">
<div style="overflow-y:scroll; width:100%">lowright
<p>
</div>
</td>
</tr>
</table>
<div style="overflow-y:scroll; width:100%">lowright
Body overflow-y: hidden;
I put the overflow-y: hidden in the body and overflow-y:scroll in the div
Try it
I have a table in a html5. One of the columns is a description column. And since I am using bootstrap class "col-md-2". The description being long goes a lot down. I want to enable a vertical scroll for that particular <td>. I have tried using style="overflow-y: auto;" with td. But, it doesn't seem to work.
HTML File :
<div class="panel-body">
<table ng-if="applicationListAdmin" st-table="applicationTable" class="table table-striped">
<tr>
<th>Application No.</th>
<th>Project Title</th>
<th>Project Description</th>
<!-- <th>DataSet Available</th> -->
<!-- <th>Impact</th> -->
<th>Number of Interns</th>
<th>Expected SkillSet</th>
<th>Software Licenses Needed</th>
<th>Hardware Requirements</th>
<th>Status</th>
<th>Update</th>
</tr>
<tbody>
<tr ng-repeat="application in applicationListAdmin">
<td class="col-md-2">{{application.number}}</td>
<td class="col-md-2">{{application.title}}</td>
<td class="col-md-2" style="overflow-y: auto;">{{application.description}}</td>
<td class="col-md-1">{{application.numberOfInterns}}</td>
<td class="col-md-2">{{application.skillSet}}</td>
<td class="col-md-2">{{application.software}}</td>
<td class="col-md-2">{{application.hardware}}</td>
<td class="col-md-2">{{application.state}}</td>
<td>
<i class="material-icons" ng-click="view(application._id)">receipt</i>
<i class="material-icons" ng-click='edit(application._id)' style="color:red">edit</i>
<i class="material-icons" ng-click="remove(application._id)" style="color:red">delete</i>
</td>
</tr>
</tbody>
</table>
Css values for table:
th,td {
/*border-style: solid;
border-width: 5px;
border-color: #BCBCBC;*/
word-wrap: break-word;
}
table {
table-layout: fixed;
width: 100%;
}
You can't set the height to the table td. but what you can do is put the contents inside a div and place that div inside the td
<!DOCTYPE html>
<html>
<head>
<style>
table, th, td {
border: 1px solid black;
}
div{
overflow-y:scroll;
height:100px !important;
}
</style>
</head>
<body>
<table>
<tr>
<th>Month</th>
<th>Description</th>
</tr>
<tr>
<td >
March
</td>
<td >
<div>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus. Phasellus viverra nulla ut metus varius laoreet. Quisque rutrum. Aenean imperdiet. Etiam ultricies nisi vel augue. Curabitur ullamcorper ultricies nisi. Nam eget dui. Etiam rhoncus. Maecenas tempus, tellus eget condimentum rhoncus, sem quam semper libero, sit amet adipiscing sem neque sed ipsum. Nam quam nunc, blandit vel, luctus pulvinar, hendrerit id, lorem. Maecenas nec odio et ante tincidunt tempus. Donec vitae sapien ut libero venenatis faucibus. Nullam quis ante. Etiam sit amet orci eget eros faucibus tincidunt. Duis leo. Sed fringilla mauris sit amet nibh. Donec sodales sagittis magna. Sed consequat, leo eget bibendum sodales, augue velit cursus nunc,
</div>
</td>
</tr>
</table>
</body>
</html>
For scroll to appear, you need to set the height on the element.
Try:
<td class="col-md-2" style="overflow-y: auto;height: 100px;display:block;">random text</td>
Demo: http://jsfiddle.net/lotusgodkk/GCu2D/2165/
I trying to understand how browsers render table cells with width set to 100%. How they calculate the width of cells. We have the following example
<table style="width: 100%; color: black">
<tr>
<td>
AAAA
</td>
<td>
<div style="width: 100%;height: 25px; background: red;"></div>
</td>
</tr>
</table>
Output is weird
My question is why the first cell is that long (it contains only 4 letters of text and should end after last letter) while the second cells width should be as wide as possible.
I would expect something like that
As long as you don't set any width for the tds, the proportion between them is analog to the content. In your example, four letters in the first cell is infinite times more content than the second cell has (no text at all).
If you want to avoid that, define width settings for the tds - see the example below - once with your original code, once with added content in the first td
td {
width: 50%;
}
<table style="width: 100%; color: black">
<tr>
<td>
AAAA
</td>
<td>
<div style="width: 100%;height: 25px; background: red;"></div>
</td>
</tr>
</table>
td {
width: 50%;
}
<table style="width: 100%; color: black">
<tr>
<td>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu.</p>
<p>In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus.</p>
<p>Phasellus viverra nulla ut metus varius laoreet. Quisque rutrum. Aenean imperdiet. Etiam ultricies nisi vel augue. Curabitur ullamcorper ultricies nisi. Nam eget dui. Etiam rhoncus. Maecenas tempus, tellus eget condimentum rhoncus, sem quam semper libero, sit amet adipiscing sem neque sed ipsum. Nam quam nunc, blandit vel, luctus pulvinar, hendrerit id, lorem. Maecenas nec odio et ante tincidunt tempus. Donec vitae sapien ut libero venenatis faucibus. Nullam quis ante. Etiam sit amet orci eget eros faucibus tincidunt. Duis leo. Sed fringilla mauris sit amet nibh. Donec sodales sagittis magna. Sed consequat, leo eget bibendum sodales, augue velit cursus nunc,</p>
</td>
<td>
<div style="width: 100%;height: 25px; background: red;"></div>
</td>
</tr>
</table>
How can I put the name David Laecke under the stop image with CSS?
Right now the text David Laecke depends on how much the text on the right grows so that name gets pushed down when the text on the right grows, but I would like it to be independent of the text on the right.
I already made it a div, I then changed it to a span and I changed the width to be less but I can see that it's for some reason taking all the space to the other side of the element, so that's why is being pushed down.
How can I do it? any help would be appreciated.
My HTML code:
<h4>
<form method='post' id='deleteinsight-2' action="insights.php?chapter=1" data-ajax='false'> <input type='hidden' name='deleteinsightinput' value='2'>
<a href='#' data-rel='back' data-role='button' data-icon='delete' data-iconpos='notext' onclick='deleteinsight(this,event);' style='position:absolute;top:-20px;right: -10px' >Delete</a>
</form>
<div class='ui-grid-a'>
<div class='ui-block-a textfloatleft' > 1 new </div>
<div class='ui-block-b textfloatright'> Jan 27 2016, 12:25 pm </div>
</div>
<div class='ui-grid-b' style='width:900px;'>
<div class='ui-block-a' id='blocka'>
<img id='imguser' src='http://www.testingcolorvision.com/widget/core/restart.png'>
</div>
<div class='ui-block-b' id='blockb'>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus. Phasellus viverra nulla ut metus varius laoreet. Quisque rutrum. Aenean imperdiet. Etiam ultricies nisi vel augue. Curabitur ullamcorper ultricies nisi. Nam eget dui. Etiam rhoncus. Maecenas tempus, tellus eget condimentum rhoncus, sem quam semper libero, sit amet adipiscing sem neque sed ipsum. Nam quam nunc, blandit vel, luctus pulvinar, hendrerit id, lorem. Maecen</div>
<div class='ui-block-c' id='blockc'>
<button id='btn01' href='#' data-icon='check' data-iconpos='right' style='width:100px;' onclick='showtextarea(this,2)' >Reply</button>
</div>
</div>
<span id='namefirstlast'>David Laecke </span>
</h4>
https://jsfiddle.net/bkt27wvk/
Just put the name in the same <div> as the image and it should work
Like so:
<div class='ui-block-a' id='blocks'>
<img id='imguser' src='http://www.testingcolorvision.com/widget/core/restart.png'>
<br />
<span id='namefirstlast'>David Laecke </span>
</div>
https://jsfiddle.net/bkt27wvk/2/
Like the title says, I am having issues with a VERY long string overflowing my page. I tried some overflow techniques, but none seem to work.
I had previously posted this as a Primefaces problem, but have since learned that it is not a Primefaces issue. Anyway, if anybody has any suggestions on how I can fix this, I would appreciate it. I will post my HTML below so you can see what I am talking about.
Thanks for taking the time to read, and have a great day. :-)
<!DOCTYPE html>
<html>
<head>
<title> overflow </title>
<style type="text/css">
#container{
width: 800px;
border: 1px solid #000;
background-color: #efefef;
}
div {
padding: 10px;
}
span.text {
}
</style>
</head>
<body>
<h3> overflow </h3>
<div id="container">
<table border="1">
<tr>
<td>
<span>cell_X</span>
</td>
<td>
<span>cell_Y</span>
</td>
<td>
<span>cell_Z</span>
</td>
<td>
<span class="text">asdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdf</span>
</td>
<td>
<span> </span>
</td>
</tr>
<tr>
<td>
<span>cell_X</span>
</td>
<td>
<span>cell_Y</span>
</td>
<td>
<span>cell_Z</span>
</td>
<td>
<span class="text">asdf</span>
</td>
<td>
<span> </span>
</td>
</tr>
<tr>
<td>
<span>cell_X</span>
</td>
<td>
<span>cell_Y</span>
</td>
<td>
<span>cell_Z</span>
</td>
<td>
<span class="text">asdf</span>
</td>
<td>
<span> </span>
</td>
</tr>
<tr>
<td>
<span>cell_X</span>
</td>
<td>
<span>cell_Y</span>
</td>
<td>
<span>cell_Z</span>
</td>
<td>
<span class="text">asdf</span>
</td>
<td>
<span> </span>
</td>
</tr>
<tr>
<td>
<span>cell_X</span>
</td>
<td>
<span>cell_Y</span>
</td>
<td>
<span>cell_Z</span>
</td>
<td>
<span class="text">asdf</span>
</td>
<td>
<span> </span>
</td>
</tr>
</table>
<div>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed semper justo vel felis blandit ut egestas nisi tincidunt. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nunc in est pulvinar orci pharetra fringilla in eget quam. Maecenas id ipsum eget arcu tempus varius eu sit amet neque. Praesent quis consectetur ligula. Nam bibendum, turpis nec dignissim euismod, arcu libero sodales sapien, ut scelerisque magna risus eu orci. Curabitur sit amet turpis at turpis adipiscing luctus nec id felis. Vestibulum luctus mauris quis ante dignissim rutrum. Fusce fermentum enim quis nisl volutpat consequat. Integer lacinia tempor nisi id aliquet. Praesent vitae semper ipsum. Curabitur mauris est, faucibus eu auctor a, egestas vitae nisi.
</div>
<div>
Donec fringilla laoreet leo, eu aliquet dolor mollis sed. Donec ligula turpis, vestibulum sed faucibus at, venenatis consequat turpis. Integer fringilla, ligula in consequat sodales, odio nunc vulputate nisi, non hendrerit dolor mauris sodales nulla. Nulla mattis iaculis nisi, quis lacinia massa dictum vitae. Fusce quis turpis neque, nec adipiscing tortor. Cras et nisi sem, at viverra lacus. Nam posuere odio non lacus facilisis condimentum. Ut ultricies, arcu eget tempus facilisis, urna dui commodo neque, a posuere libero mi ut nisl. Praesent ut semper lectus. Aenean id mauris nulla. Pellentesque dapibus congue varius. Ut id turpis consequat augue pellentesque egestas. Nunc feugiat bibendum tortor, sit amet fringilla enim viverra in. Mauris sit amet lorem eget enim ultrices euismod id eu velit. Duis eu vestibulum sapien.
</div>
<div>
Vivamus volutpat interdum tortor et luctus. Etiam laoreet congue nunc in congue. Nullam interdum mauris eros. Duis at turpis odio, in interdum odio. Aenean feugiat est at libero hendrerit quis laoreet purus egestas. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Vestibulum sagittis scelerisque venenatis. Morbi tristique rutrum tortor at lobortis. Suspendisse suscipit purus vel massa laoreet vitae dapibus lorem imperdiet. Mauris consectetur arcu et diam iaculis et cursus leo ultrices. Nunc turpis nunc, interdum ac pretium id, facilisis quis libero.
</div>
<div>
Donec eget velit in nisl posuere porttitor ut at nisl. Phasellus eros tortor, pretium at sollicitudin pellentesque, feugiat a tortor. Integer blandit viverra odio, id iaculis odio fringilla ac. Nulla dignissim fermentum lorem ac scelerisque. Vivamus iaculis augue eu sapien porta convallis. Nam faucibus, diam nec condimentum dapibus, erat arcu vehicula nisi, sed vehicula ante ante convallis ipsum. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Donec quam elit, mattis pretium venenatis nec, vehicula ut tellus. Phasellus commodo pretium purus, non viverra erat auctor sed. Ut dui nisl, pellentesque nec placerat non, sagittis condimentum nunc. Donec varius tincidunt est eu consequat. Etiam ac nulla ut nibh sagittis vulputate. Nullam egestas risus eu nunc tincidunt a ultricies libero posuere. Nulla facilisi. Maecenas sagittis est nec tellus sodales porttitor.
</div>
<div>
Nullam vulputate dui ac velit lobortis pellentesque eu a nisi. Maecenas vitae ligula dui, in imperdiet mi. Mauris commodo nisl eu eros sodales sed tempor leo auctor. Nam ornare varius arcu, at dictum ipsum volutpat nec. Aenean sagittis adipiscing hendrerit. Aenean at quam lacus. Donec malesuada bibendum vestibulum. Suspendisse lobortis pretium neque, vitae tempus felis interdum in. Aliquam sed metus in felis sodales interdum. Praesent malesuada nulla pretium arcu consectetur eu dictum lacus elementum. Ut dictum faucibus hendrerit.
</div>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<title> problem </title>
<style type="text/css">
.main
{
width:960px;
margin:0 auto;
overflow: scroll;
}
</style>
</head>
<body>
<h4> problem </h4>
<div class="main">
<table border="1">
<tr>
<td>
<span>cell</span>
</td>
<td>
<span> </span>
</td>
<td>
<span>cell</span>
</td>
<td>
<span class="troubleSpan">asdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdf</span>
</td>
<td>
<span> </span>
</td>
</tr>
</table>
</div>
</body>
</html>
use the word-wrap:break word css attribute & give it an explicit width:
span .text{
word-wrap:break-word;
width:800px;
}
This property will only apply if the element has a visual rendering, is an inline element with explicit height/width, is absolutely positioned and/or is a block element.