I have a situation where the 'bar' div, display some information about the 'foo' element, when the 'foo' element is hovered. But the scroll bar conflict with that, and hide the rest of my div. Can I get it to display the full 'bar' div somehow?
HTML
<div class="box">
<div class="foo">
xxx
<div class="bar">Info text, info text</div>
</div>
</div>
CSS
.box {
height: 80px;
width: 80px;
background: blue;
position: absolute;
overflow-y: scroll;
overflow-x: hidden;
}
.foo {
float: left;
background: red;
height: 50px;
width: 50px;
position: relative;
}
.bar {
float: left;
height: 20px;
width: 125px;
background: orange;
position: relative;
top: -10px;
right: -30px;
display: none;
}
.foo:hover > .bar {
display: block;
}
You could set the .bar div to position:fixed
JSfiddle Demo
CSS
.box {
height: 80px;
width: 80px;
background: blue;
position: absolute;
overflow-y: scroll;
overflow-x: hidden;
}
.foo {
float: left;
background: red;
height: 50px;
width: 50px;
}
.bar {
height: 20px;
width: 125px;
background: orange;
position: fixed;
display: none;
}
.foo:hover > .bar {
display: block;
}
Related
I wasn't sure of the best way to explain this, but if you look at the example snippet in Chrome or Safari, the orange div does not cause the document to scroll horizontally when the window is narrower than the blue container. This is the desired behavior.
However, in Firefox, if you make the window narrow it counts the orange box as content that needs to be able to be scrolled to, causing the document to scroll to the right in an odd way that shifts the body content to the left and is ugly. What's also strange is that you'll notice the green box on the left DOESN'T cause it to have scrollable space to the left...is this a bug, or why is this happening?
Anyone else encountered this?
* {
box-sizing: border-box;
}
.wrapper {
max-width: 700px;
height: 200px;
margin: 0 auto;
}
.banner {
width: 100%;
height: 100%;
padding: 10px;
background-color: blue;
position: relative;
transform: scale(1);
color: #ffffff;
}
.banner:before, .banner:after {
content: '';
width: 100px;
height: 100%;
position: fixed;
left: -100px;
top: 0;
background-color: green;
}
.banner:after {
left: 100%;
background-color: orange;
}
.content {
width: 100%;
height: 300px;
padding: 10px;
background-color: #f1f1f1;
margin-top: 40px;
}
<div class="wrapper">
<div class="banner">Banner</div>
<div class="content">Content</div>
</div>
You can wrap that in an element that will scale with the viewport and set overflow: hidden on that element. You can also remove the transform: scale() from .banner and use position: absolute on the pseudo elements, unless scale(1) is needed for some reason.
* {
box-sizing: border-box;
}
header {
overflow: hidden;
}
.wrapper {
max-width: 700px;
height: 200px;
margin: 0 auto;
}
.banner {
height: 100%;
padding: 10px;
background-color: blue;
position: relative;
color: #ffffff;
}
.banner:before, .banner:after {
content: '';
width: 100px;
height: 100%;
position: absolute;
left: -100px;
top: 0;
background-color: green;
}
.banner:after {
left: 100%;
background-color: orange;
}
.content {
height: 300px;
padding: 10px;
background-color: #f1f1f1;
margin-top: 40px;
}
<header>
<div class="wrapper">
<div class="banner">Banner</div>
<div class="content">Content</div>
</div>
</header>
I want to control after of box2 when hovering on box1.
I test this code but it didn't work.so...whats the problem?
.box1:hover .box2:after{SOME CSS}
.box1 , .box2 , .box2:after{
width: 100px;
height: 100px;
background-color: #ccc;
margin: 10px;
display: inline-block;
}
.box2:after {
content: 'Box2:after';
position: relative;
display: inline-block;
left: 200px;
top: -30px;
}
.box1:hover ~ .box2:after {
background-color: red
}
<div class="box1">BOX 1:hover my</div>
<div class="box2">Box 2</div>
I have a layout wherein the container has a fixed height and width of 640px x 480px. Inside this container are 3 divs, top, mid and bot. I want this 3 divs to fit inside the container provided that they will not overflow the container. The top and bot div doesn't have fixed height while the mid should fit the space between and push top and bot.
What I've already tried was like this:
HTML
<div class="main">
<div class="top">
</div>
<div class="mid">
<img src="http://upload.wikimedia.org/wikipedia/commons/thumb/b/bf/Chestnut-breasted_Malkoha2.jpg/593px-Chestnut-breasted_Malkoha2.jpg" />
</div>
<div class="bot">
</div>
</div>
CSS
.main {
padding: 10px;
width: 640px;
height: 480px;
display: inline-block;
background: #000;
position: relative;
}
.top {
width: 100%;
height: 50px;
display: block;
background: #eee;
}
.mid {
width: 100%;
height: 100%;
display: block;
background: #333;
}
img {
max-width: 100%;
max-height: 100%;
margin: 0 auto;
display: block;
}
.bot {
width: 100%;
height: 50px;
display: block;
background: #ccc;
}
FIDDLE HERE
Now my problem is the mid push the bot outside the container. How can i make them fit inside the container without using overflow: hidden? Thanks in advance.
NOTE : the image should fit inside the mid container.
UPDATE top and bot div can contain paragraphs so it's not fixed height.
Check this sample:
http://jsfiddle.net/J6QTg/8/
.main {
padding: 50px 0px;
width: 640px;
height: 480px;
display: block;
background: #000;
position: relative;
box-sizing: border-box;
-moz-box-sizing: border-box;
}
.top {
width: 100%;
height: 50px;
display: block;
background: #eee;
position: absolute;
top : 0;
left : 0;
}
.mid {
width: 100%;
height: 100%;
display: block;
background: #333;
}
img {
max-width: 100%;
max-height: 100%;
margin: 0 auto;
display: block;
}
.bot {
width: 100%;
height: 50px;
display: block;
background: #ccc;
position: absolute;
bottom : 0;
left : 0;
}
Update:
It is also possible to use tables, to have more flexible boxes.
http://jsfiddle.net/jslayer/U3EaZ/
HTML:
<div class="box">
<div class="h"> Hello<br/>Cruel<br/>World </div>
<div class="m">
<img src="http://goo.gl/a1smCR" alt="" />
</div>
<div class="b"> Omg </div>
</div>
CSS:
.box {
display: table;
width: 640px;
height: 480px;
background: red;
}
.h, .m, .b {
display: table-row;
}
.h {
background: yellow;
height: 0;
}
.m {
background: green;
}
.m img {
max-width: 100%;
height: 100%;
max-height: 100%;
margin: 0 auto;
display: block;
}
.b {
background: blue;
height: 0;
}
I would use JavaScript/JQuery: FIDDLE
I've used JQuery for simplicity, but it can probably be done with just JavaScript...
var totalheight = eval($('.main').height() - $('.top').outerHeight(true) - $('.bot').outerHeight(true))
$('.mid').outerHeight(totalheight);
Try to set the height of mid based on the container.
.mid {
width: 100%;
height: 383px;
display: block;
background: #333;
}
FIDDLE
If the container has a fixed height and width, then you can set the height to 79.25% like this:
.mid {
max-width: 100%;
height: 79.25%;
display: block;
background: #333;
}
demo
I have a conundrum: I need the darkest-gray bar you see on the bottom right (after opening the below code locally) spanning across as much space as the browser window will allow WITHOUT crossing over the light-gray section I have set up on the left. Here is my code:
<div class="timeline-section">
<div class="timeline-wrapper">
<div class="mini-timline"></div>
<div class="timeline"></div>
<div class="clearfix"></div>
</div>
</div>
CSS:
.clearfix { clear: both; }
.timeline-wrapper { position: relative; }
.timeline-section {
background: #3d3d3d;
bottom: 0px;
height: 276px;
left: 0px;
width: 100%;
position: absolute;
padding: 0px;}
.mini-timline {
background: #474747;
margin: 0px;
float: left;
height: 276px;
width: 500px;
display: inline-block;}
.timeline {
background: #232323;
height: 200px;
width: 60%;
float: left;
display: inline-block;
position: relative;}
One method is not to float the timeline element.
Just set a margin-left for the width of the mini-timeline:
.timeline {
background: #232323;
height: 200px;
margin-left:500px;
position: relative;
color:#FFF;
}
http://jsfiddle.net/rLzAM/1/
Try this:
.timeline {
background: #232323;
height: 200px;
width: 100%;
display: inline-block;
position: absolute;
}
I want to vertical center a text inside a responsive div but I really don't find the way to do it without new CSS3 tricks..
Here a fiddle : http://jsfiddle.net/M8rwn/
.iosSlider {
position: relative;
overflow: hidden;
width: 100%;
height: 100%;
}
/* slider */
.iosSlider .Slider {
width: 100%;
height: 100%;
}
/* slide */
.iosSlider .Slider .Slide {
float: left;
width: 100%;
}
.iosSlider .Slider .Slide img{
width: 100%;
height: auto;
}
.slider-prevContainer {
position: absolute;
top: 0;
left: 10px;
width: 50px;
height: 50%;
color: #595e62;
text-align: center;
}
.slider-nextContainer {
position: absolute;
top: 0;
right: 0;
width: 50px;
height: 100%;
opacity: 1;
color: #595e62;
background: blue;
}
.slider-next {
position:absolute;
height: 50%;
width: 100%;
top: 25%;
text-align: center;
vertical-align: middle;
background: red;
box-sizing: border-box;
font-size: 50px;
}
#single-slider {
float: left;
width: 500px;
height: 500px;
min-width: 0;
margin: 0;
border: none;
background: #000;
}
Okay, I think I have a solution.
Adjusted HTML:
<div class="slider-next">
<div id='slider-next-inner'>
>
</div>
</div>
Added CSS:
#slider-next-inner{
position:relative;
top:50%;
margin-top:-30px;
/* Margin-top is 1/2 the elements height (currently it is 59px) */
}
Link: http://jsfiddle.net/M8rwn/18/