I have a very basic CSS question.
I have a div with fixed height and I have a table inside that div.
The content of the table will not fit in the div unless the div gets a scrollbar. The problem is now,
the content of the table is overflowing the div as its height is more than the height I set on the div.
This is what I have for the Div
display: inline-block;
float: left;
max-height: 200px;
Here is an example.
jsfiddle
How do I get the table to fit in the div and have a scrollbar? This is not specific to any browser. I tried both in Chrome and IE myself.
[edit] Quoting your request:
How do I get the table to fit in the div and have a scrollbar.
Add the following to .test (fiddle)
overflow-y:scroll;
Documentation for overflow-y
.test {
background-color: gray;
display: inline-block;
float: left;
max-height: 200px;
overflow-y: scroll;
}
.matrix td, .matrix th{
border: 0.1em solid #E2E2E2;
padding: 4px 2px;
min-width: 65px;
white-space: normal;
text-align: center;
}
Related
I have the following:
#innerLabels,
#innerFields {
display: inline-block;
width: 200px;
height: 200px;
border-style: solid;
border-width: 1px;
vertical-align: top;
}
.innerLabel {
display: table;
border-style: solid;
border-width: 1px;
height: 100px;
width: 80%;
}
.innerLabel div {
display: table-cell;
vertical-align: middle;
border-style: solid;
border-width: 1px;
}
#outterFields {
background-color: red;
width: 60%;
min-width: 300px;
height: 300px;
}
#outterFields div {
display: inline-block;
}
<div id="outterFields">
<div id="innerLabels">
<div class="innerLabel">
<div>hello</div>
</div>
</div>
</div>
I can't work out why the inner most div isn't being centred? I did look at some of the answers here regarding centring however I can't see what the problem is...
I want the hello to be centred vertically to the centre but not horizontally. All other divs are positioned how I want them. There is no error in the other divs they are positioned side by side for a reason. The only change I want is the hello div moved vertically to the centre
You are just overiding your inner div with
#outterFields div {
display: inline-block;
}
Just remove it or if you where intending a direct child do:
#outterFields > div {
display: inline-block;
}
#innerLabels,
#innerFields {
display: inline-block;
width: 200px;
height: 200px;
border-style: solid;
border-width: 1px;
vertical-align: top;
}
.innerLabel {
display: table;
border-style: solid;
border-width: 1px;
height: 100px;
width: 80%;
}
.innerLabel div {
display: table-cell;
vertical-align: middle;
border-style: solid;
border-width: 1px;
}
#outterFields {
background-color: red;
width: 60%;
min-width: 300px;
height: 300px;
}
#outterFields div {
/* display: inline-block; */
}
<div id="outterFields">
<div id="innerLabels">
<div class="innerLabel">
<div>hello</div>
</div>
</div>
</div>
Your outterfields display inline block is overwriting other display items. I came up with better solution for you. I haven't used table but used flex here learn about flex it's more worth.
#outterFields {
background-color:red;
width:60%;
min-width:300px;
height:300px;
}
#innerLabels, #innerFields {
display:flex;
align-items:center;
width:200px;
height:200px;
border: 1px solid #000;
}
.innerLabel {
display:flex;
align-items:center;
border: 1px solid #000;
height:100px;
width:80%;
}
.innerLabel div {
display:table-cell;
vertical-align: middle;
border: 1px solid #000;
}
<div id="outterFields">
<div id="innerLabels">
<div class="innerLabel"><div>hello</div></div>
</div>
</div>
The necessary and most often sufficient condition where you can center a div using a display: table-cell, is as follows:
<div id="a">
<div id="b">
<div id="c">Helo</div>
</div>
</div>
CSS as follows:
body, html {
height: 100%;
}
#a {
display: table;
width: 100%;
height: 100%;
}
#b {
display: table-cell;
vertical-align: middle;
}
#c {
margin: auto;
text-align: center;
}
You need html and body elements to actually span the entire height of the document area if you want your a div to be able to make use of its 100% height. If your use case demands height that does not depend on the height of the document body, you don't have to use the body, html selector.
When you use display: table the otherwise auto-expanding width for a div element (width: auto implicit rule) does not apply the same way anymore as elements with display: table use a conservative width calculation -- they only by default take as much space as the content requires. Since I am illustrating a "100% 100%" centering to you, I have width: 100% there to have the element expand to available parent width.
height: 100% is likewise needed to have the element expand to available parent height. It does not matter if its display: block as with regular div elements, or display: table -- you need to specify height if you want computed height that goes beyond content height.
The display: table-cell rule only works if there is an ancestor element with display: table, hence you need at least two elements inside one another to apply display: table-cell to the one that is contained in the other. You don't need to specify height because elements with display: table-cell occupy available parent height automatically.
vertical-align rule for the display: table-cell elements is the only case where the alignment applies to the content inside the element, as opposed to its usual behavior where it applies with regard to how the element is positioned within the parent. Meaning that in our case, the vertical-align tells the browser that everything contained in the element with display: table-cell is to be centered vertically within its computed height.
For the c element you would need margin: auto only if you had content that did not completely fill available parent width. Since div elements normally do, it is not necessary, but is forward thinking on my part -- in case you decide to use span or something else that computes its width conservatively. The text-align speaks for itself -- The anonymous textual content and text inside descendant elements, will be centered in the middle along horizontal axis.
I have 2 divs with float:left. Both have designated widths, heights, paddings and margins. But on one of the divs the content with its paragraphs tags dramatically overflows the right edge of the div.
My CSS is set out us such:
Content in this div behaves as expected:
#upcomingevents
{
float: left;
background-color: #FFFFFF;
width: 300px;
height: 400px;
margin: 25px;
padding: 10px;
}
Content in this div overflows the right side, creating a scroll bar:
#maincontent
{
background-color: #FFFFFF;
float: left;
height: 400px;
width: 555px;
margin: 25px;
padding: 10px;
}
Both these divs are wrapped in a div that has overflow:auto
#contentinner
{
overflow: auto;
width: 1000px;
margin: auto auto 60px;
padding-top: 20px;
}
I am really puzzled as to why the #maincontent p's are behaving this way. Can anyone tell me what I'm done wrong?
it's one continuous line. Add
word-wrap: break-word;
to #textcontent > p tags to break the lines
Here is my fiddle,
HTML
<div id="wrapper">
<div class="notes">One</div>
<div class="notes">two</div>
<div class="notes">three</div>
<div class="notes">four</div>
</div>
CSS
#wrapper {
width: 300px;
overflow-x: scroll;
overflow-y: scroll;
border: 1px solid black;
}
.notes {
color: red;
border: 1px solid green;
margin: 5px;
width: 200px;
height: 150px;
display: inline-block;
}
I have a wrapper div which has 300px width.
The inner divs are generated dynamically based on the server request and has the width of 200px each.
Now i need to set side by side in the wrapper and when it reach 300px it needs to be displayed in a scrolled mode..
Seems i have some issues in my code. Pls help...
You could give white-space: nowrap; to the wrapper, then reset it to white-space: normal; for each item.
Example Here
#wrapper { white-space: nowrap; }
.notes { white-space: normal; }
You might also want to remove the white-space between inline block elements. There are several approaches to achieve that, one of them could be setting font-size: 0 to the parent, then resetting it to font-size: 16px on the children.
Updated Example
I feel this question has been answered but I searched and searched and no answer seems to deal with dynamic main content width.
I simply want this scenario:
|-|nav|-|main content|-|
Where nav is a DIV and main content is a DIV and both are placed inside another DIV container which has a width of 100%. - is simpy a spacing between the DIVs, a margin.
nav has a fixed width of 300px and "main content" div should always take the rest of the space available (to fill the 100% of the parent div) - without the use of JavaScript.
Also I want to have some margins left and right of each DIV (nav, main content) so that they have some space between them and the "browser border"/body.
I experimented with table, table-cell but the border-collapsing drove me nuts so I am heading back to god old "float: left" and clearfix. This is what I have so far:
<div id="container" class="cf">
<div id="nav">
Nav stuff
</div>
<div id="main">
Main stuff
</div>
</div>
#container {
padding: 0;
width: 100%;
background-color: orange;
min-height: 50px;
}
#nav {
display: inline;
float: left;
min-width: 300px;
width: 300px;
margin-left: 10px;
margin-right: 10px;
}
#main {
display: inline;
float: left;
background-color: green;
margin-right: 10px;
}
.. /* clearfix stuff omitted (class 'cf') */
So now the problem is, how to make "main content" (#main) fill the rest of the parent (#container). If I use a width of 100% the 100% is of course the full width of the parent and the div will go under the "nav" div. If i use "auto" the same thing happens. It of course works if I pass in a fixed width e.g. in pixels but I don't know the correct pixels in advance and using JS to calculate that seems a bit odd to me.
I've seen a solution where the "nav" was put inside "main" but that leads to problems with the margins. Try to insert a margin to create some space beside a div that is inside another div... I don't think that's anyhow possible in this universe.
Thanks for your help!
Maybe you should create BFC to face this problem.
For example:
#container{
border: 1px solid red;
}
#nav{
float: left;
width: 300px;
border: 1px solid green;
height: 200px;
margin-left: 20px;
margin-right: 20px;
}
#main{
overflow: hidden;
height: 400px;
border: 1px solid blue;
margin-right: 20px;
}
overflow: hidden; is the key to create BFC for #main.
JSFiddle : http://jsfiddle.net/yujiangshui/yMFB6/
More about BFC : https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Block_formatting_context
For example:
#container {
width: 100%
position: relative;
}
#nav {
position: absolute;
top: 0;
left: 0;
width: 300px;
}
#main {
margin-left: 320px;
}
JSFIDDLE
I am working on a menu system which consists of div's (width: 275px, height: 75px, border: 1px solid) among each other. I want the whole div to be clickable, which I do with an a tag and display:block property (see code below). Some of the menu entries are multi-lined text, but I can't align them vertically. The basic code is:
.div {
width: 275px;
height: 75px;
border: 1px solid #000;
text-align: center;
float: right;
}
<div class="div">
<a style="display: block; width: 100%; height: 100%" href="#">link..</a>
</div>
I have tried the following:
line-height: 75px: that doesn't work with multi-lined text
display: table and vertical-align: middle does not work with the 100% width and height of the -tag.
I have really tried a lot other code with wrapper div's, tables, ... but with no success.
Otherwise, I do not want to make use of javascript (onclick="location.href").
Thanks!
You can do it with what you've already tried: 'display:table-cell; vertical-align: middle;', you just have to set the height to 75px instead of 100%.
Use display:table-cell, to achieve vertically centred multi-lined text.
JSFiddle Demo
CSS:
div {
width: 300px;
height: 200px;
border: 1px solid #000;
text-align: center;
display: table-cell;
vertical-align: middle;
}