I am having an issue where I have three divs within a parent div which need to be center aligned. I do not understand why the center alignment of the text isn't doing it's usual magic?
I have recreated the issue here Demo fiddle
<div class="container_alt">
<div class="pricing_options_col">
<div class="pck1">pck1</div>
<div class="pck2">pck2</div>
<div class="pck3">pck3</div>
</div>
</div>
.container_alt{
max-width: 1000px;
margin: 0 auto;
}
.pricing_options{
width: 100%;
background-color: #fff;
height: auto;
overflow:auto;
text-align:center;
display:inline-block;
}
.pricing_options_col{
width: 100%;
max-width:1000px;
margin: 0 auto;
text-align:center;
padding:100px 0;
display:inline-block;
}
.pck1{
float: left;
margin: 0 auto;
width: 200px;
background-color: green;
border-radius: 6px;
box-sizing:border-box;
padding: 20px;
}
.pck2{
float: left;
margin: 0 auto;
width: 400px;
background-color: red;
border-radius: 6px;
box-sizing:border-box;
padding: 20px;
-webkit-box-shadow: 0px 0px 20px 0px rgba(50, 50, 50, 0.75);
-moz-box-shadow: 0px 0px 20px 0px rgba(50, 50, 50, 0.75);
box-shadow: 0px 0px 20px 0px rgba(50, 50, 50, 0.75);
z-index: 999999;
}
.pck3{
float: left;
margin: 0 auto;
width: 200px;
background-color: pink;
border-radius: 6px;
box-sizing:border-box;
padding: 20px;
}
remove float: left; from the css for .pck1 .pck2 .pck3
update: i guess this is what you are looking for:
.pricing_options_col{
width: 800px;
margin-left:auto;
margin-right:auto;
max-width:1000px;
margin: 0 auto;
text-align:center;
padding:100px 0;
display:inline-block;
}
For .pck1, pck2 and pck3, remove float:left and add display:inline-block.
Floating an element is used to move it all the way to one side or the other (which obviously does the opposite of cetering). Preventing the "stacking" is a by-product of that, but there are other ways to keep elements from stacking. By default, divs have display:block, which means they'll each display on their own line ("stacking"). By changing it to display:inline-block, they display in-line.
Here is a demo.
Try this. This is because your parent and child both holds the width of 100%
.pricing_options_col{
width: 100%; <-- Remove
max-width:1000px;
margin: 0 auto;
text-align:center;
padding:100px 0;
display:inline-block;
}
DEMO
Related
Have a weird bug when floating percentage width divs with auto heights. The smaller div is not level with larger div to the left of it, it's 85px lower in all browsers. I can fix it by changing the margin to negative height but the effect is different across all browers, if it's perfect in Firefox there's slight gaps in Chrome and IE, that's no good.
DEMO
.wrap-outer {
position: relative;
float: left;
width: 100%;
}
.wrap-inner {
position: relative;
float: left;
width: 92%;
margin: -100px 4% 0px 4%;
clear: both;
}
.large-top {
position: relative;
float: left;
width: 60%;
height: auto;
background: #e6f0d7;
margin: 0 0 0 0;
padding: 10px 0px 10px 0px;
border-radius: 15px 15px 0px 0px;
}
.large-middle {
position: relative;
float: left;
width: 60%;
height: auto;
background: #9ea790;
margin: 0 0 0 0;
padding: 5px 0px 5px 0px;
}
.large-bottom {
position: relative;
float: left;
width: 60%;
height: auto;
background: #f8ffee;
margin: 0 0 0 0;
padding: 5px 0px 80px 0px;
}
.small-top {
position: relative;
float: left;
width: 39%;
height: auto;
background: #e6f0d7;
margin: 0 0 0 1%;
padding: 10px 0px 10px 0px;
border-radius: 15px 15px 0px 0px;
}
.small-middle {
position: relative;
float: left;
width: 39%;
height: auto;
background: #9ea790;
margin: 0 0 0 1%;
padding: 5px 0px 5px 0px;
}
.small-bottom {
position: relative;
float: left;
width: 39%;
height: auto;
background: #f8ffee;
margin: 0 0 0 1%;
padding: 5px 0px 40px 0px;
}
<div class="wrap-outer">
<div class="wrap-inner">
<div class="large-top"></div>
<div class="large-middle"></div>
<div class="large-bottom"></div>
<div class="small-top"></div>
<div class="small-middle"></div>
<div class="small-bottom"></div>
</div>
</div
I removed padding as some of my padding adds up to 85px height but it makes no difference. Also I put only these divs in a test page with nothing else and it's still the same. Anyone else had this problem?
CSS works as designed. Your floats are placed in the following way (see section 9.5.1 "Positioning the float" in the CSS 2.1 Specification):
<div class="large-top"> gets floated to the left, and it takes 60% of the available width.
Then <div class="large-middle"> comes and wants to float to the left. It cannot fit, because it wants 60% of the width and only 40% is available. So it gets placed under the previous <div>.
Then <div class="large-bottom"> comes and wants to float to the left. It cannot fit, because it wants 60% of the width and only 40% is available. So it gets placed under the previous <div>.
Then <div class="small-top"> comes and want to float to the left and it fits, because it wants 40% of the width, which is available. The consequence is that the top of the <div class="small-top"> gets aligned with the top of the <div class="large-bottom">. The key rule is
The outer top of a floating box may not be higher than the outer top of any block or floated box generated by an element earlier in the source document.
Therefore the top of <div class="small-top"> cannot be higher than the top of <div class="large-bottom">.
Then <div class="small-middle"> comes and wants to float to the left; due to the height of the <div class="large-bottom"> and <div class="small-top"> it finds place below the <div class="small-top">.
And the same for <div class="small-bottom">.
Figured it out. I should have used containers around the segments and then set the segments to 100% width.
Working code below;
<!doctype html>
<html>
<head>
<style>
.wrap-outer {
position: relative;
float: left;
width: 100%;
}
.wrap-inner {
position: relative;
float: left;
width: 92%;
margin: 0px 4% 0px 4%;
}
.wrap-small {position:relative; float:left; width:39%; margin-left:1%; height:100%;}
.wrap-large {position:relative; float:left; width:60%; height:100%;}
.large-top {
position: relative;
float: left;
width: 100%;
background: #e6f0d7;
margin: 0 0 0 0;
padding: 10px 0px 10px 0px;
border-radius: 15px 15px 0px 0px;
}
.large-middle {
position: relative;
float: left;
width: 100%;
background: #9ea790;
margin: 0 0 0 0;
padding: 5px 0px 5px 0px;
}
.large-bottom {
position: relative;
float: left;
width: 100%;
background: #f8ffee;
margin: 0 0 0 0;
padding: 5px 0px 80px 0px;
}
.small-top {
position: relative;
float: left;
width: 100%;
background: #e6f0d7;
margin: 0 0 0 0;
padding: 10px 0px 10px 0px;
border-radius: 15px 15px 0px 0px;
}
.small-middle {
position: relative;
float: left;
width: 100%;
background: #9ea790;
margin: 0 0 0 0;
padding: 5px 0px 5px 0px;
}
.small-bottom {
position: relative;
float: left;
width: 100%;
background: #f8ffee;
margin: 0 0 0 0;
padding: 5px 0px 40px 0px;
}
</style>
<meta charset="utf-8">
<title>Untitled Document</title>
</head>
<body>
<div class="wrap-outer">
<div class="wrap-inner">
<div class="wrap-large">
<div class="large-top">dsff</div>
<div class="large-middle">sfsfd</div>
<div class="large-bottom">sdffds</div>
</div>
<div class="wrap-small">
<div class="small-top">sfdsd</div>
<div class="small-middle">sdfdsf</div>
<div class="small-bottom">sfds</div>
</div>
</div>
</div>
</body>
</html>
Well i have 2 divs that i want to be side by side and aligned in the center of the page?
HTML:
<div id="box"></div>
<div id="box"></div>
CSS:
#box
{
width: 450px;
color: #ffffff;
height: 500px;
text-align: center;
padding-top: 15px;
-webkit-box-shadow: 0px 0px 8px 0px #000000;
-moz-box-shadow: 0px 0px 8px 0px #000000;
box-shadow: 0px 0px 8px 0px #000000;
background-color:#666;
border-radius:15px;
float:left;
margin-right:15px;}
This is what it looks like right now:
(I cant post photo's because i dont have 10 rep sorry!) but i want them to be under and aligned to the nav bar. Thank you.
What you need here is use inline-block instead of float that allows you to use the text-align property on the parent. Try this:
.box {
/*float:left; Remove this*/
display:inline-block; /*Add this*/
}
Since ID must be unique I use .box add that class on the divs
And on the parent use:
body {
text-align:center;
}
I use body in this case I don't see any other parent but change it for the real one
Check this Demo http://jsfiddle.net/WJfx5/
Also you can read This Article to know about the use of inline-block elements
put this 2 divs in another big div, and add margin: 0 auto; to it and a width.
<div class="bigdiv">
<div class="box"></div>
<div class="box"></div>
</div>
.bigdiv { margin:0 auto; width: 930px }
.box:last-child {margin-right: 0px;}
Create a wrapper around those div like
<div id="wrapper">
<div class="box"></div>
<div class="box"></div>
</div>
Then with css
#wrapper {
text-align: center;
width: ??; //add yours
height: ??; //add yours
}
FYI: id should be unique
Updates:
.box {
width: 450px;
color: #ffffff;
height: 500px;
display: inline-block;
-webkit-box-shadow: 0px 0px 8px 0px #000000;
-moz-box-shadow: 0px 0px 8px 0px #000000;
box-shadow: 0px 0px 8px 0px #000000;
background-color:#666;
border-radius:15px;
}
#wrapper{
text-align: center;
}
JSFiddle
I am not sure how to ask my question. If you go to this site: http://powellgroupconstruction.com/ I am trying to get the bottom of my content class to go over top my footer, like in this example image.
Here is my HTML:
<div class="wrapper">
<div class="content">
</div><!--content-->
</div><!--wrapper-->
<div class="footer">
</div><!--footer-->
and my CSS
.wrapper{
background-color:#FFF;
}
.content{
background-color:#FFF;
width:1027px;
min-height:300px;
margin:0 auto;
box-shadow: 12px 0 15px -4px #888, -12px 0 8px -4px #888;
border-bottom-left-radius:2em;
border-bottom-right-radius:2em;
}
.footer{
background-color:#000;
height:500px;
}
Any help would be much appreciated.
you have to only set the content to position relative and elevate a z-index.
At this point your content are over the footer.
But now to push your footer behind you need to add a margin-top -100px , because the height you have defined in your css.
try this css code. (this work):
.wrapper{
background-color:#FFF;
}
.content{
background-color:#FFF;
width:1027px;
min-height:300px;
margin:0 auto;
box-shadow: 12px 0 15px -4px #888, -12px 0 8px -4px #888;
border-bottom-left-radius:2em;
border-bottom-right-radius:2em;
position:relative;
z-index:999999;
}
.footer{
background-color:#000;
height:500px;
margin-top:-100px
}
You need to adjust the margins... Make the footer have a negative top-margin or the wrapper have a negative bottom margin... Oh, and give the wrapper a slightly elevated z-index...
.footer {
margin-top: -100px;
}
.wrapper {
position: relative;
z-index: 1;
}
OR
.wrapper {
margin-bottom: -100px;
position: relative;
z-index: 1;
}
I personally prefer the first one...
use z-index property higher than the footer
.wrapper{
background-color:#FFF;
}
.content{
z-index:100;
background-color:#FFF;
width:1027px;
min-height:300px;
margin:0 auto;
box-shadow: 12px 0 15px -4px #888, -12px 0 8px -4px #888;
border-bottom-left-radius:2em;
border-bottom-right-radius:2em;
margin-bottom: -100px;
}
.footer{
z-index:1;
background-color:#000;
height:500px;
}
.wrapper,.footer,.content{
position:relative;
}
Also set position as relative to work the z-index property.For more detail and example visit css-tricks.com.Also set margin-bottom as negative value to overflow above the footer
You can achieve the result by using z-index property and saying position : absolute in div
.content{
z-index:1000;
position : absolute
.........
}
.footer
{
z-index:0;
position : absolute
}
The problem you have is the wrapper has a background-color. z-index only works with siblings, so you can do this: remove background-color: #fff; from .wrapper (otherwise the .wrapper color will block the footer from showing where it overlaps), or move .footer inside of .wrapper. Then add the following:
.footer {
position: absolute;
top: 250px;
z-index: -1;
width: 100%;
}
Here's a working Demo
Just use the following css rules
.content {
background-color: #FFFFFF;
border-bottom-left-radius: 2em;
border-bottom-right-radius: 2em;
bottom: -90px;
box-shadow: 12px 0 15px -4px #888888, -12px 0 8px -4px #888888;
margin: 0 auto;
min-height: 300px;
position: relative;
width: 1027px;
height: 570px;
z-index: 1000;
}
.footer {
background-color: #000000;
height: 500px;
margin: 0 auto;
position: relative;
}
Basically, I'm attempting to get two divs side by side, here's the following layout I'm attempting to do.
<div id="content">
<div id="search">
</div>
<div id="results">
<h2>Waiting!</h2>
</div>
</div>
Here's the CSS in which is positioning these divs they're side by side but pushed completely to the left of the page when I want them centred.
#content {
}
#search {
float: left;
width: 400px;
height: 350px;
margin: 10px auto;
overflow: auto;
-moz-box-shadow: #555 0 0 8px;
-webkit-box-shadow: #555 0 0 8px;
-o-box-shadow: #555 0 0 8px;
box-shadow: #555 0 0 8px;
}
#results {
float: left;
width: 400px;
height: 350px;
margin: 10px auto;
overflow: auto;
-moz-box-shadow: #555 0 0 8px;
-webkit-box-shadow: #555 0 0 8px;
-o-box-shadow: #555 0 0 8px;
box-shadow: #555 0 0 8px;
}
You can center the container area using margin: 0 auto. Try this -
#content{ margin: 0 auto; width: 90%; }
This might helps.
you have to center the wrapping div to center both of them. try it live here http://jsfiddle.net/dAVub/
#content {
width:800px;
margin: 0 auto;
}
There are many ways of doing this, but the most important thing is that you should set the overflow on your container appropriately when your inner elements float. For example, you could just replace your CSS altogether with:
#content {
overflow:hidden; /* or auto, or visible */
width:820px;
margin-left:auto; /* not necessary by default */
margin-right:auto; /* not necessary by default */
}
#content > div {
float:left;
margin: 10px auto;
-moz-box-shadow:#555 0 0 8px;
-webkit-box-shadow:#555 0 0 8px;
-o-box-shadow:#555 0 0 8px;
box-shadow:#555 0 0 8px;
}
add this to your css
#content {
text-align:center;}
replace float:left with display:inline-block; in #search and #results
Demo
I am trying to make two floated divs with box-shadow to display the shadows outside of their container. It won't display because their parent has overflow: auto set, which cuts off the shadow, but is nevertheless necessary so the parent won't collapse because both child divs are floated. If I set the parent to overflow: visible it collapses, obviously, because the children are floated. Thanks for any help.
JS Fiddle: http://jsfiddle.net/zJGVz/
HTML
<div id='parent'>
<div id='child1'></div>
<div id='child2'></div>
</div>
CSS:
#parent {
margin: 0 auto;
width: 200px;
background: green;
overflow: auto;
}
#child1 {
width: 150px;
height: 200px;
float: left;
background: pink;
box-shadow: 0 0 10px 0 #000000;
}
#child2 {
width: 30px;
height: 200px;
float: left;
margin-left: 20px;
background: blue;
box-shadow: 0 0 10px 0 #000000;
}
You can add a 5px margin to both children on the sides that touch the edge of the parent.
#child1 {
width: 700px;
float: left;
box-shadow: 0 0 5px 0 #000000;
margin:0 0 5px 5px;
}
#child2 {
width: 300px;
float: left;
box-shadow: 0 0 5px 0 #000000;
margin:0 5px 5px 0;
}
See the JSFiddle.
Try changing the overflow to 'visible'
overflow: visible;