not sure what i'm missing, but here ti go's:
i have a floating left div with a child div that is positioned absolutely to the bottom, but the text in the child div breaks twice:
<div class="imgDes"><p class="toBot">this is a test</p></div>
css
.imgDes {
float:left;
position:relative;
height: 100px;
}
.toBot {
position: absolute;
bottom: 0px;
}
here it is in action: http://jsfiddle.net/rz5Q8/
how can i keep the text inside from breaking to the next line?
Floating elements need a specified width. Curently "imgDes" has a width of zero. Give it a width and all will be well.
Putting borders on your elements is a good way to see what's going on:
.imgDes {
float:left;
position:relative;
height: 100px;
width:300px;
border:1px solid #000000
}
.toBot {
position: absolute;
bottom: 0px;
border:1px solid #ff0000
}
if you give the .imgDes a width it will work: width: 100%;
One way to debug this type issue is to give the container and the element inside borders of differing color (lime and red for example) - as you see in this instance the length of the text "this" gave it the appearence of a width of that text by default (really a width of 0 of the parent container).
You need to specify a width on the parent element:
.imgDes {
float: left;
position: relative;
height: 100px;
width: 200px;
}
.toBot {
position: absolute;
bottom: 0;
}
Related
I have 3 divs on top of each other having following css.
.d1 {
position: relative;
background-color: yellow;
height: 50px;
width: 100px;
overflow: hidden;
}
.d2 {
position: absolute;
background-color: green;
height: 25px;
width: 50px;
}
.d3 {
position: absolute;
left: 83px;
}
and the divs that have classes are as follows:
<div class="d1">
<div class="d2">
<div class="d3">text</div>
</div>
</div>
and as a result I see content of d3 cut off because of overflow:hidden in d1.
How can I avoid cut off content of d3 without modifying d1?
Getting around the overflow..
An element can overflow from a relative or absolute positioned parent by setting its position to fixed. An element that has position: fixed will have the default left,right,top, and bottom styles set as auto. This will position .d3 to the top-left of .d2, and then the left: 83px style will push it to the left from there.
Making up the additional space..
However, to get that additional movement to the right as the original markup, you will need to add margin-left: 8px, which will make-up the additional ~8px needed to replicate the original. Further adjustments to the position of .d3 will need to be done by setting the margin style (see below).
Your updated code should look like this..
.d1 {
position: relative;
background-color: yellow;
height: 50px;
width: 100px;
overflow: hidden;
}
.d2 {
position: absolute;
background-color: green;
height: 25px;
width: 50px;
}
.d3 {
position: fixed;
margin-left: 8px;
left: 83px;
}
Some considerations and caveats..
As a previous commenter mentioned, best practice would be to fix your html markup because this solution could cause issues if you ever need to move the position of .d3. For example, setting left,right,top, or bottom will cause the default setting of this style, auto, from being unset, and the element will be positioned relative to the viewport rather than the parent relative or absolute element.
How to automatically adjust size of the div which is horizontally centred, using another div which has position: fixed property?
To better understand what I mean please take a look at the picture below. Div A is a fixed div with a fixed size and div B is a div which is horizontally centred. I want div B to resize (when I resize browser window) in a such way so right border of A and left border of B never overlap (ideally, if the distance between the borders kept the same).
I know that this can be fairly easy done using JavaScript by reacting on resize events, but I'm wondering is there any way to achieve this in pure CSS?
Here's another way. This should work in older browsers too.
<style>
div {
border: 1px solid red;
height: 100px; }
#A {
position: fixed;
width: 150px; }
#B {
margin: 0px 155px; }
</style>
<div id="A">Stuff</div>
<div id="B">Stuff</div>
How about this:
#a{
width:200px;
}
#b{
width:calc(100% - 400px);
}
Just set the width of B to be 100% of screen width minus twice the width of A and their borders will touch.
When an element is given the settings position: absolute or position: fixed You can change the width of an element by using the left and right properties.
Simply add the same amount to the right as you would to the left
#left {
position: absolute;
width: 150px;
}
#middle {
position: absolute;
left: 165px;
right: 165px;
overflow: auto;
}
/* For demo purposes */
html, body, div { height: 100%; margin: 0; } div { background: red; } #overflow { height: 200%; }
<div id="left"></div>
<div id="middle">
<div id="overflow"></div>
</div>
I have two images inside a div. I'd like to position these images using percent relatively to the parent div.
Here's a fiddle to understand: http://jsfiddle.net/b9ce626s/
I tried to set position: absolute; on the image but it uses window width.
I need the image on the very right be positioned at 95% of the red div, and not the window. I also don't want the left image impacts the positionning of the right one.
Add position: relative on #main so the position of the images are both based on that element (and not on the root element).
Example: http://jsfiddle.net/b9ce626s/1/
A page element with relative positioning gives you the control to absolutely position children elements inside of it.
https://css-tricks.com/absolute-positioning-inside-relative-positioning/
As a side note, if you assign a width with a percentage value to the images, it will be now based on the parent element width.
Try this..
Html
<div id="main">
<img id="card1" src="http://dynamic-projets.fr/wp-content/uploads/2012/08/attach_image.png" alt="KH" />
<img id="card2" src="http://www.rotaryd1650.org/images/main/IconesCollectionPro/128x128/image_gimp.png" alt="9H" />
</div>
Css
body, html {
width: 100%;
height: 100%;
margin: 0;
}
#main {
display: block;
width: 50%;
height: 50%;
background-color: red;
position:relative;
}
img {
position: absolute;
width: 5%;
}
#card1 {
left:5%;
}
#card2 {
right: 5%;
}
Fiddle Sample
#main {
display: block;
width: 50%;
height: 50%;
background-color: red;
position: relative;
}
Give main position: relative; like so:
#main {
display: block;
width: 50%;
height: 50%;
background-color: red;
position:relative;
}
This keyword lays out all elements as though the element were not positioned, and then adjust the element's position, without changing layout (and thus leaving a gap for the element where it would have been had it not been positioned). The effect of position:relative on table-*-group, table-row, table-column, table-cell, and table-caption elements is undefined.
JSFiddle Demo
I am trying to overlap the div2 over div1
http://jsfiddle.net/user1212/QsLVB/
<div id="div1"></div>
<div id="div2"></div>
#div1{
width: 200px;
height: 200px;
background-color: olive;
float: right;
position: relative;
z-index: 1;
}
#div2{
width:100px;
height: 100px;
background-color: orange;
float: right;
position: relative;
z-index: 2;
}
I need both to float to the right.
There's a number of ways you could get them to overlap.
First example http://jsfiddle.net/QsLVB/3/
Use negative margins.
#div2{
margin: 20px -100px 0 0;
}
Second example http://jsfiddle.net/QsLVB/4/
Just make the div a child of the other one. In this case z-index will not do anything, since the child will always be shown above the parent.
<div id="div1">
<div id="div2"></div>
</div>
Also, you can go other routes and use position: absolute instead and like top/right values, etc.
#div1{
width: 200px;
height: 200px;
background-color: olive;
position: absolute;
z-index: 1;
right: 0;
}
#div2{
width:100px;
height: 100px;
background-color: orange;
position: absolute;
z-index: 2;
right: 0;
}
Actually you don't need negative margins or anything like that - you can just modify your existing css to solve the problem. I ran it using my code and it works great. This is the solution I would choose in your case.
Firstly to layer anything you need to use position: absolute or position: fixed (which work similarly for our needs here).
Secondly, once using position absolute (or fixed) you can choose to position one or more edges of each div using top: right: bottom: and left:. You don't need any of them, but providing at least one will guarantee that that edge will appear at that pixel position within it's containing div.
Assuming you place these two divs within the body tag or at least don't need them to be further right than their outer containing div, you can set "right: 0;" for each div and they will work similarly to float: right for relative positioned divs (As in your original code), but since they are absolute positioned they can occupy the same space.
Then use z-index to control which one appears on top of the other.
cheers :-D
You could also set the left or right property of div2
DEMO using left
#div2 {
...
left: 200px;
}
Or instead of using float:right, use position:absolute in conjunction with right
DEMO
#div1, #div2 {
/* float: right; // removed */
position: absolute; /* changed from relative */
right: 0; /* added */
}
This is easy to accomplish if you put div2 inside div1, giving div2 an absolute position and right: 0 while its parent, div1, has a relative position.
See it in action here: http://jsfiddle.net/heGJt/
Here's the simplified CSS:
#div1 {
position: relative;
width: 200px;
height: 200px;
background-color: olive;
float: right;
}
#div2 {
width:100px;
height: 100px;
background-color: orange;
position: absolute;
right: 0;
}
And the HTML:
<div id="div1">
<div id="div2"></div>
</div>
I have the following HTML:
<div id="contents">
<div id="inner">Inner Div</div>
</div>
<div id="footer">Footer</div>
Applying the following CSS:
#contents {
position: relative;
}
#inner {
position: absolute;
background-color: green;
width: 100%;
}
#footer {
background-color: red;
}
Problem is that the #footer gets collapsed and under the #contents. You can check here on jsfiddle also http://jsfiddle.net/MAhmadZ/YkJMH/1/
Note: This is just an abstract from a larger page. I have no option but to use position properties. I have multiple div inside #contents all absolutely positions and only 1 will be showed at a time. I can't be sure of the height
Your #contents element is empty after #inner is taken out of the flow by absolute positioning, so it has zero height and as a result #footer collapses under it.
If you give #contents a height or some vertical padding, it should prevent #footer from sliding underneath your absolutely-positioned element.
This should fix it:
#contents {
position: relative;
}
#inner {
position: absolute;
background-color: green;
width: 100%;
}
#footer {
background-color: red;
position: absolute;
width: 100%;
bottom: 0;
}
Your problem is #inner is positioned absolutely. This makes it invisible to the STATIC formatting of HTML layout.
Not quite sure what you want to achieve, but you can set the footer to use position: fixed and bottom: 0px to keep it at the bottom of the page.
I have myself come up with the following solution:
#footer:before {
content: '.';
display: block;
width: 100%;
}
Check it live: http://jsfiddle.net/MAhmadZ/YkJMH/5/