I have a child div that needs to be displayed on top of its parent when hovered. The child div doesnt seem to respect the parent's div padding restraints and is therefore bigger.
I have found that I can use the margin instead of padding on the parent, however this breaks the bootstrap column layout and forces the 3rd div into the next row which is not desirable.
To summarize: how do a make the hovered div the same width as its parent w/o using margin instead of padding?
http://jsfiddle.net/tu40thL8/3/
<div class="col-sm-12 col-xs-12" id="search-result">
<div class="row" id="searchResults">
<div id="result-list" class="results">
<div class="col-sm-4 col-xs-6 resultsinner">
<div class="result resultSolidHover">DIV1 TEXT</div>
<div class="resultHoverButton"> VIEW
</div>
</div>
<div class="col-sm-4 col-xs-6 resultsinner">
<div class="result resultSolidHover">DIV2 TEXT</div>
<div class="resultHoverButton"> VIEW
</div>
</div>
<div class="col-sm-4 col-xs-6 resultsinner">
<div class="result resultSolidHover">DIV3 TEXT</div>
<div class="resultHoverButton"> VIEW
LALALAL</div>
</div>
</div>
</div>
</div>
.resultHoverButton {
display: none;
position: absolute;
top: 0%;
left: 0%;
width: 100%;
height: 100%;
background-color: #364048;
background-size: cover;
}
.resultsinner:hover .resultHoverButton {
display:block !important;
visibility:visible !important;
}
.resultSolidHover {
background-color: yellow;
padding:0 20px;
border-style: solid;
border-width: 1px;
}
There are two approaches to get the behaviour you desire.
You can show/hide the relevant element on hover; http://jsfiddle.net/tu40thL8/15/. [PREFERRED OPTION]
Define the correct absolute positioning on hover in correlation with Bootstrap padding(15px); http://jsfiddle.net/tu40thL8/17/.
Option 1 is simplest and decouples you from Bootstraps implementation. With this option when you hover you hide .resultSolidHover
.resultsinner:hover .resultSolidHover {
display:none;
}
This allows you to take out all of the absolute positioning defined for resultHoverButton as follows;
.resultHoverButton {
display: none;
background-color: #364048;
}
Option 2 relies on getting your absolute positioning correct. Bootstrap defines padding for columns of 15px. This means when you absolute position your hover button it needs to have a left and right of 15px. Simply changing the class definition for resultHoverButton to;
.resultHoverButton {
display: none;
position: absolute;
top: 0%;
left: 15px;
right: 15px;
height: 100%;
background-color: #364048;
background-size: cover;
}
That is because you are doing what you want by positioning it absolutely. Absolute position will move it out of the flow and be guided by the left, top etc. positions. And, why are you using visibility here, really not required at all.
Keep it simple and do it this way, by just changing the display on hover for both children:
.resultHoverButton {
display: none;
background-color: #364048;
border: 1px solid #ccc;
}
.resultSolidHover {
background-color: yellow;
padding:0 20px;
border: 1px solid #ccc;
}
.resultsinner:hover .resultSolidHover {
display:none;
}
.resultsinner:hover .resultHoverButton {
display:block;
}
Updated Fiddle: http://jsfiddle.net/tu40thL8/10/
Example Codepen
Hello check this one out, i'm not sure if this is what you are looking for.
<div class="resultOut">
<div class="resultInner"><h1>Hello World!</h1></div>
</div>
*{
margin:0;
padding:0;
}
.resultOut{
position:relative;
width:500px;
height:200px;
background:yellow;
}
.resultInner{
visibility:hidden;
position:absolute;
width:100%;
height:100%;
background:red;
}
.resultOut:hover .resultInner{
visibility:visible;
}
.resultInner h1{
text-align:center;
line-height:200px;
}
OK, I know that this is an old problem and there are some answers here on Stackoverflow, but none seems to contain a solution for my problem or I'm not fit to understand the answers provided.
I want to align content of one div on a page created with the help of Blueprint CSS horizontally and vertically centered as shown in the picture below and I can't figure out how. Most of the variations I tested use some sort of absolute positioning and all divs end up in the middle of the screen.
Try applying these styles to the div in which the text should be centered
.mydiv{
display: table-cell;
vertical-align: middle;
text-align: center;
}
I want to propose an alternative solution, using this CSS for the alignment:
.alignh {
display: table;
margin: 0 auto;
height: 100%;
}
.alignv {
display: table-cell;
vertical-align:middle;
}
It requires additional markup, as such:
<div class="alignh">
<div class="alignv">
<p>I want to be centered horizontally and vertically</p>
</div>
</div>
Why would it be useful? Because display:table-cell and vertical-align: middle will not work in a div that has position:absolute which is something desirable when making columns and rows. Also, placing a div with the display-table & vertical-align combo inside a div that has absolute position will may be infructuous because you may not be able to make that inner div fill the whole outer div without knowing the size (which may depend on the viewport).
The complete code...
HTML:
<div class="left col">
<p>I want to be left aligned</p>
<p>Me too</p>
<p>More text</p>
</div>
<div class="right col">
<div class="top row">
<div class="alignh">
<div class="alignv">
<p>I want to be centered horizontally and vertically</p>
</div>
</div>
</div>
<div class="bottom row">
<p>Just some more text...</p>
</div>
</div>
CSS:
.col {
top: 0;
bottom: 0;
}
.row {
left: 0;
right: 0;
}
.row, .col {
overflow: hidden;
position: absolute;
border: 1px solid black;
}
.left.col {
left: 0;
width: 250px;
}
.right.col {
left: 250px;
right: 0;
}
.top.row {
top: 0;
height: 100px;
}
.bottom.row {
top: 100px;
bottom: 0;
}
.alignh {
display: table;
margin: 0 auto;
height: 100%;
}
.alignv {
display: table-cell;
vertical-align:middle;
}
See at Codepen.
I'm designing a web page with a small label off to the right of the body on some lines. For this, I created an absolute-positioned <div> inside of a relative-positioned one.
The label is appearing exactly as I want it. However, even though the absolute-positioned <div> dimensions are 0 x 0, it still is taking up some room on the line.
This can be seen at http://jsfiddle.net/sznH2/. I would like the two buttons to line up vertically. Instead, the button next to the label is pushed left a few pixels.
Can anyone see what is causing this spacing and how to eliminate it?
HTML:
<div>
<div class="pull-right">
<button>Hello world!</button>
</div>
</div>
<div>
<div class="pull-right">
<button>Hello world!</button>
<div class="outer-relative">
<div class="inner-relative">
<span>XXX</span>
</div>
</div>
</div>
</div>
CSS:
body {
width: 500px;
margin-left: auto;
margin-right: auto;
}
.pull-right {
text-align: right;
}
.outer-relative {
display:inline-block;
position:relative;
height: 0px;
width:0px;
}
.inner-relative {
position: absolute;
left: 0px;
top: -15px;
background-color: Lime;
}
Inline block elements will render the spacing between the tags. Check this out: http://jsfiddle.net/sznH2/4/
<button>Hello world!</button><div class="outer-relative"><div class="inner-relative"><span>XXX</span>
Remove the spaces and you're good to go
I think You Need to make pull-right postiton:relative
and outer-relative absolute
http://jsfiddle.net/tousif123/sznH2/3/
is this what are you looking for?
.pull-right {
position:relative;
}
.outer-relative {
position:absolute;
}
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>
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;