We Keep Coding

Positioning a div relative to SCREEN and a COL div

I'm trying do this to long time, but... no luck. The question itself is a little simple.
I need make a div to begin on the left side of screen and ending on the end of a col-xx-x div, which in turn is inside a row div, which in turn is inside a container div.
I've already done it with jQuery, but I'm searching for a way to do that using only HTML and CSS.
I made a image to a better understanding:
(The red square is the div that i want, but it's obvious)
Note: Notice that on my image I used a col-md-6 div, but the col is indeterminate (col-xx-x), I used 6 only to draw.
Here is a fiddle with the code using jQuery:
https://fiddle.jshell.net/b8xcp6j7/

You can adjust .box element width to 200%, set position to relative, left to -100%
.box {
width: 200%;
border: 4px solid red;
padding: 15px;
position:relative;
left:-100%;
}
jsfiddle https://fiddle.jshell.net/6a0uac4y/2/

position relative-absolute child margin bug?

Can anyone explain how I can prevent the margin of a sibling div from affecting the other one? It does not logically make sense to me why the browser is laying it out this way.
I am trying to get the yellow box to have it's top/left relative to the parent, but the blue box with a margin-top is affecting the yellow one.
http://jsfiddle.net/oufdfoLy/
section{
position: relative;
}
div.options{
position: absolute;
left: 10px;
top: 10px;
display: inline-block;
background: #ff0;
padding: 50px;
}
div.content{
height: 100px;
width: 100%;
background: #09c;
margin-top: 50px;
}
<article>
<section>
<div class='options'>
</div>
<div class='content'>
<h1>hello world</h1>
</div>
</section>
</article>

This is known as collapsing margins.
8.3.1 Collapsing margins
In CSS, the adjoining margins of two or more boxes (which might or might not be siblings) can combine to form a single margin. Margins that combine this way are said to collapse, and the resulting combined margin is called a collapsed margin.
One solution would be to set the overflow property of the parent element to something other than the default value, visible.
Values such as auto or hidden would produce the expect results.
(See the link above for alternative approaches to work around this.)
Updated Example
section {
position: relative;
overflow: auto;
}
Changing the overflow property's value establishes a new block formatting context.
9.4.1 Block formatting contexts
Floats, absolutely positioned elements, block containers (such as inline-blocks, table-cells, and table-captions) that are not block boxes, and block boxes with 'overflow' other than 'visible' (except when that value has been propagated to the viewport) establish new block formatting contexts for their contents.
In a block formatting context, boxes are laid out one after the other, vertically, beginning at the top of a containing block. The vertical distance between two sibling boxes is determined by the 'margin' properties. Vertical margins between adjacent block-level boxes in a block formatting context collapse.

Trouble making a facebook like div with triangle on top

on facebook if you hover over something with a lot of likes a div pops up showing everyone who likes the post. i was wondering if anyone could mimic the div in css and explain how i can do it. there is a picture below showing what i mean. i know you have to use a :after in css but im not sure how to position the triangle and all that.
Here is some code i found somewhere else:
#pointed {
position: relative;
margin: 0 auto;
width: 200px;
height: 200px;
background-color: white;
}
#pointed:after,
#pointed::after {
position: absolute;
top: 100%;
left: 50%;
margin-left: -50%;
content: '';
width: 0;
height: 0;
border-top: solid 150px red;
border-left: solid 100px transparent;
border-right: solid 100px transparent;
}

The code you pasted there has the gist of it down. You can see a working JSFiddle here that makes it more like what you're going for.
There are two parts to this problem, I think. The first part is making the triangle. The second part is positioning the triangle.
Making the Triangle
The borders on the pseudoelement are responsible for that triangle we're seeing. If you're not sure how that's happening, take a look at this great answer that explains it quite well, I think.
Positioning the Triangle
The key to positioning involves making the child appear outside of the parent. We can do this by setting absolute positioning on the child. However, if we do this without changing the parent at all, the absolute positioning will be set relative to the window.
What we want here is positioning the child relative to the parent. We can do this by setting the parent element's positioning to anything other than static, which is the default value. In the code you pasted, you can see they set it to relative. For more about positioning, the working docs are pretty explanatory, I think. Another great resource can be found on CSS Tricks.
Anyway, we want our child to be just outside the parent. Accordingly, if we have a 5px high triangle, the child's CSS for positioning should look something like:
position: absolute;
top: -5px;
This will make it appear like its attached to the top, as you can see in the above JSFiddle.
After you've positioned it vertically the way you want it to, set its left positioning to get it where you want along the horizontal.
Though of course you must ask yourself if it's worth reinventing the wheel—tooltips come with Bootstrap Jquery.

Can the content remain centered while the screen size changes?

