I've a big problem!
You know, a div default width is 100% (of the parent). And if its content width is more than 100% (100%=1440px), div shows content in multiply lines.
Now, if i want, the div shows its content in one line, what should I do? look at the simple code::
<div>
<div>aaa</div>
<div>bbb</div>
<div>ccc</div>
<div>ddd</div>
......(more than 100 other div, with unknown width)
</div>
NOTE: I don't know the content width.
I tried display: inline; and display: inline-block; and display: table;. they didn't work.
NOTE 2: I tried display: -moz-box;. It works, but Only in FIREFOX!
Thanks ...
The simplest way is to use white-space: nowrap on the parent, and display: inline-block on the children:
See: http://jsfiddle.net/4Yv83/
I also added overflow-x: auto, because presumably you don't want this.
Just tell the text inside the div not to wrap.
div {
white-space: nowrap;
}
a few years passed but ... I think it would be better to set overflow to hidden, because we don't need to show all of children elements at once. we use this kind of styling in thumb-slide like components. so I suggest to set "overflow:hidden" to parent element.
/* for parent element */
overflow: hidden;
Related
In this example...
HTML
<body>
<div>
<div>foo bar</div>
</div>
</body>
CSS
body, html, div {
height: 100%;
margin: 0;
}
div div {
display: inline-block;
overflow: hidden;
}
Why does overflow: hidden cause a vertical scrollbar? Additionally, why is this height not attributed to anything on the page? It's like an invisible margin.
The 100% height of all the elements is intentional. In theory, that should cause the inner-most div to expand to meet the viewport. And it does! ...so long as overflow: hidden is not there, Why?
The extra height is the same height as the height difference between vertical-align: baseline, and vertical-align: bottom. The "descender line". That's where the seemingly random "5 extra pixels" comes from. If the font size is 10 times as large, this gap will also be 10 times as large.
Also, it seems that when overflow: hidden is not there, the inline-block element has its baseline as the same baseline of its last line of text.
This leads me to believe that overflow: hidden forces the baseline of the entire inline-block element to be at the bottom of the element. Even though there is no text there, the parent of the inline-block element reserves space for the descender line. In the example given in the question, it cannot be easily seen since the parent of the inline-block element has height: 100%. So, instead, that extra space reserved for the descender line overflows out of that parent div.
Why is this space still there, even though there's no text? I think that's because the inline-block creates an inline formatting context, which is what causes this space. Were this element to be a block, it would only create this inline formatting context once it encounters an inline element or text.
This is just a theory, but it seems to explain it. It also explains why #Jonny Synthetic's answer works: adding overflow: hidden to the parent hides that extra descender line.
Thanks to #Hashem Qolami for the jsbins that gave me this theory.
Adding overflow: hidden to the parent div wasn't an option for me, and also because of my HTML's structure it wasn't working.
However, I noticed thanks to #Tony Gustafsson's comment in the OP that this does fix the problem:
div div {
vertical-align: bottom;
}
Items with a height of 100% need to have overflow: hidden as well. The first css rule only targets the outside div, the overflow hidden is being applied to the inside div.
Jsfiddle with this CSS and it worked fine:
body, html, div {
height: 100%;
margin: 0px;
padding:0px;
overflow: hidden;
}
div div {
display: inline-block;
overflow: hidden;
}
ive got some problem with my css styles:
I have different groups ( <div>'s ) that have subgroups displayed in ONE colum
or MULTIPLE ( max. 3) colums.
The problem i have is, that my vertical-align wont work within float elements with an 100% height.
within the subgroups: ST200 | Überblick... | EN DE should be displayed with vertical-align: middle
Maybe someone could help me.
complete code posted on jfiddle
http://jsfiddle.net/ZAa33/
Andres's comment here seems to address your problem: the line-height of the text is confining it to a smaller area than its container div.
To test, I changed the line-height property on .kursid to 35px, and the ST200 was successfully centered vertically, but only for those divs that had heights of 35px. For a more general solution, you could redesign your code to allow line-height and height to be set explicitly equal on all divs with text you want centered vertically, or you could see the other answers to that question for other options.
Vertical-Align Property works with only inline and inline-block elements. if you float any element, by default that element display property value is changed to block. In your case that is why vertical-alignment is not working on floated element. one solution for your problem is use inline.
[Inline-block demo](http://jsfiddle.net/Mostwanted_cJ/W8nf8)
Your JSFiddle is edited.
change all of your span to div and apply display:inline-block and vertical-align:middle
Inline-block demo
i found a solution to my Question that works pretty nice ;)
i just needed to set:
.kurs {
border-radius: 15px 15px 15px 15px;
background-color: #c5c5c5;
width: 100%;
min-height: 35px;
margin-bottom: 10px;
display: flex;
! display: -webkit-flex; <- remove
! display: -moz-box; <- remove
align-items: center; <- add
justify-content: center; <- add
}
The updated fiddle ;)
http://jsfiddle.net/ZAa33/9/
I have an option box filled with options, like this:
<div class="OptionBox">
<div class="Option">
<div class="AddRemoveIcon"></div>
<img src="images/users/user_1000000002.jpg">
<span class="Label">Student Name<span class="SubLabel">Student</span></span>
</div>
<div class="Option">...</div>
</div>
Styles are like this:
.OptionBox{
overflow: auto;
max-height: 200px;
max-width:300px;
display: inline-block;
}
.Option {
display: block;
}
.Option .AddRemoveIcon,
.Option img,
.Option .Label {
display: inline-block;
vertical-align: middle;
margin-right: 5px;
}
I'm using inline-blocks because I like the vertical-align:middle, and the SubLabel span is not always present... But this problem occurs for float:left also...
My problem is when I have enough Options in the Option box to cause overflow-y. For whatever reason, the browsers size things correctly (ie, figure the width of each option and adjust the option box width accordingly), then add scrollbars. The result is that the widest options have their Label div bumped down a line because the scrollbars have removed X pixels from the Option box's width. When I switch to float:left for the children of an Option, the Label div wraps based on the scrollbars. In either case, the .OptionBox is never pushed to an optimum width for the widest option. The wrapping should only happen when the max-width is reached, right? Here's a fiddle of it.
What I'm after - and I'm sure I'm asking for the moon - is either a way to reposition scrollbars so they don't take away from the width of the OptionBox, or some magic CSS rule, which tells the browser to consider the scrollbars when sizing (kind of like how box-sizing:border-box tells the browser to consider padding/borders when setting the width of an element).
Any thoughts? Thanks in advance!
You should be able to fix this by setting your outer-most div to be overflow: hidden. That way you won't get the y-overflow and the scrollbar will not appear.
I'm pretty sure I saw some css to keep the scrollbar from coming up without this, but can't find it atm.
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.