I'm not sure if that title made sense but I'll try to explain to the best of my ability.
I want to add a div basically on top of an image, which is simple. I wrap the image around a div and then give things like top:, left:, from that.
Yet this div that the image is inside of exceeds the border of the actual image and goes all the way out to the parent div. How do I make it so that the border of the div just wraps around the actual image inside the div.
The black square is an image. But the div with the class of image, does not have a border that wraps around the image.
<div id="page">
<div class="image">
<img src="http://upload.wikimedia.org/wikipedia/commons/8/85/Black_300.jpg">
<div class="innerimage"></div>
</div>
</div>
Add display: inline-block to the .image div:
display: inline-block;
http://jsfiddle.net/wwRhB/4/
Related
I have a problem about bottom alignment of a div and I don't find any solutions.
All div are contained in a main div, one is left floated and all other must be place on the right of it;
Just one of them it must be bottom aligned, but trying with position absolute and bottom tag it's placed over the floated one.
CSS:
#container {width:730px;position: relative;min-height:120px;}
#image_box {width:220px; float:left; padding-right:10px;background:#222;color:#FFF;}
#box_dx1 {width:500px;background:#666;}
#box_dx2 {width:500px;padding-top:10px;background:#999;}
#box_dx3 {width:500px;padding-top:10px;background:#CCC;}
HTML:
<div id="container">
<div id="image_box">Box Sx Image <br>Row<br>Row<br>Row<br>Row<br>Row<br>Row</div>
<div id="box_dx1">Box Dx Title</div>
<div id="box_dx2">Box Dx Description</div>
<div id="box_dx3">Box Dx Param</div>
</div>
Moreover div's heights are variable, image_box is optional(cannot exist) and text of box_dx2 could wrap under the image_box.
Any ideas?
Thanks!
If the height of box_dx1, box_dx3 and image-box is always going to be same, you could just set a min-height for box_dx2. That way, if you add more content to box_dx2 it will eventually become taller than the image and text will wrap around it. In your example it would be something like:
#box_dx2 {
width: 500px;
padding-top:10px;
background:#999;
min-height: 70px;
}
jsFiddle
However, if the height of those boxes isn't fixed, maybe the easist thing is to calculate the min-height using some jQuery.
I have a div inside another div which has a fixed position at the bottom of the page. I need the outer div to scroll all the way past the inner div allowing all the content to be shown.
.outer{position:relative; }
.inner{position:fixed; bottom:0; z-index:999;}
<div class="outer">
<p>Lots of content......</p>
<div class="inner">
<p>More content fixed in a box at the bottom of the page.....</p>
</div>
<div>
Maybe this well help describe it better- http://jsfiddle.net/winchendonsprings/dDgjQ/2/
What I need in this example is the yellow text to scroll all the way to the top of the red box.
You just need to add some padding to the bottom of the div.outer and adjust as necessary for the size of the red div.
In this instance, I did padding-bottom:100px;
http://jsfiddle.net/jasongennaro/dDgjQ/3/
EDIT
To respond to your comment re div.inner not appearing on each page, you could do the following with jQuery:
$('.inner').parent().css('paddingBottom','100px');
Here it is applied:
http://jsfiddle.net/jasongennaro/dDgjQ/4/
And here it is with the div.inner removed:
http://jsfiddle.net/jasongennaro/dDgjQ/5/
EDIT 2
You could also create another class and only add it to that page.
http://jsfiddle.net/jasongennaro/dDgjQ/6/
I have a div that contains a smaller div with some text. The container div has a webkit transition that moves it off the screen. I want the smaller div to move with it, until it gets to the edge of the page, then remain fixed, almost as if it gets 'stuck' on the side of the page, while the container div continues to move underneath it out of sight. Can this be done?
//CSS
.move{
-webkit-transition-property:left;
-webkit-transition-timing-function:ease-in-out;
-webkit-transition-duration:1s;
left:-200px;
}
//HTML
<div onclick="this.className='move'">
<div>
some text here
</div>
</div>
Here's an example for you: http://jsfiddle.net/LjjRM/
A couple points:
1.) jQuery
2.) position: absolute
So I have a small div for the border, and three divs inside (see image at end). Green is full size (minus padding etc); Blue should float left and have specific width; Red should float right and also have a specific width. However I'm messing something up. Both of the blue and red divs float outside the main div. What am I doing wrong here?
Here's my current code:
<div style="border: 2px solid black; width: 630px;">
<div style="width:auto;">Lorem ipsum</div>
<div style="width:150px; float:left;">This is the blue box</div>
<div style="width:150px; float:right;">This is the red box</div>
</div>
Ideal Float http://www.mfrl.org/images/howtofloat.png
Positioning of floats is funny. Basically, the main div is not taking into account the height of the floated elements when figuring out its own height. The easiest way to resolve this is to add a clearing element after the floated elements.
This fiddle should explain itself clearly: http://jsfiddle.net/QQxb3/2/
I think that the folks who commented on your post saying that it does work must have misunderstood what you mean by "main div", because specification, which Chrome does follow and IE follows in this particular instance, would place the floated elements outside of its parent div.
Hallo I have a Floating Div problem, that I can't understand.
If i write a div with float:left property and an Image tag, both are displayed in a line.
e.g
<div style="background-image:url(calendar_container_bg.gif);background-repeat:repeat-x;width:670px;height:253px;border:1px solid #8E9EAB">
<div style="height:36px">
<div style="float:left;color:#01389F;font:bold 14px Arial;padding-left:20px;line-height:36px;width:614px;">
Frühestes Anreisedatum.
</div>
<img src="calendar_close_btn.gif" style="padding-top:10px">
<div style="clear:left"></div>
</div>
</div>
But as I repleace the image tag with a DIV having the same image as background-image, then both DIV will be displayed on 2 different line. I don't want to use float:left again in second DIV.
img is an inline element (like text or span), so it goes on the same line as any other inline elements (which move to the right if you float a block element to the left).
div is a block element, i.e. each div gets its own vertical space. The only ways to get two divs in one line is:
float them
Make them display: inline