HTML
<div class="wrapper">
<div class="image"></div>
<div class="copy">blabla</div>
<div class="outside"></div>
</div>
CSS
.wrapper { width: 960px; margin: 0 auto; position: relative; }
.image { float: left; }
.outside { position: absolute; top: 0; left: -20px; }
I want .outside to extend outside the .wrapper, however there are two problems: as is, .wrapper does not extend down to accommodate for the floated .image; setting .wrapper to overflow: auto fixes the height issue, but hides the absolutely positioned .outside. How can I get both the height to stretch automatically and not have the absolutely positioned element be cut off?
EDIT: my wrapper is set to relative, sorry - forgot to add that. For further clarification, here are some crappy diagrams:
EDIT 2: I got it to work by adding a wrapper around the image and copy and setting it to overflow: auto. I wanted to avoid unnecessary markup, but oh well... Thanks everyone!
You just need to clear your float.
Add another empty div like:
<div class="wrapper">
<div class="image"></div>
<div class="copy">blabla</div>
<div class="outside"></div>
<div class="clearfix"></div>
</div>
CSS:
.clearfix { clear: both; }
Float the wrapper (add float: left to the css for .wrapper), or put <BR style="clear: both;"> after the floated image.
Put the absolute div outside the wrapper, rather than inside it.
But why are you doing position absolute? I bet you don't need to do that, and if you gave more info on what you are trying to do there might be an alternative.
Position absolute will position it absolutely to the body unless its parent has a position other than static. If you want it positioned absolutely to the parent (.wrapper), you need to give .wrapper a position such as position:relative;
Then, add a div to clear your floats:
<div class="wrapper">
<div class="image"></div>
<div class="copy">blabla</div>
<div class="clear"></div>
<div class="outside"></div>
</div>
CSS:
.wrapper {
background-color:red;
width: 200px;
margin: 0 auto;
position:relative;
}
.clear {
clear:both;
}
.image {
float: left;
}
.outside {
background-color:yellow;
position: absolute;
top: 0;
left: -20px;
width:100px;
height:20px;
}
Demo: http://jsfiddle.net/AlienWebguy/6Fmy2/
Resolved by adding an additional wrapper with overflow: auto around .image and .copy.
Related
My wrapper div is not expanding in height by it's content. On the other hand, it expands by the header div on the page, and the nav div, but not by the sidebar which lies inside another div. Here is the HTML:
<div id="wrapper">
<div id="header">
</div>
<div id="nav">
nav content goes here
</div>
<div id="pagecontent">
<div id="sidebar">
some sidebar stuff like login form
</div>
</div>
</div>
and the CSS (only the necessary css, not like webkit box shadows):
#wrapper {
width: 900px;
margin: 0 auto;
padding-bottom: 80px;
}
#header {
height: 160px;
width: 100%;
}
#nav {
width: 100%;
height: 40px;
}
#sidebar {
float: right;
width: 140px;
height: 100%;
}
#pagecontent {
width: 900px;
}
the sidebar, which has height 100%, goes outside the wrapper div, you could look at it on http://craftersinn.net
You've missed to add css rule overflow:hidden in #wrapper css.
Add overflow: hidden; to your wrapped CSS, also make sure your selectors are actually selecting elements:
<div id="pagecontent">// remove page
#content {
http://jsfiddle.net/Kyle_Sevenoaks/bPT49/
Add <div style="clear: both;"></div> after
<div id="sidebar">
some sidebar stuff like login form
</div>
You should read this article on floats, especially the section "Clearing the Float".
In short, you can use clear: both, overflow: hidden or the clearfix method. Good luck!
Here discussed the same problem. Check for clearing floats solution and explanation about overflow: hidden;
css box model does not stretch using padding
I'm new as webdesigner and I have to create a portion of a page that has 3 columns: a menu on the left side, the central body and a vertical banner. I can't use tables, so I've created a similar HTML:
<div class="Body">
<div class="LeftMenu">My menu</div>
<div class="Content">Foo body</div>
<div class="VerticalBanner">My menu</div>
</div>
While the CSS:
.LeftMenu {
width: 20%;
}
.Content {
margin: auto;
left: 20%;
position: absolute;
top: 0px;
width: 60%;
}
.VerticalBanner {
left: 80%;
margin: auto;
position: absolute;
top: 0%;
width: 20%;
}
So, my problem using that code is that the parent div (Body) takes the height of the first div (LeftMenu), which is not the bigger. This causes the content of "Content" and "VerticalBanner" to flow out "Body" and to go under the Footer div. If I use the float attribute, the "Body" div collapse without dimensions and then the footer div slides under the three columns inside "Body".
I also tried with display attribute, but Internet Explorer doesn't support this and some columns have strange behaviour.
What is the correct way to do this?
I think you should use floats for your DIVs. It's much easier after that to move them around.
Use display: table-*:
.Body { display: table; }
.Left, .Content, .VerticalBanner { display: table-cell; }
See e.g. this JSfiddle.
To stop the body div from collapsing you can use
.body{ overflow: hidden; }
I'm don't think you need position absolute.
<div class="Body">
<div style="width:20%;float:left;">My menu</div>
<div style="width:60%;float:left;">Foo body</div>
<div style="width:20%;float:left;">My menu</div>
<div style="height:1px;font-size:1px;clear:both;"> </div>
</div>
<div id="parent" style="overflow:hidden; position:relative;">
<div id="child" style="position:absolute;">
</div>
</div>
I need to show child element which is bigger than it's parent element, but without removing overflow:hidden; is this possible?
parent element has position:relative;
child element gets stripped as soon as it's out of it's parents borders.
(elements have additional css defined I just put style attributes for clearness)
It's completely impossible to do what you want with both overflow: hidden and position: relative on the parent div.. instead you can introduce an extra child div and move overflow: hidden to that.
See: http://jsfiddle.net/thirtydot/TFTnU/
HTML:
<div id="parent">
<div id="hideOverflow">
<div style="width:1000px;background:#ccc">sdfsd</div>
</div>
<div id="child">overflow "visible"</div>
</div>
CSS:
#parent {
position:relative;
background:red;
width:100px;
height:100px
}
#child {
position:absolute;
background:#f0f;
width:300px;
bottom: 0;
left: 0
}
#hideOverflow {
overflow: hidden
}
#parent {
position: relative;
background: red;
width: 100px;
height: 100px
}
#child {
position: absolute;
background: #f0f;
width: 300px;
bottom: 0;
left: 0
}
#hideOverflow {
overflow: hidden
}
<div id="parent">
<div id="hideOverflow">
<div style="width:1000px;background:#ccc">sdfsd</div>
</div>
<div id="child">overflow "visible"</div>
</div>
The code below works like a charm.
<div id="grandparent" style="position:relative;">
<div id="parent" style="overflow:hidden;">
<div id="child" style="position:absolute;">
</div>
</div>
</div>
The Problem has a Name: "offsetParent". As soon as an element gets the position abolute|relative or has its position/size altered by a transformation, it becomes the offsetParent of its children. The original offsetParent for all elements (and therefore the area in which overflowing content will be shown or relative to which absolute positions are given) is the viewport of the browser or the iFrame. But after an absolute or relative position had been applied to an element, ist bounding box is the new origin for positioning and clipping of all of ist children.
In a Project, I had a 'popup' window containing a pulldown menu. The pulldown could easily extend over the limits of the window. But as soon as the window was moved (by using a transformation or relative positioning), the pulldown appeared at a wrong place (having the top-left Position of the window as additional Offset) and was clipped at the window's borders. The quick hack I used was to append the pulldown as child of Body (instead fo the window) and position it absolute, using the coordinates of the button that opens the menu (from the clientBoundingBox of the button) and the offset from the button's offsetParent) as absolute position of the pulldown. Then the Body again was the limiting area. This is, however, a bit tricky if it comes to multiple Levels of z-axis ordering (as the pulldown's z-axis is relative to Body, which might be different from the one the window has). But since the window has to be visible (therefore on top) to open the menu, this was negligible.
Of course, this solution requires the use of JavaScript and cannot be done by simple CSS.
You can't eat the cake and keep it. If you take something out of the layout context, it becomes ist own, indepenent (and limited) layout 'frame'
I usually use overflow:hidden as clearfix. In this case, I give up and just add an additional div.
<div id="parent" style="position:relative;">
<!-- floating divs here -->
<div id="child" style="position:absolute;"></div>
<div style="clear:both"></div>
</div>
Use css...
* {margin: 0; padding: 0;}
#parent {width: auto; overflow: hidden;}
#child {position: absolute; width: auto;}
With width auto it will always append to the smallest possible size; and with the reset it will help maintain natural flow.
But if the child is bigger in any way than the parent, then it will not be possible. But with this CSS I think you will achieve what you want to the maximum of what is possible.
I did this in a very simple way
<div class="rootparent">
<div class="parent">
<div class="child"></div>
</div>
</div>
.rootparent {
position:relative;
border:1px solid #ccc;
width:150px;
height:150px;
}
.parent {
overflow:hidden;
}
.child {
position: absolute;
top: -10px;
right: -15px;
width: 30px;
height: 30px;
border: 1px solid red;
}
Here is jsfiddle link
thirtydot's solution is actually a good idea.
Here's a clearer example: http://jsfiddle.net/y9dtL68d/
HTML
<div id="grandparent">
<div id="parent">
<p>this has a lot of content which ...</p>
<p>this has a lot of content which ...</p>
<p>this has a lot of content which ...</p>
<p>this has a lot of content which ...</p>
<p>this has a lot of content which ...</p>
<p>this has a lot of content which ...</p>
<p>this has a lot of content which ...</p>
</div>
<div id="child">
dudes
</div>
</div>
CSS
#grandparent {
position: relative;
width: 150px;
height: 150px;
margin: 20px;
background: #d0d0d0;
}
#parent {
width: 150px;
height: 150px;
overflow:hidden;
}
#child {
position: absolute;
background: red;
color: white;
left: 100%;
top: 0;
}
I believe, every front-end developer encountered this situation, at least once. Let's say you need to absolute position something… And then you try to move it in some direction, and boom it disappears… You forgot the parent was set to overflow:hidden and now your element is lost in the hidden infinite vacuum.There is a css trick to do this.Please find the below demo example for it...
<br><br><br>
<div class="grand-parent">
<div class="parent">P
<div class="child">child</div>
</div>
</div>
css code:
.grand-parent {
width:50px;
height:50px;
position:relative;
background-color: grey;
}
.parent {
width:10px;
height:30px;
overflow:hidden;
background-color: blue;
}
.child {
position:absolute;
width:50px;
height:20px;
background-color: red;
top:-10px;
left:5px;
}
I want to float a div to center. Is it possible? text-align: center is not working in IE.
There is no float to center per se. If you want to center a block element inside another do this:
<div id="outer">
<div id="inner">Stuff to center</div>
</div>
with:
#outer { width: 600px; }
#inner { width: 250px; margin: 0 auto; }
Now that won't make the text wrap around it (like it would with a float left or right) but like I said: there is no float center.
This has always worked for me.
Provided you set a fixed width for your DIV, and the proper DOCTYPE, try this
div {
margin-left:auto;
margin-right:auto;
}
Hope this helps.
The usual technique for this is margin:auto
However, old IE doesn't grok this so one usually adds text-align: center to an outer containing element. You wouldn't think that would work but the same IE's that ignore auto also incorrectly apply the text align center to block level inner elements so things work out.
And this doesn't actually do a real float.
floating divs to center "works" with the combination of display:inline-block and text-align:center.
Try changing width of the outer div by resizing the window of this jsfiddle
<div class="outer">
<div class="block">one</div>
<div class="block">two</div>
<div class="block">three</div>
<div class="block">four</div>
<div class="block">five</div>
</div>
and the css:
.outer {
text-align:center;
width: 50%;
background-color:lightgray;
}
.block {
width: 50px;
height: 50px;
border: 1px solid lime;
display: inline-block;
margin: .2rem;
background-color: white;
}
Following solution worked for me.
.algncenterdiv {
display: block;
margin-left: auto;
margin-right: auto;
}
One of my websites involves a div whose size is variable and you won't know it ahead of time. it is an outer div with 2 nested divs, the outer div is the same width as the first nested div, which is the content, and the second nested div right below the content is the caption, which must be centered. Because the width is not known, I use jQuery to adjust accordingly.
so my html is this
<div id='outer-container'>
<div id='inner-container'></div>
<div id='captions'></div>
</div>
and then I center the captions in jQuery like this
captionWidth=$("#captions").css("width");
outerWidth=$("#outer-container").css("width");
marginIndent=(outerWidth-captionWidth)/2;
$("#captions").css("margin","0px "+marginIndent+"px");
Use "spacer" divs to surround the div you want to center. Works best with a fluid design. Be sure to give the spacers height, or else they will not work.
<style>
div.row{width=100%;}
dvi.row div{float=left;}
#content{width=80%;}
div.spacer{width=10%; height=10px;}
</style>
<div class="row">
<div class="spacer"></div>
<div id="content">...</div>
<div class="spacer"></div>
</div>
This worked for me..
div.className {
display: inline-block;
margin: auto;
}
this could help you..:D
div#outer {
width:200px;
height:200px;
float:left;
position:fixed;
border:solid 5px red;
}
div#inner {
border:solid 5px green;
}
<div id="outer">
<center>
<div id="inner">Stuff to center</div>
</center>
</div>
No, it isn't.
You can either have content bubble up to the right of an element (float: left) or to the left of an element (float: right), there is no provision for having content bubble up on both sides.
<div id="outer" style="z-index:10000;width:99%;height:200px;margin-top:300px;margin-left:auto;margin-right:auto;float:left;position:absolute;opacity:0.9;">
<div id="inner" style="opacity:1;background-color:White;width:300px;height:200px;margin-left:auto;margin-right:auto;">Inner</div></div>
Float the div in the background to the max width, set a div inside that that's not transparent and center it using margin auto.
this works nicely
width:40%; // the width of the content div
right:0;
margin-right:30%; // 1/2 the remaining space
This resizes nicely with adaptive layouts also..
CSS example would be:
.centered-div {
position:fixed;
background-color:#fff;
text-align:center;
width:40%;
right:0;
margin-right:30%;
}
This worked for me.
I included an unordered list on my page twice.
One div class="menu" id="vertical" the other to be centered was div class="menu" id="horizontal". Since the list was floated left, I needed an inner div to center it. See below.
<div class=menu id="horizontal">
<div class="fix">
Centered stuff
</div>
</div>
.menu#horizontal { display: block; float: left; margin: 0px; padding: 0 10px; position: relative; left: 50%; }
#fix { float: right; position: relative; left: -50%; margin: 0px auto; }
Try this, it helped me: wrap the div in tags, the problem is that it will center the content of the div also (if not coded otherwise). Hope that helps :)
I have a problem when I try to center the div block "products" because I don't know in advance the div width. Anybody have a solution?
Update: The problem I have is I don't know how many products I'll display, I can have 1, 2 or 3 products, I can center them if it was a fixed number as I'd know the width of the parent div, I just don't know how to do it when the content is dynamic.
.product_container {
text-align: center;
height: 150px;
}
.products {
height: 140px;
text-align: center;
margin: 0 auto;
clear: ccc both;
}
.price {
margin: 6px 2px;
width: 137px;
color: #666;
font-size: 14pt;
font-style: normal;
border: 1px solid #CCC;
background-color: #EFEFEF;
}
<div class="product_container">
<div class="products" id="products">
<div id="product_15">
<img src="/images/ecommerce/card_default.png">
<div class="price">R$ 0,01</div>
</div>
<div id="product_15">
<img src="/images/ecommerce/card_default.png">
<div class="price">R$ 0,01</div>
</div>
<div id="product_15">
<img src="/images/ecommerce/card_default.png">
<div class="price">R$ 0,01</div>
</div>
</div>
</div>
Update 27 Feb 2015: My original answer keeps getting voted up, but now I normally use #bobince's approach instead.
.child { /* This is the item to center... */
display: inline-block;
}
.parent { /* ...and this is its parent container. */
text-align: center;
}
My original post for historical purposes:
You might want to try this approach.
<div class="product_container">
<div class="outer-center">
<div class="product inner-center">
</div>
</div>
<div class="clear"/>
</div>
Here's the matching style:
.outer-center {
float: right;
right: 50%;
position: relative;
}
.inner-center {
float: right;
right: -50%;
position: relative;
}
.clear {
clear: both;
}
JSFiddle
The idea here is that you contain the content you want to center in two divs, an outer one and an inner one. You float both divs so that their widths automatically shrink to fit your content. Next, you relatively position the outer div with it's right edge in the center of the container. Lastly, you relatively position the inner div the opposite direction by half of its own width (actually the outer div's width, but they are the same). Ultimately that centers the content in whatever container it's in.
You may need that empty div at the end if you depend on your "product" content to size the height for the "product_container".
An element with ‘display: block’ (as div is by default) has a width determined by the width of its container. You can't make a block's width dependent on the width of its contents (shrink-to-fit).
(Except for blocks that are ‘float: left/right’ in CSS 2.1, but that's no use for centering.)
You could set the ‘display’ property to ‘inline-block’ to turn a block into a shrink-to-fit object that can be controlled by its parent's text-align property, but browser support is spotty. You can mostly get away with it by using hacks (eg. see -moz-inline-stack) if you want to go that way.
The other way to go is tables. This can be necessary when you have columns whose width really can't be known in advance. I can't really tell what you're trying to do from the example code — there's nothing obvious in there that would need a shrink-to-fit block — but a list of products could possibly be considered tabular.
[PS. never use ‘pt’ for font sizes on the web. ‘px’ is more reliable if you really need fixed size text, otherwise relative units like ‘%’ are better. And “clear: ccc both” — a typo?]
.center{
text-align:center;
}
.center > div{ /* N.B. child combinators don't work in IE6 or less */
display:inline-block;
}
JSFiddle
Most browsers support the display: table; CSS rule. This is a good trick to center a div in a container without adding extra HTML nor applying constraining styles to the container (like text-align: center; which would center all other inline content in the container), while keeping dynamic width for the contained div:
HTML:
<div class="container">
<div class="centered">This content is centered</div>
</div>
CSS:
.centered { display: table; margin: 0 auto; }
.container {
background-color: green;
}
.centered {
display: table;
margin: 0 auto;
background-color: red;
}
<div class="container">
<div class="centered">This content is centered</div>
</div>
Update (2015-03-09):
The proper way to do this today is actually to use flexbox rules. Browser support is a little bit more restricted (CSS table support vs flexbox support) but this method also allows many other things, and is a dedicated CSS rule for this type of behavior:
HTML:
<div class="container">
<div class="centered">This content is centered</div>
</div>
CSS:
.container {
display: flex;
flex-direction: column; /* put this if you want to stack elements vertically */
}
.centered { margin: 0 auto; }
.container {
display: flex;
flex-direction: column; /* put this if you want to stack elements vertically */
background-color: green;
}
.centered {
margin: 0 auto;
background-color: red;
}
<div class="container">
<div class="centered">This content is centered</div>
</div>
six ways to skin that cat:
Button one: anything of type display: block will assume the full parents width. (unless combined with float or a display: flex parent). True. Bad example.
Button 2: going for display: inline-block will lead to automatic (rather than full) width. You can then center using text-align: center on the wrapping block. Probably the easiest, and most widely compatible, even with ‘vintage’ browsers...
.wrapTwo
text-align: center;
.two
display: inline-block; // instantly shrinks width
Button 3:
No need to put anything on the wrap. So perhaps this is the most elegant solution. Also works vertically. (Browser support for transtlate is good enough (≥IE9) these days...).
position: relative;
display: inline-block; // instantly shrinks width
left: 50%;
transform: translateX(-50%);
Btw: Also a great way for vertically centering blocks of unknown height (in connection with absolute positioning).
Button 4:
Absolute positioning. Just make sure to reserve enough height in the wrapper, since noone else will (neither clearfix nor implicit...)
.four
position absolute
top 0
left 50%
transform translateX(-50%)
.wrapFour
position relative // otherwise, absolute positioning will be relative to page!
height 50px // ensure height
background lightgreen // just a marker
Button 5:
float (which brings also block-level elements to dynamic width) and a relative shift. Although I've never seen this in the wild. Perhaps there are disadvantages...
.wrapFive
&:after // aka 'clearfix'
content ''
display table
clear both
.five
float left
position relative
left 50%
transform translateX(-50%)
Update: Button 6:
And nowadays, you could also use flex-box. Note, that styles apply to the wrapper of the centered object.
.wrapSix
display: flex
justify-content: center
→ full source code (stylus syntax)
I found a more elegant solution, combining "inline-block" to avoid using float and the hacky clear:both. It still requires nested divs tho, which isnt very semantic but it just works...
div.outer{
display:inline-block;
position:relative;
left:50%;
}
div.inner{
position:relative;
left:-50%;
}
Hope it helps!
<div class="outer">
<div class="target">
<div class="filler">
</div>
</div>
</div>
.outer{
width:100%;
height: 100px;
}
.target{
position: absolute;
width: auto;
height: 100px;
left: 50%;
transform: translateX(-50%);
}
.filler{
position:relative;
width:150px;
height:20px;
}
If the target element is absolutely positioned, you can center it by moving it 50% in one direction (left: 50%) and then transforming it 50% in the opposition direction (transform:translateX(-50%)). This works without defining the target element's width (or with width:auto). The parent element's position can be static, absolute, relative, or fixed.
By default, div elements are displayed as block elements, so they have 100% width, making centering them meaningless. As suggested by Arief, you must specify a width and you can then use auto when specifying margin in order to center a div.
Alternatively, you could also force display: inline, but then you'd have something that pretty much behaves like a span instead of a div, so that doesn't make a lot of sense.
This will center an element such as an Ordered List, or Unordered List, or any element.
Just wrap it with a Div with the class of outerElement and give the inner element the class of innerElement.
The outerelement class accounts for IE, old Mozilla, and most newer browsers.
.outerElement {
display: -moz-inline-stack;
display: inline-block;
vertical-align: middle;
zoom: 1;
position: relative;
left: 50%;
}
.innerElement {
position: relative;
left: -50%;
}
use css3 flexbox with justify-content:center;
<div class="row">
<div class="col" style="background:red;">content1</div>
<div class="col" style="">content2</div>
</div>
.row {
display: flex; /* equal height of the children */
height:100px;
border:1px solid red;
width: 400px;
justify-content:center;
}
Slight variation on Mike M. Lin's answer
If you add overflow: auto; ( or hidden ) to div.product_container, then you don't need div.clear.
This is derived from this article -> http://www.quirksmode.org/css/clearing.html
Here is modified HTML:
<div class="product_container">
<div class="outer-center">
<div class="product inner-center">
</div>
</div>
</div>
And here is modified CSS:
.product_container {
overflow: auto;
/* width property only required if you want to support IE6 */
width: 100%;
}
.outer-center {
float: right;
right: 50%;
position: relative;
}
.inner-center {
float: right;
right: -50%;
position: relative;
}
The reason, why it's better without div.clear (apart that it feels wrong to have an empty element) is Firefox'es overzealous margin assignment.
If, for example, you have this html:
<div class="product_container">
<div class="outer-center">
<div class="product inner-center">
</div>
</div>
<div style="clear: both;"></div>
</div>
<p style="margin-top: 11px;">Some text</p>
then, in Firefox (8.0 at the point of writing), you will see 11px margin before product_container. What's worse, is that you will get a vertical scroll bar for the whole page, even if the content fits nicely into the screen dimensions.
Try this new css and markup
Here is modified HTML:
<div class="product_container">
<div class="products" id="products">
<div id="product_15" class="products_box">
<img src="/images/ecommerce/card_default.png">
<div class="price">R$ 0,01</div>
</div>
<div id="product_15" class="products_box">
<img src="/images/ecommerce/card_default.png">
<div class="price">R$ 0,01</div>
</div>
<div id="product_15" class="products_box">
<img src="/images/ecommerce/card_default.png">
<div class="price">R$ 0,01</div>
</div>
</div>
And here is modified CSS:
<pre>
.product_container
{
text-align: center;
height: 150px;
}
.products {
left: 50%;
height:35px;
float:left;
position: relative;
margin: 0 auto;
width:auto;
}
.products .products_box
{
width:auto;
height:auto;
float:left;
right: 50%;
position: relative;
}
.price {
margin: 6px 2px;
width: 137px;
color: #666;
font-size: 14pt;
font-style: normal;
border: 1px solid #CCC;
background-color: #EFEFEF;
}
<div class="product_container">
<div class="outer-center">
<div class="product inner-center">
</div>
</div>
<div class="clear"></div>
</div>
.outer-center
{
float: right;
right: 50%;
position: relative;
}
.inner-center
{
float: right;
right: -50%;
position: relative;
}
.clear
{
clear: both;
}
.product_container
{
overflow:hidden;
}
If you dont provide "overflow:hidden" for ".product_container" the "outer-center" div will overlap other nearby contents to the right of it. Any links or buttons to the right of "outer-center" wont work. Try background color for "outer-center" to understand the need of "overflow :hidden"
I found interesting solution, I was making slider and had to center slide controls and I did this and works fine. You can also add relative position to parent and move child position vertical. Take a look http://jsfiddle.net/bergb/6DvJz/
CSS:
#parent{
width:600px;
height:400px;
background:#ffcc00;
text-align:center;
}
#child{
display:inline-block;
margin:0 auto;
background:#fff;
}
HTML:
<div id="parent">
<div id="child">voila</div>
</div>
Do display:table; and set margin to auto
Important bit of code:
.relatedProducts {
display: table;
margin-left: auto;
margin-right: auto;
}
No matter how many elements you got now it will auto align in center
Example in code snippet:
.relatedProducts {
display: table;
margin-left: auto;
margin-right: auto;
}
a {
text-decoration:none;
}
<div class="row relatedProducts">
<div class="homeContentTitle" style="margin: 100px auto 35px; width: 250px">Similar Products</div>
test1
test2
test3
</div>
I'm afraid the only way to do this without explicitly specifying the width is to use (gasp) tables.
Crappy fix, but it does work...
CSS:
#mainContent {
position:absolute;
width:600px;
background:#FFFF99;
}
#sidebar {
float:left;
margin-left:610px;
max-width:300;
background:#FFCCCC;
}
#sidebar{
text-align:center;
}
HTML:
<center>
<table border="0" cellspacing="0">
<tr>
<td>
<div id="mainContent">
1<br/>
<br/>
123<br/>
123<br/>
123<br/>
</div><div id="sidebar"><br/>
</div></td>
</tr>
</table>
</center>
Simple fix that works in old browsers (but does use tables, and requires a height to be set):
<div style="width:100%;height:40px;position:absolute;top:50%;margin-top:-20px;">
<table style="width:100%"><tr><td align="center">
In the middle
</td></tr></table>
</div>
<style type="text/css">
.container_box{
text-align:center
}
.content{
padding:10px;
background:#ff0000;
color:#ffffff;
}
use span istead of the inner divs
<div class="container_box">
<span class="content">Hello</span>
</div>
I know this question is old, but I'm taking a crack at it. Very similar to bobince's answer but with working code example.
Make each product an inline-block. Center the contents of the container. Done.
http://jsfiddle.net/rgbk/6Z2Re/
<style>
.products{
text-align:center;
}
.product{
display:inline-block;
text-align:left;
background-image: url('http://www.color.co.uk/wp-content/uploads/2013/11/New_Product.jpg');
background-size:25px;
padding-left:25px;
background-position:0 50%;
background-repeat:no-repeat;
}
.price {
margin: 6px 2px;
width: 137px;
color: #666;
font-size: 14pt;
font-style: normal;
border: 1px solid #CCC;
background-color: #EFEFEF;
}
</style>
<div class="products">
<div class="product">
<div class="price">R$ 0,01</div>
</div>
<div class="product">
<div class="price">R$ 0,01</div>
</div>
<div class="product">
<div class="price">R$ 0,01</div>
</div>
<div class="product">
<div class="price">R$ 0,01</div>
</div>
<div class="product">
<div class="price">R$ 0,01</div>
</div>
<div class="product">
<div class="price">R$ 0,01</div>
</div>
</div>
See also: Center inline-blocks with dynamic width in CSS
This is one way to center anything within a div not know the inner width of the elements.
#product_15{
position: relative;
margin: 0 auto;
display: table;
}
.price, img{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
my solution was:
.parent {
display: flex;
flex-wrap: wrap;
}
.product {
width: 240px;
margin-left: auto;
height: 127px;
margin-right: auto;
}
add this css to your product_container class
margin: 0px auto;
padding: 0px;
border:0;
width: 700px;