We Keep Coding

Positioning a CSS button to the top-right in a fieldset

.bot {
background-color: sky-blue;
position: absolute;
line-height: 22px;
width: 78px;
margin-top: 25px;
margin-right: 35px;
top: 0px;
right: 0px;
}
How do I position my clickable button to remain at the top-right inside a <fieldset>? With this my code, the button hangs outside the <fieldset>.

Try making fieldset as position relative like this below
fieldset {
position:relative;
}

Hovering over two DIVs

I have a div (headline) and another div (button) that appears when you hover over the headline. When you leave the headline, the button should disappear.
In my current code the button disappears when you move your cursor to it. Do you have any ideas how to keep the button displayed when you hover over headline or button, so that the button is clickable?
Thanks.
fiddle: http://jsfiddle.net/L6jtotog/
CSS:
.headline {
background-color: grey;
margin-left: auto;
margin-right: auto;
margin-bottom: 20px;
padding: 5px;
width: 70%;
position: relative;
}
#button{
display: none;
position: absolute;
top: 5px;
right: 100%;
margin-right: 10px;
}
HTML:
<div>
<div class="headline" onmouseover="func(true)" onmouseout="func(false)">Headline 1 <div id="button">Test</div></div>
JS:
function func(showPanel) {
if(showPanel) {
$("#button").show();
}
else {
$("#button").hide();
}
}

Instead of using something like that, you can do everything with CSS alone!
.headline {
background-color: grey;
margin-left: auto;
margin-right: auto;
margin-bottom: 20px;
padding: 5px;
width: 70%;
position: relative;
}
#button{
display: none;
position: absolute;
top: 5px;
left: -50px;
margin-right: 10px;
padding-right: 50px;
}
.headline:hover #button {
display: block;
}
<div>
<div class="headline">
Headline 1
<div id="button">Test</div>
</div>
</div>
And in your case, when you need to go to Test, it calls the mouseout which cancels the hover. So I gave an extra padding. Now you can go over the text.

When you set the position attribute of #button to absolute, position:absolute;
it makes the browser think that #button is outside of the div .headline
That is why when the mouse cursor reaches over #button, the browser actually thinks it is outside the .headline and thus, invokes the onmouseout function.
This is why you are getting this problem.
You might want to remove position:absolute from #button and use position:relative.

Position of div after jQuery.show();

I am trying to get a div to show up in the correct place after using jQuery's .show().
In the image below, you can see the search div (autocomplete div) shows up to the far left, but I want it to show up where I drew the red box.
Basically I have a small header in the center of my site 1000px in width, and when the autocomplete div shows up, I'd like it to be lined up in the right place, but I'm not sure how set margins or anchors to get it to be in the right spot.
Here is my JS:
$('#sbar').focus(function(){
$('#acd').show();
});
Here is the CSS for the autocomplete DIV:
.autoCompleteDiv{
width: 428px;
height: 150px;
position: fixed;
background-color: white;
border-radius: 3px;
box-shadow: 0px 4px 4px;
z-index: 999;
top: 66px;
padding: 10px;
font-size: small;
color: gray;
margin-left: auto;
margin-right: auto;
overflow-y: scroll;
display: none;
opacity: 0.93;
Basically I want to move the div into the red spot, but have it compatible between screen sizes, and have it stay lined up when the window is 'windowed'.
Any ideas on how to do this?
Regards

If you use the search div as a container for your auto complete div, then it should show in
place. I have created a quick demo that illustrates this.
the html looks like this:
<div id="search"><input value="search" type="text"/>
<div id="auto"><p>autocomplete</p></div>
</div>
and the css:
#search{position:fixed;top:20px;left:200px;}
#auto{display:none;width:auto;min-height:100px;}
To make it responsive, simply use media queries to update the position of the search box...
hope that helps...

Figured it out.
Made a 1000px container div with:
#acdContainer {
width: 1000px;
height: 150px;
top: 64px;
position: absolute;
left: 0;
right: 0;
margin: 0 auto;
}
And changed my auto-complete div to be:
.autoCompleteDiv{
width: 730px;
margin-left: 250px;
margin-top: 2px;
height: 150px;
position: relative;
background-color: white;
border-radius: 3px;
box-shadow: 0px 4px 4px;
z-index: 999;
padding: 10px;
font-family: Raleway;
font-size: small;
color: gray;
overflow-y: scroll;
display: none;
}
So that the autocomplete div saw itself as being in a 1000px window, which was always centered.

