I'm experiencing a very strange behavior in which a an element with overflow: hidden, white-space: nowrap, and a width: 50% forces its containing element to expand to fit all the text even though it is constrained by the width declaration (and not actually visible). Setting a specific width on the container or using overflow: hidden also does nothing to help. Setting an absolute value as width for the element in question however, fixes the problem, but i do not want to use absolute values.
Example: http://jsbin.com/loxuz/3 (Yellow box should only be 50% of grey box, but is expanding to fit all of the text in the blue box, even though that is restricted in width.)
Does anyone see anything obviously wrong here? Should the containing elements have a width, and could it have anything to do with the fact that I'm using percentages? I don’t feel that could be the case as the width should be inherited from containers upwards, right? And not be dictated form text elements downwards. The only explanation I can find is that white-space: nowrap is causing this. Removing this gives the container the right width, but also causes wrapping of the text, which I don’t want.
Does anyone know a solution to this, or have any insight? :)
A quick workaround for the issue with fieldsets not respecting the specified width is to add a min-width: 0 to the element:
i.e.
fieldset {
min-width: 0;
}
Is this what you want? DEMO: http://jsbin.com/tifefase/1/. You should remove max-width: 50% from span and write width: 50% for #second div. This is the answer you are looking for if you want to use fieldset.
#second {
width:50%;
border:yellow 1px solid;
}
span {
overflow:hidden;
white-space:nowrap;
outline:blue 1px solid;
display:block;
}
But if you use div instead of fieldset, You can carry on with your current values. SEE THE NEW DEMO with div being used instead of fieldset.
#second {
width:50%;
}
#third {
width:100%;
border:yellow 1px solid;
}
Related
I'm on a site where you are allowed to customize a profile, but you can only touch the css.
I've managed okay but I have a problem with the scrollbar here. It is going out of boundaries because it is in a div box with border radius on.
How could i fix this? to either make it smaller or pushed away from the side. just as long as it doesnt go out of the div border.
Sorry for no jsfiddle.
It looks as though you have a container element, with an inner element that holds your icons. You cannot clip the scrollbar corners, but there are a few things you can try to fix this visually.
Firstly, for the container element, you need to make sure that you have set its CSS 'overflow-y' property to 'scroll':
.container {
overflow-y: scroll;
}
Then, you can try getting rid of the border radius altogether by doing this:
.container {
border-radius: 0;
overflow-y: scroll;
}
Or, you can adjust the 'border-radius' and increase the 'border' to give the appearance that the scrollbar is properly nested inside of the container and no longer going outside of its bounds:
.container {
border: 7px solid black;
border-radius: 10px;
overflow-y: scroll;
}
I've written a Codepen example for you.
This is giving me such a headache i just have to ask. I never seem to have trouble with C# or Java or SQL or JS as I have with CSS, and i spend too much time trying to figure things out.
I have a table div and some row and cell divs inside it. And i just want to make table div to be of exact height.
My current style:
div .table
{
width: 410px;
height: 410px;
max-height: 410px;
display: table;
border-spacing: 10px;
border-style:dotted;
border-width:medium;
overflow: visible;
}
What else do I have to do to make div exactly 410 px high?
I tried wrapping it in a outer div (with blue borders in picture with specific height and display:block) but table div does not seem to notice it. I added a div with clear:both at the bottom, sometimes it helps but not today...
It appears that:
display:table;
will force the element to expand to fill the width of the content. Even if you set "overflow" to be hidden.
Here's a fiddle with some examples:
http://jsfiddle.net/dRLfv/
I think you'll need to do a regular "display:block" and then set overflow appropriately. That would probably require you to adjust some of your other styles for the table/form elements inside but that should be double and I'm sure others will be happy to help.
I hope that helps!
Cheers!
I have a problem with content from a div, for example if I put a table inside of a div and set a width (width:200px !important)for that div the table it will overwrite that div. So how is possible to keep all content inside that div?
fiddle example:
http://jsfiddle.net/ebG9N/45/
You set the header to white-space: nowrap; therefore, the browser is unable to break the headers, so the width of the table will be bigger than the container div.
You can set, overflow: hidden; to cut the overflowing parts, or overflow: auto; to create a scrollbar, but without them it's the correct rendering.
There are two solutions.
i) IF you want to STRICTLY contain table WITHIN div then overflow:auto; is the way to go.
ii) BUT if you change your mind and want to WRAP div to the width of table then.
display:table; is the way to go.
Generally its bad idea to contain wider element within explicitly known less wider element.
Try using overflow:auto; in the css of the div.
You can't just expect it to somehow fit within a div of any size you wish. What you can do is, at least allow the browser to scroll (overflow: scroll) it using:
div.divano{
width:200px !important;
border:2px solid yellow;
background:#eaeaea;
height:200px;
overflow: scroll;
}
You may also use oveflow: hidden, but it would just hide the parts that are not visible. Also, overflow: scroll, will always show a scroll bar (with or without clipping). You can use overflow: auto to specify that the content should be scrolled only if clipping occurs.
i have a parent div, which can change its size, depending on the available space. Within that div, i have floating divs. Now, i would like to have spacing between these divs, but no space to the parent div (see drawing).
Is there a way to do this with CSS?
Thank you
I found a solution, which at least helps in my situation, it probably is not suitable for other situations:
I give all my green child divs a complete margin:
margin: 10px;
And for the surrounding yellow parent div i set a negative margin:
margin: -10px;
I also had to remove any explicit width or height setting for the yellow parent div, otherwise it did not work.
This way, in absolute terms, the child divs are correctly aligned, although the parent yellow div obviously is set off, which in my case is OK, because it will not be visible.
You can do the following:
Assuming your container div has a class "yellow".
.yellow div {
// Apply margin to every child in this container
margin: 10px;
}
.yellow div:first-child, .yellow div:nth-child(3n+1) {
// Remove the margin on the left side on the very first and then every fourth element (for example)
margin-left: 0;
}
.yellow div:last-child {
// Remove the right side margin on the last element
margin-right: 0;
}
The number 3n+1 equals every fourth element outputted and will clearly only work if you know how many will be displayed in a row, but it should illustrate the example. More details regarding nth-child here.
Note: For :first-child to work in IE8 and earlier, a <!DOCTYPE> must be declared.
Note2: The :nth-child() selector is supported in all major browsers, except IE8 and earlier.
Add margin to your div style
margin:0 10px 10px 0;
http://www.w3schools.com/css/css_margin.asp
I'm late to the party but... I've had a similar situation come up and I discovered padding-right (and bottom, top, left too, of course). From the way I understand its definition, it puts a padding area inside the inner div so there's no need to add a negative margin on the parent as you did with a margin.
padding-right: 10px;
This did the trick for me!
Is it not just a case of applying an appropriate class to each div?
For example:
.firstRowDiv { margin:0px 10px 10px 0px; }
.secondRowDiv { margin:0px 10px 0px 0px; }
This depends on if you know in advance which div to apply which class to.
A litte late answer.
If you want to use a grid like this, you should have a look at Bootstrap, It's relatively easy to install, and it gives you exactly what you are looking for, all wrapped in nice and simple html/css + it works easily for making websites responsive.
I have a gridview that has some 20 columns and 1000 rows. The grid is placed under <div> tag. Due to such large figures, the div shows the vertical scrollbars, which is fine but it doesn't show the horizontal scrollbar.
The css written for div is as;
.divCSS{
display:block;
position:relative;
width: auto;
height: 5em;
margin:0;
padding:5px;
background:inherit;
color:inherit;
overflow:auto;
}
The entire <div> code is as below;
<div id="divGrid" align="left" style="border: solid 1px gray; width: 790px; height: 420px;" class="divCSS">
Despite giving overflow:auto, why i don't see a horizontal scrollbar?
If you have a fixed with and have set your overflow to auto then, to quote the W3C:
The behavior of the 'auto' value is user agent-dependent, but should
cause a scrolling mechanism to be provided for overflowing boxes.
In other words, your scroll behaviour may vary depending on the browser. Given you've defined both a fixed height and width, your browser will wrap your text so that it doesn't impact adjacent elements and does the minimum to ensure it merely supports a visible scrolling mechanism to display such that users could access the clipped content.
If you want to see the horizontal scroll bars, you need to include content length that cannot wrap and exceeds your specified element width, such as an image or by specifying white-space: nowrap on one of your contained elements (e.g. a paragraph).
Have a look at this example for an illustration of how it works.
Give the width of the div specific and set overflow-x:visible;
REmove
width: auto;
height: 5em;
from your divCSS class
and for scroll to apper you need content width more than 790px and hight more than 420px.
try
{
overflow-x:scroll;
overflow-y:scroll;
}