I have a floated container with multiple child floated divs.
I want to center align (not text-align) all these floated child divs with respect to the floated container.
How do I do that ?
At a time, only 1 of these child div is visible on the browser ..User clicks on Prev/Next to view other child divs (kind of like Carousel)
Apparently I am facing issues center aligning if I use float:left for the child div.
You cannot align a floated element relative to a parent element.
The float CSS property rips an element from its context in the document (similarly to position:absolute/fixed). As a result of this, the element cannot be positioned "at the center of the parent".
I was searching for a solution today for my three divs inside a parent container and I came across this old post where a good solution doesn't seem to have been offered.
My situation: I have a parent container with width:100% so that it fits the screen. I also set a max-width so that the parent container doesn't grow too large. At the max-width I want the three child divs to display all in one row.
As the page is reduced and the parent container shrinks in width, I want the three child divs to reflow, each child div being pushed under the previous child div until they are all stacked vertically. As this happens I want the child divs to stay center aligned within the parent container.
The solution is to not use float which "rips an element from its context" as Rob W truly states, but instead use inline-blocks:
.parentContainer{
margin:0 auto; /*keep centered in page*/
width:100%; /*stretch to page*/
max-width:800px; /*expand up to 800px*/
text-align:center; /*keep my children centered*/
}
.childDiv{
display:inline-block /*treat me as a block that flows like text*/
width:230px; /*set my size*/
vertical-align:top; /*keep me aligned at the top of my parent even if my siblings are taller than me*/
}
<div class='parentContainer'>
<div class='childDiv'>Content 1</div>
<div class='childDiv'>Content 2</div>
<div class='childDiv'>Content 3</div>
</div>
You can float the parent container, give it absolute positioning, pretty much whatever, and the child divs will keep their same behavior.
cheers
If you show only one child div at once, probably they don't need to float. The best way to center a non-floated block inside of another block is to assign the following style:
.child {
margin: 0 auto;
}
This will center the div.child because both left and right margins will span equally to fit the parent container. Similarly, you can align divs to the left and to the right:
.left {
margin-right: auto;
}
.right {
margin-left: auto;
}
If you have a fixed width for both container and children, then you can use margin-left and margin-right set to (container div width - contained width width)/2. Of course, if you have paddings and borders, you have to account for them in the formula.
Related
https://jsfiddle.net/0k02qsjw/1/
.left1 {
background-color:red;
width:100px;
height:100px;
float:left;
}
.left2 {
background-color:blue;
width:100px;
height:100px;
}
//left3 left4 similar to left2. fiddle
<div class="left1">Div1</div>
<div class="left2">Div2child</div>
<div class="left3">Div3</div>
<div class="left4">Div4</div>
I'm learning float and clear in css and am stuck on one problem. Float works as expected in the above example when I float each div individually. When I float left1, left2 moves up as expected. But why is it that children on left2 not move up?
I understand that floated elements are out of flow -> may that's why.
If so, why does overflow:hidden on left2 work as if left2 was floated(see below).
https://jsfiddle.net/0k02qsjw/2/
I need help in understanding what is happening in this case. This could be a duplicate of
Floating elements within a div, floats outside of div. Why?
But i don't find any answer to my specific question there.
https://developer.mozilla.org/en-US/docs/Web/CSS/float
The float CSS property specifies that an element should be taken from the normal flow and placed along the left or right side of its container, where text and inline elements will wrap around it.
So when you float an element, other block elements don't float around it - the inline and text elements in a neighboring element float around it.
If you're floating .left1, the content in .left2 doesn't go up and wrap around .left1 because they're the same width. .left2 needs to be wider than .left1 for it's inline and text content to be able to wrap around .left1. You can see this by setting the width of .left2 to 200px. https://jsfiddle.net/0k02qsjw/3/
In my rails app I have a container that holds from 1 to 4 divs that contain product images/text. There is 1 div if someone only selected 1 product in the previous page, 2 divs if someone selected 2 products, 3 div's if someone selected 3 products and so one. So the amount of product div's will varies and change depending on circumstance.
What I want:
the container and its div's to be centered.
if there is one div, I want that to be centered/margin:auto,
if there are two div's I want them to float/inline-block and margin centered,
I want all div's to be float and be centered but until all the div's fill the width of the container.
I tried to margin:auto the container, but I need a set width. If I have a set width then it wont grow depending on how many div's are in the container.
image1 http://www.image-maps.com/uploaded_files/3201312101150184_div1.png
image2 http://www.image-maps.com/uploaded_files/3201312101150184_div2.png
image3 http://www.image-maps.com/uploaded_files/3201312101150184_div3.png
width of div's inside container do not change.
My question has nothing to do with the width of the browser.
You can use text-align on the container if your insider div are inline-block:
.container {
text-align:center;
}
.container div.inside {
display:inline-block;
}
You can set display to inline-block for the divs and text-align to center for the container.
Just remember that text-align is inherited, so you'll need to re-set it to the desired value on the divs.
The only way I know of doing this is to use
display: inline-block;
on the divs, and it's container. Do not use
float: left;
and set
text-align: center;
on the container and it's parent.
margin: auto; can only center a div if it has an explicit width. A div that auto-grows does not have an explicit width and so margin: auto; won't work.
White space
Be careful when using inline-block as the browser will see whitespace in your markup and render it to the page, which can cause unwanted effects. Just make sure to trim out all the white-space between your divs.
Here is the demo http://jsfiddle.net/aTBWh/
the container is id(div) meaning it inherits a display:block value from the browser, the two div's inside this container are classes. they both have 200px and 300px while the main container has 600px width, so I thought when I floated one of the classes to the right, it should only consume 300px from the whole container meaning the two div's should fit inside the container without one appearing above the other. there is no clear:both attribute.
if the container is an id, with 600px, then the classes nested inside it (specially when one is floated to right, they should fill the container.)
in a nutshell why is the green div class out of the container when it can clearly fit there, and it is floated to the right? I don't understand this problem.
codes:
css
#content_canvas_container{
background:#CCC;
min-height:200px;
border:1px solid red;
width:600px;
}
.red{
width:200px;
background:red;
height:140px;
}
.green{
width:300px;
background:green;
height:140px;
float:right;
}
/*PROPERTIES*/
.w90{width:98%}
.m_auto{margin:auto; border:1px solid black}
html
<section id='content_canvas_container'>
<div class='w90 m_auto'>
<div class='red'> red </div>
<div class='green'> green </div>
</div>
</section>
What you are seeing is expected behavior.
The reason this is occurring is because the red div element is a block level element by default. Thus, in its current state, it will always appear on a new line regardless of whether it has a defined width or has floating sibling elements.
By floating or absolutely positioning an element, you are essentially removing it from the flow of the document, rendering display:block ineffective. Therefore you can solve this by either floating the red div element, or adding display:inline-block to it. (example)
jsFiddle example
.red {
width: 200px;
background: red;
height: 140px;
float: left;
}
That happens because when you set a float to a box, it moves to the left or the right of the container (according with other complex rules, of course), but it's vertical offset from the top of the container can't be smaller than it would be if it wasn't floated.
The browser is making a decision based on what you are telling it to do.
You haven't specified a float on the red div, so it remains in flow and acts as a normal block level element does i.e. "push everything after me to the next row".
You then tell the green div to float right in it's container, so it shifts over to the right.
Using float:left will allow other elements to wrap around it. (CSS-float)
The float CSS property specifies that an element should be taken from the normal flow and placed along the left or right side of its container, where text and inline elements will wrap around it. A floating element is one where the computed value of float is not none.
.red{
float:left;
}
Fiddle
To understand why other elements won't wrap around your div by default, read up on block-level elements here.
"Block-level" is categorization of HTML elements, as contrasted with "inline" elements. Block-level elements may appear only within a element. Their most significant characteristic is that they typically are formatted with a line break before and after the element (thereby creating a stand-alone block of content). That is, they take up the width of their containers.
By default your div elements are block-level until you specify otherwise. The link I referrenced gives a list of all the elements that are block-level by default.
This happens because DIV are block-level elements, it means they begin in new lines. In your example when floating .green to the right, .red element still takes 100% of horizontal space, and .green takes now 300px but it is pushed down because as a block level element it belongs to the next line. To avoid this behavior, you must transform block elements into inline elements.
So in this case if you would like to float .green to the right, DIV elements within the parent wrapper should be rendered as inline blocks instead of independent blocks, just adding this rule:
.m_auto div {
display: inline-block;
}
Cheers.
Other than using display: inline-block and text-align:center, do we have anyway to make 2 div center inside a div wrapper? I don't want my text to be center.
Use text-align: center; on the wrapper div and text-align:left; on the child divs.
you can also use the margin: 0 auto; on the child divs instead of using text-aligns. But they will each have to have a width (px or %) and each div will be in its own row.
Using CSS margin is best way of centering a DIV. Add another DIV to hold the two centered ones with:
margin: 0 auto;
Make a 2nd wrapper for the two divs, with a specified width and set it's margin auto.
I have a div with position:absolute, left:0, right:0; widht:100%. This is fine with my code.
But when i have added another div, which it has width:2000px; my first div width is not expanding. Can you please suggest me.
This is my example. http://jsfiddle.net/vYhv4/
Thanks
The position:absolute property positions the element relative to its ancestor element, in your case that is the body of the document, which is not the width of your .displayElement class. One thing you can do to fix this is to contain both your .displayElement class and your absolutely positioned div, .box, inside of a container that is clearfixed that acts as the ancestor of your .box div, positioned relative.
Like so:
HTML
<div class="element-container">
<div class="box">test</div>
<div class="displayElement">
flash slider comes here
</div>
</div>
CSS
.element-container:before, .element-container:after {
content:"";
display:table;
}
.element-container:after {
clear:both;
}
.element-container {
zoom:1; /* ie hasLayout fix */
position:relative;
display:inline-block;
}
Demo
The first div will only expand to the width of the viewable area, it will not expand past that until you specify a width that is greater.
I assume this is because .box is aligning itself to the body. However, the body is 100% wide and isn't growing when .displayElement becomes wider than the viewport.
Is there any reason why you can't set the .box width to 2000px as well?
It is possible your parent container has a width set that is smaller than your 2000px element. I think as you have your div absolutely positioned with left and right being 0 your width will be the width of your parent container. width:100% wont expand your container to the width of child containers but to the parent.