Black div is a fixed-height container. Blue div should be in the top right corner. Green text must respect the blue div, but also should be aligned to the bottom of the black div. Is that possible?
Try this:
.green-txt
{
clear:both;
}
Related
I have a form with a set of divs that act as rows in a table.
Each row div has a set subordinate divs
Outer
...Left
...Right
.....Top
.....Bottom
A span in the Top div interferes with a span in the Bottom div.
==> the span in the Top div causes the span in the bottom div
to be displaced to the right. When I turn off "float:left" for the Top div span, the problem goes away.
Image below shows the HTML, related CSS and results.
You should add a clear:left on your ListRowBottomDiv class like this:
.ListRowBottomDiv {
clear:left;
}
I am coding a two column layout, (980px width in total) which will have the background of each div in the columns expanding all the way to left/right side, see screenshot.
So on the left I have a blue div with width: 49%, inside it is div with text, which should expand to 470px (to keep the text aligned in overall max-width: 980px div), and scale down when the viewport is getting smaller (screenshot).
Is there a way of keeping the div expanded like on the screenshots from photoshop but also aligned right in the parent, blue div? What I am getting with float:right and max-width: 470px is this :(
So basically, you want to right-align your div inside the blue div.
Use this :
HTML
<div id="someid">
<p>Some text here</p>
</div>
CSS:
#someid {
margin-left : auto;
margin-right : 0;
}
Okay so I have three divs, red, green and black stacked one below the other. When I hover on the slider class, I want the green and black div to slide up on hover. But I don't want the green div to hide behind the red div on hover(like it currently does), instead, it should overlay on top of the red div.
i.e on hover the red, green, and black divs should be visible, with the green div covering a part of the red div.
I've tried using absolute positioning together with z-index, but it doesn't seemt to work!
I've put the html, css and javascript in a jsfiddle: http://jsfiddle.net/8Qsp8/
Problem is not with the positioning. You are using slide function of jQuery. It does not actually pushes your div upwords. It diminishes it from bottom to top. So your green div is not actually moving below your red div. It is vanishing from bottom to top.
Here is what you want: http://jsfiddle.net/8Qsp8/5/
Animated version: http://jsfiddle.net/8Qsp8/13/
You need this jQuery:
$("#slider").mouseover(function () {
$(".slide2").stop().animate({bottom: '100px'});
});
$("#slider").mouseout(function () {
$(".slide2").stop().animate({bottom:'-100px'});
});
I have simple HTML and CSS as following. I notice the bottom margin collapse between .outside box and .inside box. I don't understand why i can't see the background image when bottom margin collapse, background image should nothing about margin.
Thanks :)
<div class="outside">
<div class="inside"> content </div>
</div>
.outside {background:url(http://blurfun.com/temp/images/bottom.png) left bottom no-repeat; padding-top:1px;}
.inside { background:#00CCFF; margin:0 0 10px 0; padding:0 0 20px 0;}
You are experimenting vertical margin collapse between your nested divs
Include this overflow property (any value not equal to visible will do the job), and it will work ok
.outside {
background:#ff0000 url(http://blurfun.com/temp/images/bottom.png) left bottom no-repeat;
padding-top:1px;
overflow:hidden;
}
The red color was added only to test the result. Of course you can wiped.
Detailed comment
Your outside div uses a sort of yellow strip at its left bottom.
Your inside div has a bottom margin of 10 px and as there is nothing in between this margin and the outside div bottom margin. Thats why they are collapsing.
You could prevent this to happen including a bottom padding or even a bottom border to outside div. But this would change your design intentions.
That is why I suggested using the overflow property which also prevents the vertical margin collapse and does not interfere with your design.
In this fiddle I added a left margin to the inside div and a red background to the outside div.
For didactic porpouse I also included a transparent background to the inside div.
Vertical Margins collapsing
Prevented by overflow:hidden
Play with it. Delete the overflow property and watch vertical margins collapsing.
I hope is clear enough for you.
Have a good day and enjoy your coding :-)
HTML:
<div> <p></p> </div>
CSS:
div { background-color:green; border-top:1px solid white; }
p { background-color:yellow; height:50px; margin:70px; }
Demo: http://www.jsfiddle.net/Xy8QF/4/
Why is the area above the yellow paragraph green, and the area bellow it white?
btw I already figured this out, but I thought I'll post this anyway. Consider it a riddle :)
Update: Just to add to the accepted answer:
Only vertical margins collapse
The margins will not collapse if the outer element (in this case the DIV) has a padding or border
This happens because the margins of two block elements with position:static (the default) collapse as per CSS 2.1 8.3.1, i.e. the margin is "carried over" to the body element. This demo shows it does not happen with absolutely positioned elements, one of the exceptions (along with a non-none border) listed in the aforementioned standard.
Good question. :) You can solve it by giving the div a bottom border, or if you don't want to, by giving it a height of 100%. ;-)
The area above the yellow paragraph as you put it, is not actually above it. The green div contains the yellow paragraph. The yellow paragraph has a margin of 70px, pushing away from the green edges of its container. The yellow paragraph has a height set to it, hence we cannot see the yellow pushing away from the green on the bottom edge.
It's because the <p> is right against the bottom of the enclosing <div>. Since there's nothing constraining the height of the <div>, the rendering gives just enough space to fit down to the bottom of the <p>. Any explicit height > 50px will show the bottom.
Yup, on the update, exactly. The box expands vertically, but not horizonally. Also, padding puts space on the inside of the box, so the p can't push right up against the bounds.
Read up on the CSS box model, for example here:
http://www.w3schools.com/css/css_boxmodel.asp
and here: http://www.w3.org/TR/CSS21/box.html