There is a 'container' with overflow: auto that contains groups of floated elements, 'value'. Inside 'value', there is an absolute positioned element, 'popup' which gets cut off by the overflow. How can I make 'popup' show up and still keep 'container' from losing its layout?
HTML
<div class="container">
<div class="group">
<span class="label">Label</span>
<span class="value">
<span class="popup_container">
<div class="popup">Popup</div>
</span>
</span>
</div>
<div class="group">
<span class="label">Label</span>
<span class="value">
<span class="popup_container">
<div class="popup">Popup</div>
</span>
</span>
</div>
</div>
CSS
.container {
overflow: auto;
background-color: red;
}
.label {
float: left;
clear: left;
width: 100px;
}
.value {
float: left;
}
.popup_container {
position: relative;
}
.popup {
position: absolute;
height: 200px;
width: 200px;
background-color: orange;
}
Please see http://jsfiddle.net/KA7AB/2/
Thanks
Set your popup_container to absolute:
position: absolute;
http://jsfiddle.net/KA7AB/6/
Related
Any idea how can I position my floated div in the bottom of its parent without using position: absolute, display: flex or <table>?
I'm rendering this page to generate a PDF and this solutions does not work: position: absolute can't handle the responsive size of contents, display: flex and <table> deconfigure on rendering. Only float seems to be accepted to get first and last div on the corners of my page.
.third-adjust {
white-space:nowrap;
}
.third-adjust div {
display: inline-block;
}
.third-adjust div:nth-child(1) {
float: left;
}
.third-adjust div:nth-child(3) {
float: right;
}
.sign img {
max-width: 305px;
max-height: 85px;
}
.text-bold {
font-weight: bold;
}
.sign span {
display: block;
line-height: 16px;
}
.text-centered {
text-align: center;
}
<div class="line">
<div class="third-adjust full text-centered">
<div class="sign">
<img style="margin-bottom: -40px; width: 123px; height: 85px;" src="https://dummyimage.com/123x85/000000/0011ff.png">
<span style="font-size:14px" class="text-sign text-bold">Name</span>
<span style="font-size:12px" class="text-sign">Position</span>
</div>
<div class="sign">
<img style="margin-bottom: -20px; width: 155px; height: 71px;" src="https://dummyimage.com/155x71/000000/0011ff.png">
<span style="font-size:14px" class="text-sign text-bold">Name</span>
<span style="font-size:12px" class="text-sign">Position</span>
</div>
<div class="sign">
<img style="margin-bottom: -10px; width: 201px; height: 58px;" src="https://dummyimage.com/201x58/000000/0011ff.png">
<span style="font-size:14px" class="text-sign text-bold">Name</span>
<span style="font-size:12px" class="text-sign">Position</span>
</div>
</div>
</div>
Thanks!
I am using bootstrap and I am attempting to make a Cell that is 100% height and width of its host container.
The title is 30% of that space and the value is 70%. There are upper and lower limits of the value that take up 20% each leaving 60% of the space for the actual value.
HTML:
<div class="container-fluid parameterContainer">
<div class="row paramHead">
<span class="virtAlignFix"></span>
<div class="centerText">
SPO2 (%)
</div>
</div>
<div class="row paramValWrapper">
<div class="row paramLimit">
<span class="virtAlignFix"></span>
<div class="centerText">
200
</div>
</div>
<div class="row paramValue">
<span class="virtAlignFix"></span>
<div class="centerText">
80
</div>
</div>
<div class="row paramLimit">
<span class="virtAlignFix"></span>
<div class="centerText">
40
</div>
</div>
</div>
CSS:
html {
height: 100%;
width: 100%;
}
body {
height: 100%;
width: 100%;
}
.virtAlignFix {
line-height: 100%;
}
.parameterContainer {
height: 100%;
width: 100%;
}
.paramValWrapper {
height: 70%;
width: 100%;
}
.paramLimit {
height: 20%;
width: 100%;
text-align:center
}
.paramHead {
height: 30%;
width: 100%;
text-align:center
}
.paramValue {
height: 80%;
width: 100%;
text-align:center
}
.centerText {
vertical-align:middle;
display:inline-block;
}
Fiddle of my attempt:
http://jsfiddle.net/WCBjN/1173/
EDIT: added height % to body and page.
Making text central is fairly trivial, the easiest approach is as follows. You can check out the jsFiddle too: https://jsfiddle.net/jL9bs0j7/
.text-container {
height:200px;
width:400px;
border: 1px solid #000;
text-align: center;
}
.text-container span {
display: block;
position: relative;
top: 50%;
transform: translateY(-50%);
}
<div class="text-container">
<span>Hello World</span>
</div>
I am having a problem getting my footer to stay at the bottom I have made it position: fixed; but it will still come up if the content changes. Also, i can't get the background-color to change. Is there something wrong with my code that I am just not seeing?
HTML:
<div id="footer">
<div class="container">
<span class="left text-muted">content </span>
<span class="right">
Content
</span>
</div>
</div>
CSS:
.footer {
height: 60px;
background-color: #939598;
position: fixed;
}
.left {
float:left;
align: left;
}
.right {
float:right;
}
You are using the wrong selector.
Its supposed to be the id based selector #footer and not the class based .footer.
#footer {
height: 60px;
width: 100%;
background: #939598;
position: fixed;
bottom: 0px
}
.left {
float: left;
}
.right {
float: right;
}
<div id="footer">
<div class="container">
<span class="left text-muted">content </span>
<span class="right">
footer Content
</span>
</div>
</div>
Set auto height to label based on above div. I tried below code please check with fiddle. I set height:auto to label. Its not supported to this label. I need to that right side image to equal of left side checkbox height.
jsfiddle.net/malaiii/3vej0tca/
If you want to set height of column is equal to height of other column you can use position absolute for column that is less than other.
HTML like
<div class="wrapper">
<div class="left">
<div class="control">
<input type="checkbox" /> Click me
</div>
<div class="control">
<input type="checkbox" /> Click me
</div>
<div class="control">
<input type="checkbox" /> Click me
</div>
</div>
<div class="right">
<img src="http://placehold.it/350x150">
</div>
</div>
And CSS
.wrapper {
position: relative;
width: 404px;
overflow: hidden;
border: 1px solid #f00;
}
.wrapper .left {
width: 200px;
float: left;
border: 1px dotted #00f;
}
.wrapper .right {
position: absolute;
left: 200px;
top: 0;
bottom: 0;
width: 200px;
float: left;
background: #efefef;
}
.wrapper .right img {
height: 100%;
}
.control {
padding: 10px;
}
See fiddle with example http://jsfiddle.net/588efqtf/2/
Hope it'll help you.
I am not able to vertically align middle some text using the position absolute method.
JSFIDDLE
HTML
<div class="heighted">
<div class="middle-wrapper">
<span class="middle">text to be vertically aligned in the middle</span>
</div>
</div>
<hr/>
<div class="heighted">
<div class="middle-wrapper">
<img class="middle" src="http://www.google.com/homepage/images/google_favicon_64.png" />
</div>
</div>
CSS
.heighted {
background: gray;
height: 100px;
}
.middle-wrapper {
height: 100%;
position: relative;
}
.middle {
bottom: 0;
margin: auto;
position: absolute;
top: 0;
}
I am getting Stack Overflow error when adding code, it might be a bug in Stack Overflow, so please follow the link.
Set line-height: 100px; to .heighted or .middle-wrapper or .middle - DEMO
CSS:
.heighted {
background: gray;
height: 100px;
line-height: 100px;
}
.middle-wrapper {
height: 100%;
position: relative;
}
.middle {
bottom: 0;
margin: auto;
position: absolute;
top: 0;
}
HTML:
<div class="heighted">
<div class="middle-wrapper">
<span class="middle">text to be vertically aligned in the middle</span>
</div>
</div>
<hr/>
<div class="heighted">
<div class="middle-wrapper">
<img class="middle" src="http://www.google.com/homepage/images/google_favicon_64.png" />
</div>
</div>
You should try display:table-cell; and use vertical-align:middle;
Check how amazing and optimize:
http://jsfiddle.net/9jugdtqx/2/
and:
http://jsfiddle.net/9jugdtqx/3/