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
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>
I'm having an issue with div overlapping, I believe it's to do with different screen resolutions.
This is my CSS:
#menu {
background: #fff;
width: 790px;
}
#site {
border-radius:15px 15px 15px 15px;
background: #fff;
width: 1075px;
margin-left: auto;
margin-right: auto;
box-shadow: 0px 0px 15px 0px #000;
padding: 2px;
-moz-box-shadow: 0 0 15px 0px #000;
-webkit-box-shadow: 0 0 15px 0px #000;
}
#social {
border-radius:15px 15px 15px 15px;
background: #fff;
width: 100px;
box-shadow: 0px 0px 5px 2px #000;
padding: 5px;
float:left;
position:fixed;
-moz-box-shadow: 0 0 15px 0px #000;
-webkit-box-shadow: 0 0 15px 0px #000;
}
#categories {
border-radius:15px 15px 15px 15px;
background: #fff;
width: 100px;
box-shadow: 0px 0px 5px 2px #000;
padding: 5px;
float:left;
position:fixed;
top: 250px;
-moz-box-shadow: 0 0 15px 0px #000;
-webkit-box-shadow: 0 0 15px 0px #000;
}
#categories img {
border-radius: 15px 15px 15px 15px;
}
And this is my HTML:
<div align="center">
<div id="social">
<h3 style="font-size:18px">Follow Us!</h3>
<a href="#">
<img src="logo.png" />
</a>
<a href="#">
<img src="logo2.png">
</a>
</div>
<div id="categories">
<h3 style="font-size:18px">Categories!</h3>
<a href="categories.php">
<img src="gamereviewresized.png">
</a>
</div>
When I visit my site, it looks like this: http://prntscr.com/6v5qaj
It looks like this for someone with a different screen resolution though: http://prntscr.com/6v5qp3
Help would be appreciated on how to prevent overlapping on different resolutions.
Thanks!
Your #site div has a 1075px fixed width and auto left and right margins.
#site {
width: 1075px;
margin-left: auto;
margin-right: auto;
}
Meanwhile, the Game Reviews tab has a fixed-width of 100px.
Consequently, any screen width less than 1275px (where the margin between the left-edge of the screen and the left-edge of #site is narrower than 100px) will lead to the Game Reviews tab overlapping #site.
Suggestions:
1) Give #site a left-hand margin wider than the 100px wide Game Reviews tab (and right-hand margin to match)
2) For #site, change the width: 1075px; declaration to max-width: 1075px; (this will enable the width of #site to shrink when the screen is narrower than 1275px).
Example:
#site {
max-width: 1075px;
margin-left: 120px;
margin-right: 120px;
}
You'll have to use media queries to adjust the height the image , in your case i am guessing the image is :
<img src="gamereviewresized.png">
here is a simple example how you can adjust the height of a img using a media query :
<img src="http://farm5.static.flickr.com/4005/4706825697_c0367e6dee_b.jpg" alt="">
CSS ::
img{
max-width:400px;
height: auto;
}
#media only screen and (max-width : 480px) {
img{
max-width:200px;
height: auto;
}
}
fiddle here. , reduce the width of the display section to below 480px to see what i mean .
you can study more media queries here.
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
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;
}
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;