We Keep Coding

absolute width messing up all my divs in html

I am working on designing HTML page by looking at the image I have. It should exactly match with what I have in my image (in the link). I have got almost everything designed as that image but few things I am not able to make it work. Here is my image link and I have to design HTML page exactly as it is.
And here is my jsfiddle which I have designed by looking at the image.
It looks like I am having problem with absolute width because of which all my divs are getting messed up.
I can see white space between company-bio div and mission-statements div which I am not able to remove somehow? And I don't understand why it is even coming.
Also northmanwild div is going out of alignment as well.
There is a lot of white space below copy-rights div at the end and that is also not matching with my image.
Also somehow all the alignments of my div looks ok on my browser on my laptop but when I made jsfiddle, it looks weird and it goes haywire. It doesn't matches with what I have in my image link. So maybe what I have won't work with multiple browsers or multiple resolution.
Here is my css for company-bio:
body .company-bio {
position: relative;
top: -42px;
padding-top: 40px;
margin-left: 131px;
/*Added Just now */
padding-bottom: 40px;
max-width: 100%;
background: url("https://s30.postimg.org/l04wudgs1/grey-bar.png");
padding-left: 140px;
padding-right: 155px;
font-size: 20px;
font-family: "Adelle PE";
}
What is wrong I am doing because of which my html is getting messed up here? What I am supposed to do to solve this absolute width problem so that my html works fine anywhere without alignment getting messed up.
Note: I still need to work on left navigation text which I haven't done that yet. As of now I am trying to fix all the alignment issues which I am having because of absolute width I believe is happening.

Using MaterliazeCSS and trying have a button in a fixed position inside it's parent element but having trouble

So I'm working on a silly to do list app using mostly materialize and jquery.
Here is my codepen:
http://codepen.io/centraleft/pen/adWvPp
Basically the user enters text, my javascript takes that text and makes a new list element with a button inside of it. I want the button to always be on the far right of the list item regardless of the text inside the list element, so I float the button to the right however I run into a problem where I have an ugly little black sliver at the bottom of my list! Use the app once and you will see.
Is there another way to accomplish what I'm trying to do? Or a way to get rid of that black sliver with CSS?
Here is my current CSS for the button:
.orange {
bottom: 7px;
float: right;
height: 35px;
width: 35px;
}

The problem is your button is bleeding outside of your list. Set your lis to have a max height and overflow: hidden. See my fork.
The additions (CSS):
.collection-item {
height: 42px;
overflow: hidden;
}

How can I make a waiting icon appear in the middle of my page with twitter bootstrap 3?

I looked through all the documentation but still cannot find an example. What I would like to do is to have a waiting icon appear in my page when it's doing an Ajax call. Can someone tell me how I can do this with twitter bootstrap.
Also if there are any other non-jquery implementations which are better I would also like to know about those.
Thank you.

Just pick an loading icon (gif) from font-awesome for bootstrap,
show before the ajax call
hide once the ajax response is delivered
To position the icon in the middle of the screen, use the following css
.ajaxLoader {
position: absolute;
top: 50%;
left: 50%;
width: 500px;
height: 500px;
margin-top: -250px; /* Half the height */
margin-left: -250px; /* Half the width */
}
Also take a look for button loading images
JSFiddle

If you want something dead center, you can use the absolute position technique.
To do it, create a div and give it these attributes:
margin:auto;
position:absolute;
top:0;left:0;bottom:0;right:0;
width:<however wide the image is>;
height:<however big the image is>;
This will put it smack bam in the center no matter when someone resizes the screen, making it work on mobiles as well as desktops (as long as the image isn't huge).
If you want this to work inside another div, make sure that the parent is position:relative;

You can add a bootstrapmodal with your waiting logo,
unbind theclose event,
and close the modal when your ajax call is ended...

Quickbox with MooTools 1.4

I've been trying out a few lightboxes for my website using MooTools 1.4, and I found this one that works and looks really nice (with easy implementation):
http://andrewplummer.com/code/quickbox/
On the demo website, the lightbox works perfectly, clicking the image brings up the overlay and image, and clicking the overlay removes them.
On my website, when you click an image that's marked appropriately, the lightbox pops up and everything works properly, however, when you exit the lightbox by clicking the overlay or pressing q/x/esc, the overlay hides and everything looks great. The only problem with this is that for some reason, this is being embedded into the body of my code:
<div id="qbOverlay" style="display: block; width: 100%; height: 100%; opacity: 0; "></div>
The problem that this causes is that it isn't ever removed after the lightbox is closed, so the entire page is blanked in
#qbOverlay {
display: block;
position: absolute;
z-index: 100;
left: 0;
top: 0;
width: 100%;
height: 100%;
background-color: #000;
cursor: pointer;
}
This is a problem because this makes the entire top of the page this overlay, and it's never removed after the lightbox is closed. When it's like this, I can't click any links or use any input boxes in the area that it's covering.
I have a feeling that the thing causing this problem is this:
close: function(){
this.quickBox.setStyle("display", "none");
this.quickBox.setStyle("cursor", "auto");
this.overlay.fade("out");
this.active = false;
}
I've tried using MooTools with compatibility mode and having every extra turned on, but with no luck.

This is an actual bug in mootools 1.4 https://github.com/mootools/mootools-core/issues/2074
Its about to be fixed this week in 1.4.1 (hopefully) but you can take the updated Fx.tween element shortcut protiotypes code for the fade here:
https://github.com/cpojer/mootools-core/commit/11b4257f12a51454bd513ab1ac32cd5239d66098
Alternatively, use a simple tween on opacity instead of .fade(), it allegedly works. You can also do a destroy on the overlay, which to me is the best fix

What's wrong with my simple button?

I'm essentially trying to create a div which is an image of a button, and when the user clicks it a function is executed. For some reason the div is not showing up at all! What in the world am I setting wrong?
CSS:
#customizeButton
{
background-image:url('images/customizeButton.png');
position:absolute;
top:35%;
left:25%;
width:370px;
height:350px;
background-repeat:no-repeat;
-webkit-background-size:100% auto;
z-index: 150;
}
HTML:
<div id ="customizeButton"></div>
It has to be something with the CSS side. I've got almost identical code for another "button" which I use as an exit button, but it uses a text character instead of an image. It works just fine...
Here's the code for reference:
CSS:
#statSheetExitButton
{
width: 40px;
height: 40px;
position: absolute;
font-weight: bold;
top: 17%;
left: 74%;
font-size: 150%;
font-style: normal;
color: black;
z-index: 50;
}
HTML:
<div id ="statSheetExitButton">X</div>
And again, the question is why the customizeButton is not showing up.
EDIT: ANSWER The problem was that I had the html code for my initial Stat Sheet components in another html file in the same folder, and my program was only listening to that file.

Is this the correct path to your image?
background-image:url('customizeButton.png');
This would only work if the img was in the same directory as the css.

You are absolute positioning your element. Could you be positioning it on top of a relative positioned element that is causing it to be placed outside of the viewport of the browser screen. Use the inspector tools in Chrome, Firefox or Safari to find out where the div is. That'll get you on the right track.

I think your div is empty so that,s why div is not showing, try to write some text or some thing else in div

My thoughts:
display: block; missing
you don't need background-repeat(nor -webkit-background-size), because you are giving it a height & width
if you are only positioning this container, you do not need z-index

Make sure your button is inside a positioned element, which isn't itself hidden.