We Keep Coding

Fix the alignment of div in any screen resolution

Here is the HTML code
.Box {
position: absolute;
bottom: 60px;
right: 0px;
left: 65px;
display: block;
background-color: #fedd2d;
max-width: 60%;
padding: 15px;
opacity: 0.8;
}
<div class="Box">
<div class="Boxtitle">Hello</div>
<div class="Boxsubtitle">Subtitle</div>
</div>
When I view this box on larger resolution (2560*1440) it expands both right side and left side. I tried using the width attribute which fixes the box from right side but the fix width hinders the responsiveness and the box width doesn't change with the length of the text within.
How can I make this Box div stay in same position in any screen size using either CSS or Javascript, also making it responsive as per the length of the content in it?

Just need to remove the right and max-width and then the width will adjust based on the content.
.Box {
position: absolute;
bottom: 60px;
left: 65px;
display: block;
background-color: #fedd2d;
padding: 15px;
opacity: 0.8;
}

right:0; seems to be in the way. it will pull container all the way to right side, but max-width is set too, so it stops at 60% of width as set. You rules are not coherent together.
since absolute, display is not really needed.
unless i missunderstand and max-width is in the way , ... or else ?
.Box {
position: absolute;
bottom: 60px;
left: 65px;
background-color: #fedd2d;
max-width: 60%;
padding: 15px;
opacity: 0.8;
}
<div class="Box">
<div class="Boxtitle">Hello</div>
<div class="Boxsubtitle">Subtitle</div>
</div>
`

align texts or images in Bootstrap carousel

I use Bootstrap 3.3.4 and I want to know which way is better to align texts or items in carousel.
here is a exemple from a slider. How can I align text like this and stay at any screen resolution at the same place. I use top: x, right: x but every time when I resize the window, text climb above and not stay at middle anymore.
CSS for align
.carousel-caption {
position: absolute;
right: 15%;
bottom: 40%;
left: 15%;
z-index: 10;
padding-top: 20px;
padding-bottom: 20px;
color: #fff;
text-align: center;
text-shadow: 0 1px 2px rgba(0, 0, 0, .6);
}
Just basic bootstrap slider. But If I use bottom 40% for exemple to rise text at middle of the page works. But if I use smaller displays the text rise and stay almost on top.
In this exemple text stay fixed on every device.

<div class="wrap">
<div class="display-table">
<div class="display-cell">
<h1>Title in here</h1>
</div>
</div>
</div>
<style>
.wrap {
width: 100%;
height: 400px;
}
.display-table {
width: 100%;
height: 100%;
display: table;
}
.display-cell {
width: 100%;
height: 100%;
display: table-cell;
vertical-align: middle;
}
</style>
This allows fixed vertical alignment and should work cross browser. Just note the fixed height applied to .wrap must be present for the children to inherit 100% height!
Hope this helps :)

Hope, Try this demo that centers text vertically in the Bootstrap carousel.
Here is the Fiddle.
All I do here is give the div a height that contains the text and then position it with this css...
.vcenter {
position: absolute;
height:100px;
width:100%;
top:50%;
bottom:50%;
margin-top: -50px;
margin-bottom: -50px;
}

Make <div> scale to content when absolutely positioned?

Usually a <div> will expand to fill content insize.
<div>
<p>Hello</p>
</div>
The <div> scales to contain the <p>
Is it possible to make the <div> do this when it's absolutely positioned?
In my case I have a modal which has a set height and width, but I want to make it scale to the content.

Something like this? http://jsfiddle.net/3L99pycm/
CSS:
div {
position: absolute;
left: 50%;
top: 100px;
background-color: red;
width: 30%;
height: 100px;
}
p {
background-color: blue;
color: white;
}

div behave the same independently from its position, most likely the problem is that you are setting a fixed size parameter somewhere.

Well You dont need to do anything special to make the absolute div scale to the child. I added an example here http://jsfiddle.net/rtkvswmn/
CSS
div {
position: absolute;
background: red;
}
p{
width: 100px;
background: blue;
text-align: center;
}

jQuery/CSS animate div width from left to right

I'm trying to use jQuery to animate a div with a background picture decreasing in width from left to right whilst being absolutely positioned.
I need to make this compatible with IE8 hence using jQuery.
Here is a basic JSFiddle demo link with what I have so far, but it animates from right to left:
JSFiddle link
jQuery(document).ready(function($){
$(document).on('click', '.splat', function(e){
$(this).animate({width:"0px"},800);
});
});
.splat {
width: 400px;
height: 400px;
background: blue;
position: absolute;
top: 100px;
left: 100px;
}
<div class="splat"><!-- --></div>
I need it going in a different direction, like the following image:
Hoping someone could point me in the right direction (no pun intended!). Thanks in advance.

You may use a wrapper and position the child div with right:0.
See this demo

If i can understand your question, solution is replace left with right :)
http://jsfiddle.net/V4XCb/6/
.splat {
width: 400px;
height: 400px;
background: blue;
position: absolute;
top: 100px;
right: 100px;
}

You can like this:
<div class="box">
<div class="splat"></div>
</div>
.box{
width:200px;
height: 200px;
}
.splat {
height: 200px;
width: 100%;
background: blue;
float: right;
}

If you could wrap your elem with a wrapper which is relative positioned element and do the following:
.splatWrapper {
width: 400px;
height: 400px;
background: green;
position: relative; //<-----needed
top: 100px; //<------------needed
left: 100px; //<------------needed
}
.splat{
width: 400px;
height: 400px;
background: blue;
position: absolute;
top: 0; //<----------needed
right: 0; //<----------needed
}
Try this fiddle

You can use Scale Effect in Jquery :
jQuery(document).ready(function($){
$(document).on('click', '.splat1', function(e){
$(this).hide("scale");
});
});
Fiddle : http://jsfiddle.net/V4XCb/14/

How to position a div in the absolute center of a page?

Here's how I'm doing it and it does work:
#myDiv { background: red; width: 100px; height: 100px; margin-top: -50px; margin-left: -50px; position: absolute; top: 50%; left: 50%; }
<div id="myDiv"></div>
But the problem is when I scroll down the page, the div no longer appears in the center because it is positioned 50% off the top relative to the original view port height, not the current one. So I guess I would have to listen for a document scroll event and update the position of the div dynamically. Any idea how to do that?
Basically the effect I'm after is for the div to always be in the center even when the user scrolls.
or maybe there's even a pure css solution?

Use position: fixed; instead of position: absolute;
The positioning (top, left etc) will remain the same, but in relation to the window, and not the document.
http://jsfiddle.net/jasongennaro/25WAg/

You're going to want position: fixed;.
To achieve the div in the center of the screen, you're going to want left: 50%; margin-left: -50px;
Note that the negative margin-left is half of the container's width

#myDiv {
background: red;
width: 100px;
height: 100px;
margin: auto;
position: fixed;
}
#container {
width: 90%;
height: 90%;
}
Then for your HTML :
<div id="container">
<div id="myDiv">DATA</div>
</div>
Tell me if it works.