First, here's is my rough example: http://demindu.com/sandbox/simple.html
What I'm trying to do:
Create a content div: let's say 400px tall and 700px wide, like the example. The content box has a margin of 50px in each direction. The content div should always be centered both vertically and horizontally, regardless of screen resolution. The black background should extend from the centered content area all the way to the right side of the screen, but not to the left.
The only way I can think of possibly doing this is something using window.innerWidth & window.innerHeight in JavaScript, but I don't know enough to know if this is even possible.
The amount of blank space above and below the middle section would need to be:
window.innerHeight - height of the div (in this example: 500px [400px box with two 50px margins]) / 2
The blank space to the left of the black bar would need to be:
window.innerWidth - width of the div (in this example: 800px [700px box with two 50px margins]) / 2
My question to you is: Is this possible in JavaScript? Is this possible somehow with pure CSS?

You can do this entirely in CSS with 4-point absolute positioning. You will need two elements:
The first item spans from the right of the screen to the center where the content is positioned. This element uses absolute positioning for the top, left, and right coordinates of the element (we can leave bottom unspecified as it's taken care of by the height.)
The second item is nested in the former. This item has a fixed width to ensure the content itself remains in the specified width you've chosen. We can also set the height and padding on this object and the parent will inherit it's height. Don't use margins to simulate padding - it can cause cross browser issues when you're just trying to do some positioning tricks as we are here.
So your HTML code would look something like this:
<div id="my_centered_design">
<div id="my_centered_design_content">
<p>This is just some example text.</p>
</div>
</div>
And you're CSS would look like this:
div#my_centered_design {
background: #000;
margin-left: -400px;
margin-top: -250px;
left: 50%;
position: absolute;
right: 0;
top: 50%;
}
div#my_centered_design_content {
background: #333;
height: 400px;
/* I think you actually want padding for
the effect you're trying to accomplish */
padding: 50px;
width: 700px;
}
Essentially this is the same trick as the Joe2Tutorial except we are applying additional positioning rules to adhere the centered element to the right side of the screen.

I think this pure css solution would suit you best: http://www.joe2torials.com/view_tutorial.php?view=37

A very quick google resulted in this piece of code.
this code does not align a div in the middle. what you actually for your own website is that you put the following div css
.main {
width: 140px;background-color: #252525; float: left;margin-top: 25px; }
inside a table that is aligned to be centered. so, basically you're using the table's centering feature to center your left floated div simply as a content. you're not doing anything through div or css for that matter. the piece of css code you offered doesn't not anything about centering a div in the middle.

How can I center align a div without knowing the width?

I've looked this up and the outlook seems bleak. I'm not interested in using a table. I have 6 or so 'a element' inline-blocks that make up a menu. It's slick, except all the 'a elements' are set to width: auto; to accommodate their text. Without an explicit width, I'm not able to center align them. I have a container div and a child div that wraps around my 'a elements'.
Any thoughts?
Thanks
Mike

You could set the style of the a element to margin: 0 auto, but that doesn't work in IE6. In IE6, you should set the wrapper div to text-align: center, and (optionally) set the text-alignment for the a element back to text-align: left

<div style="width: auto; margin-left: auto; margin-right: auto">
div content
</div>
will align center on the page

the div element will take all the width space of the container element if it isn't set a width value.
So if you want to center a div you must set a width...
A solution to your problem (if I have understand it) can be:
<div style="text-align:center;"><span>[... yours content ...]</span></div>
where your div has became a span and a new div puts the span in the center.
Hope this can help you!
Bye,
Alberto

My advice is this answer - however someone commented that it wouldn't work in IE6. Here's how to make this work:
<div id="container">
<div id="centeredBlock">centered</div>
</div>
#container {
text-align: center;
}
#centeredBlock {
margin: 0 auto;
text-align: left;
width: 50%;
}

You need to set margin: 0 auto; on the outer container div, add text-align: center; on the inner div; and use an unordered list to build your menu in the first place.

Without setting an explicit width, the <div> tag will automatically expand to 100% of the width of its parent. Therefore, setting margin: 0 auto; will make it center -- with 0px on both the left and right.

here a nice workaround for centering a div with no width:
http://www.kensfi.com/how-to-align-center-a-div-with-no-width-declared/

Here is also a good example for the situation: http://www.cssplay.co.uk/menus/centered.html

If you need it centered and dynamically shrinking/expanding to accommodate the content without knowing the width, then your only option really is using a table. It is the only elastic element in HTML repertoire.
<table style="margin-left:auto;margin-right:auto;">
<tr>
<td>
Whatever...
</td>
</tr>
</table>
P.S. You can have a div to shrink dynamically as well by setting the float property to float:left or float:right. So it will stick to the left or the right, but you can't have it centered this way.