Appending a <div> to the horizontal center of another <div>

I'm currently trying to create a little menu that changes position as the user scrolls. I've come up for this for a style - http://jsfiddle.net/piedoom/S8tyn/
As you can see, the dots are appended to each text <div> element, and it looks like this.
However, this looks very ugly. How can I center each dot beneath each text div? I've tried doing things like text-align: center to no avail.

Use the css style of margin: auto to center the child div.
http://jsfiddle.net/S8tyn/1/

Just change your style to next
.unselectedcircle
{
background: grey;
position: relative;
top: 32px;
border-radius: 100%;
width: 10px;
height: 10px;
margin: 0 auto;
}
Demo

Here is the answer for your question:
added left and margin-left
.unselectedcircle
{
background: grey;
position: relative;
top: 32px;
border-radius: 100%;
width: 10px;
left:50%;
margin-left:-5px;
height: 10px;
}
updated link

Centring a div horizontally inside another div with absolute position state

I am trying to centre a div horizontally inside another div. The div that I am trying to centre is a scroll-down button that uses jQuery and has a custom icon font made by me and default width/height. I want to centre this div inside my main div and keep the original size as I want to keep using it as a button. For example:
I want to make something like the white arrow that is pointing down in the centre but without messing with my width.
This is my code:
HTML
<div id="intro-tab"> <!-- First/Intro Tab -->
<div id="introtab-godownbtn">Q</div>
</div>
CSS
#intro-tab {
width: auto;
height: 100%;
position: absolute;
left: 0px;
right: 0px;
top: 0px;
background-color: red;
box-shadow: 0px 1px 3px #000;
}
#introtab-godownbtn {
font-family: iconFont;
font-size: 50px;
position: absolute;
bottom: 25px;
width: 60px;
height: 30px;
left: 50%;
margin-left: 30px;
background-color: #FFF;
}
#introtab-godownbtn:hover {
cursor: pointer;
}
jQuery
$('#introtab-godownbtn').click(function(){
$("html, body").animate({
scrollTop: (screen.height - 90)
}, 600);
return false;
});
I have tried many ways to centre the button introtab-godownbtn but it doesn't work or it just messes up my buttons size and clicking location. Any solution to my problem?

From what I understand, you're trying to horizontally center an HTML element. Generally, one would use the margin: 0 auto; approach where a fixed width is set on the element it's being applied to. Here's an example of such: http://jsfiddle.net/5XTq2/
Can you provide a mockup/screenshot of the layout you're trying to achieve, if this answer doesn't help? I can happily update the answer to accommodate your need.
EDIT:
As per your Spotify example, if you inspect the page and select the down arrow, it will have the follow styles.
.scroller-arrow {
width: 60px;
height: 60px;
background-image: url(../i/_global/arrow-big.png);
cursor: pointer;
display: block;
margin: 0 auto;
position: relative;
-webkit-tap-highlight-color: transparent;
}

To get the inner absolutely positioned div to be horizontally and vertically centered:
http://jsfiddle.net/7P4n5/
http://coding.smashingmagazine.com/2013/08/09/absolute-horizontal-vertical-centering-css/
HTML:
<div id="intro-tab">
<div id="introtab-godownbtn">Q</div>
</div>
CSS:
body { margin: 0; }
#intro-tab {
width: 100%;
height: 100%;
position: absolute;
background-color: red;
box-shadow: 0px 1px 3px #000;
}
#introtab-godownbtn {
background-color: #FFF;
font-family: iconFont;
font-size: 20px;
width: 60px;
/* this does the centering */
height: 30px;
position: absolute;
margin: auto;
top: 0;
bottom: 0;
left: 0;
right: 0;
}
#introtab-godownbtn:hover { cursor: pointer; }