So I have this strange problem, I have two div on one line (display:inline-block) and the first div appears on hover in a sliding effect. For this animation I need to set overflow:hidden, but it seems to break the my page.
I made a demo on JSFiddle
Have you ever face this problem ?
Thank you
NOTE: IE8+ compatible hints or solutions would be a huge plus
Code
HTML
<div class="container">
<div class="hello NoOverflow">Hello</div><div class="textWrapper">mytext</div>
</div>
<br>
<div class="container">
<div class="hello">Hello</div><div class="textWrapper">mytext</div>
</div>
CSS
.container {
background: #000;
color: #FFF;
}
.hello {
display: inline-block;
width: 40px;
background: #F00;
}
.textWrapper {
display: inline-block;
background: #090;
}
.NoOverflow {
overflow: hidden;
}
EDIT
For those who want the hover animation : JSFiddle Updated
You will see my problem by hovering the 2nd container (the JQuery "animate" call add a "overflow: hidden" property)
You need to specify vertical-align: top for your inline-block child elements.
When you specify overflow: hidden, you are triggering a new block formatting context, and its bottom edge will align with the baseline of the following inline element.
See demo: http://jsfiddle.net/audetwebdesign/7SZkN/
The relevant CSS to modify is:
.NoOverflow {
overflow: hidden;
vertical-align: top;
}
There is pretty much CSS2 so it should work fine in IE8+ (any browser that supports inline blocks).
Have you tried to float them left.
.container {
background: #000;
color: #FFF;
}
.hello {
/*display: inline-block;*/
float:left;
width: 40px;
background: #F00;
}
.textWrapper {
/*display: inline-block;*/
float:left;
background: #090;
}
.NoOverflow {
overflow: hidden;
}
Related
I'm struggling with a problem which seems simple:
My code:
* {
font-family: tahoma;
}
body {
background: #333;
}
.wrapper {
padding: 10px;
background: white;
width: 100%;
}
.box {
margin-top: 40px;
width: 1100px;
height: 400px;
background: #aaa;
}
<div class="wrapper">
<div class="box">
box
</div>
</div>
The box contained in the wrapper has a fixed size, which might overflow the wrapper on small screens. Why doesn't the wrapper wrap around the box? How would I do that?
You can also check out the issue in this jsFiddle.
In order to make this work:
Remove width: 100% and add to the wrapper display: inline-block.
Doing so, will enable the wrapper to have as much width as needed to wrap around the box. Putting width: 100% restricts your wrapper to the width of the screen and in case of the box having a bigger with than that of the screen, it won't work.
If you do not want to have a horizontal scrollbar, especially on narrower screens use: box-sizing: border-box on the wrapper.
CSS:
.wrapper {
display: inline-block; /* Ensures that the box stays wrapped */
padding: 10px;
background: white;
box-sizing: border-box; /* Ensures that there won't be a horizontal scrollbar */
}
Here is a working version of your jsFiddle, with both the wrapping issue mended and the horizontal scrollbar abolished.
* {
font-family: tahoma;
}
body {
background: #333;
}
.wrapper {
box-sizing: border-box display: inline-block;
padding: 10px;
background: white;
}
.box {
position: relative;
margin-top: 40px;
height: 400px;
background: #aaa;
}
<div class="wrapper">
<div class="box">
box
</div>
</div>
For reference:
display: inline-block;
box-sizing: border-box;
Use display:inline-block on the wrapper to resize the container based on the content inside.
The div element by default has display:block; so you need to change its display.
You should remove width:100%; from .wrapper class, then you can make it display:inline-block; or display:table;
*{
font-family:tahoma;
}
body{
background:#333;
}
.wrapper
{
padding:10px;
background:white;
display:inline-block;
}
.box
{
margin-top:40px;
width:1100px;
height:400px;
background:#aaa;
}
<div class="wrapper">
<div class="box">
box
</div>
</div>
Your problem occurs, because HTML documents, by default, display all elements as display: block.
There are two ways to do it as our friends have mentioned before.
First one is to use inline-block value for the display property:
body{
display: inline-block;
}
The second way is to use max-width:
div.wrapper{
max-width: 100%;
/*we have set height property to auto to have coefficient between width & height*/
height: auto;
}
For more information visit these webpages:
inline-block
max-width
You can solve the problem by using the following css:
* {
font-family: tahoma;
}
body {
background: #333;
}
.wrapper {
padding: 10px;
background: white;
display: inline-block;
}
.box {
margin-top: 40px;
width: 1100px;
height: 400px;
background: #aaa;
}
<div class="wrapper">
<div class="box">
box
</div>
</div>
The only change is I have added display: inline-block to .wrapper element.
Why wrapper doesn't wrap around the child div
The problem is all html element has some default CSS styling which gets applied by the browser.
In this case div gets a default property of display: block; It is the same property that makes a default unstyled div to take up full available width of it's parent element.
As you can see with this: snapshot of chrome dev tools
*The css style highlighted in red rectangle is the default styling applied by the browser.
*The red underlined text tells us about the width of the element. The fading out signifies that value of that property is computed by the browser.
** While we are at it I want to point you to a different problem that you might have faced with the previous code and if the goal was to make the wrapper to wrap box at all times.
If the .box div would have width far less than that of the width of the browser then another problem may arise which I have shown in the code snippet bellow.
* {
font-family: tahoma;
}
body {
background: #333;
}
.wrapper {
padding: 10px;
background: white;
}
.box {
margin-top: 40px;
width: 100px;
height: 400px;
background: #aaa;
}
<div class="wrapper">
<div class="box">
box
</div>
</div>
As you can see the box tries to cling to a side of wrapper.
You can read more about display css property here: CSS display property || CSS-Tricks
Alright, this one should be pretty easy for you front-end guys out there. I have the styled purple link all set to go. I'm just having trouble getting the vertical line to look OK. Assume the line is 1px #000 solid
I kind-of got it working making a div w/ a bottom-border and floating the styled link to the right. If I do that, I can't seem to get there to be space between the divider line and the link.
The following involves some extra markup and uses table-cells.
HTML:
<div class="wrapper">
<span class="leader">
<b></b>
</span>
<span class="cell">
<button>Sample Button</button>
</span>
</div>
CSS:
.wrapper {
border: 1px dotted gray;
display: table;
width: 100%;
}
.wrapper .leader, .wrapper .cell {
display: table-cell;
vertical-align: middle;
}
.wrapper .leader {
width: 100%;
padding: 0 10px;
}
.wrapper .leader b {
display: block;
border-bottom: 1px solid red;
}
.wrapper button {
white-space: nowrap;
}
Demo at: http://jsfiddle.net/audetwebdesign/8aSBA/
There are a few advantages to this approach:
You can control the spacing to the left and right of the horizontal line
Vertical alignment is independent of font-size, line-height
You don't need to specify the width of the button
You can use a :before selector in css, though im not sure is compatable in < ie7
.button:before {
background: none repeat scroll 0 0 #000000;
content: "";
float: left;
height: 1px;
margin-top: 12px;
width: 59%;
}
I am trying to display 2 values on the same row and give the one on the right priority to grow (it is a mobile app and needs to detect the width of the screen and "squash" the left cell to be smaller.
Here is my attempt: http://jsfiddle.net/rodneyjoyce/TxBhD/
HTML
<div id="screen">
<div id="leftDesc">This is a Long Description</div>
<div id="rightDesc">1000</div>
</div>
CSS
#screen
{
width: 200px;
}
#leftDesc
{
display: inline-block;
overflow: hidden;
float: left;
height: 20px;
max-width:160px;
color: blue;
}
#rightDesc
{
float: right;
display: inline-block;
text-align: right;
color: red;
}
What should happen: Increase "1000" to "1000 000". Blue text should chop off the end of the word "Description" and the red and blue text should stay on the same line.
Disclaimer: I am not very good at CSS - in XAML I use the * value on width so that a cell auto-grows and shrinks the others.
I do not want to use Javascript or JQuery.
I'm not sure if you can dynamically change the size of your floated elements with CSS based on the content, but part of the problem can be solved with:
Adding to #leftDesc:
text-overflow:ellipsis;
white-space:nowrap;
The white-space property keeps the text on one line; text-overflow should be pretty self-explanatory.
JSFiddle
Use the flexible box layout:
#screen
{
width: 200px;
display: -webkit-flex;
display: -moz-flex;
display: flex;
}
#leftDesc
{
overflow: hidden;
height: 20px;
color: blue;
white-space:nowrap;
}
#rightDesc
{
text-align: right;
color: red;
}
I've removed your floats and your inline-blocks, and added display: flex to get the boxes to behave.
I've also added white-space:nowrap; to make sure the description gets cut off, like you've asked.
I've also removed max-width:160px;, because it didn't appear to have any effect in this scenario.
Keep in mind that this will not work in IE.
I have this code :
.myDiv
{
background-color: blue;
}
.myLink
{
background-color: red;
margin-top: 20px;
}
<div class="myDiv">
<a class="myLink" href="javascript:void(0)">Ciao</a>
</div>
if I increase the margin-top I'd aspect that the div becomes more hight (and the go to the bottom of the div), but in fact this doesnt happens! The same with padding-top (it go out of the div...). It doesnt listen the container!
Why? And how can I fix this trouble?
EDIT
in fact what Id like to do is align an input box and a image, you can see the example here :
<div>
<input type="text" />
<a style="margin-top:10px; margin-left:5px;" href="#">
<img alt="Cerca" src="/private_images/home_button_right.png">
</a>
</div>
Change to:
.myLink
{
background-color: red;
padding-top: 100px;
display: inline-block;
}
or
div {
padding-top: 100px;
}
depending on what you want to achieve.
Based on your update of the question:
Updated Demo fiddle.
CSS:
input,
img {
vertical-align: middle;
}
Or use vertical-align: top; to align the tops.
Do the opposite thing:
.myDiv
{
background-color: blue;
padding-bottom: 20px;
}
.myLink
{
background-color: red;
}
Add display: block; or maybe even better: display: inline-block;. Block elements can have height. Inline elements not.
You might also consider to give the anchor a larger line-height (e.g. line-height: 2em;), but that only works for single-line text.
.myDiv
{
background-color: blue;
}
.myLink
{
background-color: red;
display:list-item;
}
You can use display:list-item; to solve this problem
Having a problem with IE7, here is explanation.
HTML
<a class="item" href="http://google.com">
<div class="itemImg">
<img src="http://img-fotki.yandex.ru/get/4512/vmazann.0/0_52db2_1c3135a9_orig.jpg" alt=""/>
</div>
<h3>Hello World</h3>
</a>
CSS
.item {
color: #140804;
cursor: pointer;
padding: 17px;
position: relative;
text-align: center;
text-decoration: none;
width: 142px;
display:block;}
.item * {
cursor: pointer;}
.itemImg {
background: none repeat scroll 0 0 red;
height: 150px;
line-height: 150px;
margin-bottom: 10px;
overflow: hidden;
text-align: center;
vertical-align: middle;}
.itemImg img {
vertical-align: middle;}
Result
http://jsfiddle.net/qjSpS/11/
Problem
In IE7 image is unclickable
My thoughts on problem
It seems that problem is related somehow with hasLayout property setting on .itemImg. If I remove properties that trigger hasLayout (height: 150px; and overflow: hidden;) then image will be clickable
Question
Is there any way to solve this problem? height: 150px; and overflow: hidden; are required properties.
It may be that in IE you can not wrap an inline element <a> around block level elements <div> or <h3>.
Most browser will ignore it and act how you'd expect, but IE is pretty strict on the matter.
THis is how i solved this problem..instead of:
<a><div><img></div></a>
i did this:
<div><div style=background:url(img.jpg);width:10px;height:10px;></div></div>
worked like a charm.
Have you noticed that with the image the red border around the edge is clickable?
I think the div is the cause of the problem.
can you do away with the div?
I tweaked your example to show how it might work without the div:
http://jsfiddle.net/qjSpS/10/
EDIT
had another go: http://jsfiddle.net/qjSpS/14/
Not completely happy but it has made all the elements clickable.
if ($.browser.msie && parseInt($.browser.version, 10) === 7) {
$('.itemImg').click(function () {
$(window.location).attr('href', $(this).parent('a').attr('href'));
});
}