I have a container that is a certain width.
I have two select elements rendering on the same line in this main div container. The first one is absolute positioned 40px left from the main div container and the right one is absolute positioned 40px right from the main div container. Thus, resulting in a centered container within the main div container.
My goal is to push two select elements into the resulting container that sit on either side of either, having the same width, and having a space equidistant in the middle.
Here is my current HTML:
<div id="container">
<select class="edit" style="left: 40px; top: 290px; width: 136px;"></select>
<select class="edit" style="left: 190px; right:40px; top: 290px; width: 136px"></select>
</div>
So in this one we are assuming that the left has a combined pixel count of 40+136=176px, width plus left positioning and the right having a pixel count of 190+136+40=366, left positioning plus width plus right;
the result would be a container having two equidistant select boxes within the constraints of 40px each way.
I'm not sure if my math is correct but any assistance with this would be greatly appreciated.
Try removing the left:190px from the right hand element. The right:40px is enough to position the element to the right.
I'm not sure if this is exactly what you're looking for, so let me know if I've misunderstood something, but what about this solution (note that .edit could just as easily have a strictly %-based width, I just wanted to show how flexible this solution could be):
https://jsfiddle.net/Lcn51a1p/
HTML:
<div class="container">
<select class="edit"></select>
<select class="edit pull-right"></select>
</div>
CSS:
.container {
margin: 0 40px;
}
.edit {
width: 120px;
max-width: 50%;
}
.pull-right {
float:right;
}
Related
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.
I have a set of child divs inside a parent div that has a set width. The elements are put together using isotope but I am not using an isotope layout mode as they were not working for me in terms of spacing.
What I am trying to do is have divs that fill the space of the parent so at the far right there are no gaps and that each div has a margin and padding. So far its working alright like so:
As you can see the divs have the correct margin right and top but what i want to do is stop the margin on the last items of each row. The issue here is that some of the divs have a different width. The alignment should but the same point as the top right box as you can see in the image.
The css I used is as follows:
.global-post{
padding: 0;
height: 400px;
float: none;
display: inline-block;
*display: inline;
zoom: 1;
vertical-align: top;
width: 308px;
}
This creates the width of the narrower items and then the projects that are wider have different width values.
Can anyone point me in the right direction for a fix for the issue?
Give a negative left margin to row like margin-left: -20px and add left margin to every div inside that row like margin-left: 20px;
<div class="row">
<div class="span">1</div>
<div class="span">2</div>
<div class="span">3</div>
<div class="span">4</div>
</div>
<div class="row">
<div class="span">1</div>
<div class="span">2</div>
</div>
.row{
margin-left: -20px;
}
.span{
margin-left: 20px;
}
Centering an element only when screen is at max width
At the moment, I am centering various elements (by JavaScript) by calculating the screen's width and setting the element's "margin-left" to screen.width/2 - element.width/2.
I do this so that when the user resizes the window, the element will stay in the absolute center of the screen and become invisible if the window is resized to less than 50%.
Is this a typical way to center things only at the max width, or is there a simpler CSS approach to achieving the same effect?
An example of the effect I am trying to achieve: Khanacademy.com's logo.
[Edit]
Thanks to hungerstar, I was able to figure out the root cause of my issue. If you do not set a min-width, then margin: 0 auto will always keep your element centered.
For block elements, giving an explicit width plus margin: 0 auto is the basic technique. Inline (and inline-block) elements such as images you can center using text-align:center on the parent container.
If you have a group of elements that need to be centered but need to maintain left alignment or other formatting, i.e. a heading followed by paragraphs with lists, you can do the following:
HTML
<div id="wrapper">
<div class="outer">
<div class="inner">... Content...</div>
</div>
</div>
CSS
#wrapper {
margin: 0 auto;
width: 900px;
}
.outer {
height: 50px;
left: 50%;
position: relative;
display: inline-block; /* or float: left; */
}
.inner {
right: 50%;
position: relative;
}
You can achieve this using css.
margin: 0 auto;
EXAMPLE
I have a div inside a div inside a div ... By default each comtainer moves elements more and more to the right.
I have a elements "div.leftPanel" that can be nested very deeply in but I want it to be 50px (for args sake) to the left of the document (where the body's left property would be) and not it's parent element. Some of it's containers need to have a position of absolute or relative.
Is there any way to do this with css? if not then javascript?
You could use a negative margin to achieve this if you already know how far the nested div has been pushed out from the left of the body. Example:
<div style="position:absolute; left: 30px;">
<div style="position:absolute; left: 30px;">
<div style="position: relative; margin-left: -10px;">
</div>
</div>
</div>
If it isn't set, you can always find out how far from using javascript and apply the margin dynamically.
If you apply position: absolute; and left: 50px; to div.leftPanel, and none of its parent elements have any position (absolute or relative), then the 50px will be calculated from the left edge of the document.
EDIT: Sorry, I missed the sentence where you said some of the parents had to have a position. Can you just move div.leftPanel out of the other <div>s entirely? Maybe just place it at the root of the document so its position will be calculated from the edge of the document.
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.