I have div as below:
<div id="divObservationInput" style="height: 55%; vertical-align: text-bottom;" class="sloInputBox">
<div id="divEnlargeTextarea" style="height: 97%; width: 99%">
<textarea onkeyup="txtobservationbox_onTextChanged();return false;" name="txtobservationbox" id="txtobservationbox" style="height: 100%; width: 100%; overflow: auto; font-size: 12pt;">#ViewBag.ObserverText</textarea>
</div>
</div>
And button div as:
<div id="DivShowInModal" style="background: rgba(0,0,0,0.8);">
<div>
<div style="padding-top: 1%; text-align: right; position: relative; width: 80%; height:2%">
<button onclick="CloseShowInModal()" class="buttoncss">Close</button>
</div>
<div id="divModal" style="max-height: 500px; min-height: 500px;">
</div>
</div>
</div>
Its looking:
I want to shoft that close button to extreem right of div.
i.e. It should be extreem right to textarea.
Please help me.
I tried button setting its right padding to 100%.
But it didnt helped.
Change your '80%' 'width' to '100%' for this 'div'
<div style="padding-top: 1%; text-align: right; position: relative; width: 100%; height:2%">
<button onclick="CloseShowInModal()" class="buttoncss">Close</button>
</div>
I guess you have to do
in HTML
<div class="relative">
<div class="button">
<button onclick="CloseShowInModal()" class="buttoncss">Close</button>
</div>
<div id="divModal" style="max-height: 500px; min-height: 500px;">
</div>
</div>
In CSS
.relative { position: relative; } .button { position: absolute; top: 0; right: 0; }
use this code n try once
<div id="DivShowInModal" style="background: rgba(0,0,0,0.8);">
<div style="position:relative">
<div style="padding-top: 1%; text-align: right; position: absolute; width: 80%; height:2%;right:0">
<button onclick="CloseShowInModal()" class="buttoncss">Close</button>
</div>
<div id="divModal" style="max-height: 500px; min-height: 500px;">
</div>
</div>
</div>
i have scaled it by position:absolute and right:0
You can use position absolute with right 0 for button. For that you need to give position relative for it's parent div.
[Demo](http://jsfiddle.net/Rj3Mh/)
Related
I have got a div #budget-search-thirds which is absolute positions, however it's children are not. Shouldn't this parent div take on the height of it's children?
#budget-search-thirds {
background: red;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
padding: 20px 0;
}
.container, .super-container {
display: block;
margin: 0 auto;
position: relative;
max-width: 1120px;
clear: both;
overflow: hidden;
}
.wrapper {
display: block;
padding: 0 10px;
width: auto;
}
.row-block {
margin: 0;
position: relative;
float: left;
display: block;
width: 100%;
clear: both;
background: #fff;
}
<div class="row-block finance parallax__group">
<div class="parallax__layer--back parallax__layer"></div>
<div class="wrapper">
<div class="container">
<div class="parallax__layer--base parallax__layer" id="budget-search-thirds">
<div class="sixcol"></div>
<div class="sixcol last" style="
display: block;
">
<h2><span class="preHeading">Used Car</span>Finance Specialists</h2>
<p class="right">We have relationships with high street lenders and specialist motoring finance houses too, that is why <strong>we have helped hundreds of customers</strong> secure the <strong>best finance deal</strong> for their budget.</p>
<div class="fin-slider">
<div id="finance-budget-range-min" class="clear-fix">
<div class="row">
<div class="budget-slider">
<div class="form-group">
<label for="amount-budget-range-min">Monthly Budget:</label>
<input type="text" id="amount-budget-range-min">
</div>
<div class="slider-group">
<div id="slider-range-min" class="ui-slider ui-slider-horizontal ui-widget ui-widget-content ui-corner-all"><div class="ui-slider-range ui-widget-header ui-corner-all ui-slider-range-min" style="width: 20%;"></div><span class="ui-slider-handle ui-state-default ui-corner-all" tabindex="0" style="left: 20%;"></span></div>
</div>
</div>
<div class="search-btn">
<a id="button-budget-range-min" class="button" href="/search_page.php?budget=200" title="budget search">Search</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
The definition of position: absolute; is that the element is positioned relative to its first positioned (not-static) ancestor element.
Currently the #budget-search-thirds is positioned relative to <div class="container">. Since the #budget-search-thirds top, right, bottom and left properties are set to 0, relative to <div class="container">, therefore the height is determined by the <div class="container"> instead of its children.
I have this layout (which is a header):
<div class="container-fluid">
<div class="row">
<div class="col-sm-2" style="background-color: aqua; height: 160px;">
<img src="logo.png" class="img-responsive logo">
</div>
<div class="col-sm-8" style="background-color: blueviolet; height: 160px;"></div>
<div class="col-sm-2" style="background-color: aqua; height: 160px;"></div>
</div>
</div>
what i would like to achieve is:
Align the logo to the bottom and the center
Let the image be responsible (set width to 80% of the column)
I did this:
.logo {
position: absolute;
width: 80%;
left: 10%;
right: 10%;
bottom: 0;
}
but it somehow dosen't work as you can see here:
https://jsfiddle.net/9kauhbhs/2/
Use left: 50% and a margin left that is negative half of the image width.
e.g.
.logo {
position: absolute;
width: 80%;
left: 50%;
bottom: 0;
margin-left: calc(-80% / 2);
}
Fiddle
You can try this..
https://jsfiddle.net/9kauhbhs/7/
.container{
position:absolute;
bottom:0px;
height:auto;
width:100%;
text-align:center;
}
.logo {
position: relative;
width: auto;
height:auto;
margin:0 auto;
max-height:100%;
vertical-align:bottom;
}
<div class="col-sm-2 text-center" style="background-color: aqua; height: 160px;">
<div class="container">
<img src="http://www.w3schools.com/html/pic_mountain.jpg" class="logo">
</div>
</div>
Here is my code:
<div class="mycontent">
<div class="textarea" id="ingId" style="position:relative;">
<div id="idComm" style="position: absolute; z-index: 100; width: 450px; height: 151px; right: 18px; top: 1px;">
</div>
</div>
</div>
How to make them share the same scrollbar? I tried this
But it didn't work, since in the first div I have tinymce.
How to create web page using CSS and div to create 4 split screen?
HTML would look like this:
<div class="box">
Area 1
</div>
<div class="box">
Area 2
</div>
<div class="box">
Area 3
</div>
<div class="box">
Area 4
</div>
CSS would look like this:
html, body {
width: 100%;
height: 100%;
}
.box {
float: left;
width: 50%;
height: 50%;
}
Here's a Fiddle to play with: http://jsfiddle.net/UMKWU/
<div class="one" style="float: left; width: 50%; height: 50%;">
</div>
<div class="two" style="float: left; width: 50%; height: 50%;">
</div>
<div class="three" style="float: left; width: 50%; height: 50%;">
</div>
<div class="four" style="float: left; width: 50%; height: 50%;">
</div>
I'm not allowed to comment on questions, otherwise I would just add a comment on first answer by Jordan. His answer is correct, but when you add border, you need to account for the border width, in that case, just add to your css: border-width:1%; and change the width:49%;
height: 49%;.
That should do the trick, here is a link to Fiddle: http://jsfiddle.net/UMKWU/3/
Hi you can do as like this
Css
html, body {
width: 100%;
height: 100%;
}
.box1, .box2, .box3, .box4 {
float: left;
width:49%;
height: 49%;
border-style: solid;
border-width:1%;
}
.box3{
clear:left;
}
HTML
<div class="box1">
Area 1
</div>
<div class="box2">
Area 2
</div>
<div class="box3">
Area 3
</div>
<div class="box4">
Area 4
</div>
Live demo here http://jsfiddle.net/rohitazad/UMKWU/8/
How do I center align 3 floating divs inside each other centered on page ?
<div style="width:100%">
<div style="width:90%">
<div style="width:80%">
//Content
</div>
</div>
</div>
Use margin: auto in CSS.
<div style="background-color: red; height: 100px; width: 500px; margin: auto;">
<div style="background-color: green; height: 100px; width: 300px; margin: auto;">
<div style="background-color: blue; height: 100px; width: 100px; margin: auto;">
//Content
</div>
</div>
</div>
If the element you're centering has a specified width, you can center it with margin: 0 auto