I have this code:
<div style="border:1px solid #afafaf;background-color:#efefef;width:100px;height:14px;">
<div style="text-align:center;width:50px;height:14px;background-color:green;">
50%
</div>
</div>
How can i put the 50% in the middle if the 1st DIV , the 2nd div might have width of 0 to 100 px (progress bar)
Live Demo
I added position: relative to your outer div.
I added a new text div, which is absolutely positioned over the progress bar.
See http://css-tricks.com/absolute-positioning-inside-relative-positioning/
Whatever width your progress bar has, it won't affect the text div.
HTML:
<div style="border:1px solid #afafaf;background-color:#efefef;width:100px;height:14px;position:relative">
<div style="text-align:center;width:50px;height:14px;background-color:green;"></div>
<div id="text">50%</div>
</div>
CSS:
#text {
position: absolute;
width: 100%;
top: 0;
left: 0;
text-align: center
}
For example have a third div with margin-left:auto;margin-right:auto which centers this div into the middle
Related
I have a responsive background image in a div. And i want a two column flex layout on top of it, in which the left layout have image of height 100% of the parent div with width auto scale like responsive image. and the right part is a two line text centering in the flex.
This is the closest i can get so far. But the flex does not stretch to fit the background div image and the left image does not scale accordingly when browser resize.
Note: None of the width and height in px should be specified in the code
.parent {
display: flex;
align-items: center;
}
.left {
height: 100%;
}
.right {
flex: 1;
background: blue;
}
<div style="position: relative;">
<img src="https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcTkyfCkzwQ7Lx4v3YRNao0lQgM-VkEj6iLWTHE8KqHF5tk4cl15WQ" style="width: 100%">
<div style="position: absolute; top: 0; bottom: 0; left: 0; right: 0;">
<div class="parent">
<div class="left">
<img src="https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcRsxhzGxiYQU_vp2YlN1LTMxQsYMhFDqTZLwfqMylCwqIahCu00Mf_0aDQ">
</div>
<div class="right">
<p>
123
</p>
<p>
456
</p>
</div>
</div>
</div>
</div>
Expectation:
Remove
align-items: center;
from the parent div.
If you want to center align the text elements, use padding or position: relative/position: absolute
Then apply
height: 100%; to the image.
I have a container which contains a top region and a bottom region. The top region contains two additional divs which (later on) will contain dynamic content. The bottom is a absolute positioned div, which ALWAYS should be positioned in the bottom, no matter how much content the top section contains, the bottom should be pushed down. For some reason I dont know, it fails. Can someone help me out?
My HTML looks something like this:
<div class="container">
<div class="top">
<div class="left">
<h3>
some left header
</h3>
<p>
some left text
</p>
</div>
<div class="right">
<h3>
some right header
</h3>
<p>
some right text
</p>
<p>
some right text
</p>
</div>
</div>
<div class="bottom">
<p>
some bottom text
</p>
<p>
more bottom text
</p>
</div>
and my CSS:
.container {
position: relative;
border: 1px solid black;
min-height: 255px
}
.top {
display: flex;
border: 1px solid black;
}
.left {
float: left;
border: 1px solid red;
}
.right {
float: right;
border: 1px solid green;
}
.bottom {
position: absolute; // here the issue appears
bottom: 0; // here too
}
I have a JSFiddle how it should look like or what I want to achieve
Additionally I have a JSFiddle how it looks with the position absolute div.
How about adding the height property with the value 100vh to your container.
height: 100vh;
If you remove the position: relative; from .container the absolute positioned element will remain at the bottom.
I have an image within a parent div. I also want to have some text underneath the image within that parent div, but I only want the width of that text div to be as large as the image.
<div class="parent">
<div class="child">
<div class="image-container">
<img src="..." />
</div>
<div class="text">
...
</div>
</div>
</div>
Here is a jsfiddle that illustrates my problem:
jsfiddle
How can I resolve this? I can't put the text inside the same div as the image because the image is cut off using a max-height css.
Is this what you were after? Can you use jquery?
$('.child').width($('.image-container').width());
http://jsfiddle.net/YRYZA/
I simplified your markup and css a little bit. You can keep them in the same parent. use position absolute for the text and add position relative to its parent. that way it will take the parent's width. and the parent's width will be set by whatever size the image is, hence the text will be the same width as the image at the end of the day.
html:
<div class="parent">
<div class="image-container">
<img src="http://lorempixel.com/400/600/" />
<div class="text">
text
</div>
</div>
</div>
CSS:
.parent {
width: 700px;
}
.image-container {
background: green;
float:left;
position: relative;
}
div.text {
background: green;
position: absolute;
width:100%;
left:0;
}
jsfiddle
Do this:
.child{ position: relative; }
.text{ position: absolute; left: 0px; right: 0px; }
Then .child div would be as wide as the image (not influenced by .text width) and .text would fit in the space.
JSFiddle: jsfiddle.net/8hV2E/12
I have the following div table:
<div style="display:table">
<div style="display:table-row">
<div style="display:table-cell">
<div id="innerDiv"></div>
</div>
</div>
</div>
Inside the cell is a div with the id "innerDiv". Is there a way to position this div such that its top/left corner is located anywhere within the cell? I tried all the css position values but none work.
We're not supposed to give the same element table-cell display and relative position. It's not supported equally between modern browsers (try this in FF).
If it's the only way you can do things on your specific case, add a relatively positioned wrapper div inside the cell.
For example:
<div style="display:table">
<div style="display:table-row">
<div style="display:table-cell">
<div class="relativeDiv">
<div id="innerDiv"></div>
</div>
</div>
</div>
</div>
.relativeDiv
{
height: 100%;
width: 100%;
/* You may need some negative margin
if there's a padding on the table cell */
position: relative;
}
#innerDiv
{
position: absolute;
/* You're now free to set the top and left attributes freely */
}
For further reading:
http://css-tricks.com/absolutely-position-element-within-a-table-cell/
Does Firefox support position: relative on table elements?
You should use position property in outer div explicitly（such as: relative,fiexd,absolute)
div {
position: relative;
};
#innerDiv {
position: absolute;
left: 10px;
}
The red and the green divs are aligned one next to another. How can make the red div be the same height as the green div?
You should have a div that contains both elements and is clearfixed
<div class="wrapper clearfix">
<div class="red"></div>
<div class="green"></div>
</div>
You then add position relative to the wrapper:
.wrapper {
/* remember this is clearfixed */
position: relative;
}
You let the green container float to the right:
.green {
float: right;
width: 50%;
}
Then you position absolute the red and let it know that it should use all the space of the wrapper:
.red {
position: absolute;
left: 0;
width: 50%;
top: 0;
bottom: 0;
}
Note that this case will only work when the green container is larger than the left one.
That is problematic - because to make heights same, you need to add div between document and red and green div, this div must have height defined, so you can set heights for both div-s inside to 100% eg.
<div style="height: [must be defined]">
<div id="red" style="height: 100%; ..."> ... </div>
<div id="green" style="height: 100%; ..."> ... </div>
</div>
<div id="black" style="height: 100%; ..."> ... </div>
BUT - this will break, when one of the divs will be higher than other - fix it by using overflow
PS. For some cases it is good to use tables here, since table cells have always same height
You can use a table as wrapper. First and last tr are optional. But if you need first or last tr so set a height. browser needs this to calculate correct height for middle tr.
<!DOCTYPE HTML>
<html>
<head>
<title></title>
</head>
<style type="text/css">
html, body {height:100%; padding:0; margin:0;}
#wrapper {height:100%;width:100%;border-collapse:collapse;}
#wrapper td {vertical-align:top;}
#wrapperFirst, #wrapperLast {height:1px;}
</style>
<body>
<table id="wrapper">
<tr><td id="wrapperFirst" style="background-color: #ff44ff;">foo top</td></tr>
<tr><td style="background-color: #ffff44;">text</td></tr>
<tr><td id="wrapperLast" style="background-color: #44ffff;">foo bottom</td></tr>
</table>
</body>
</html>