I have 3 boxes and the first one it's a bit up then the other 2..
The other 2 boxes are ok next to eachother and in the same line.. but first box its not on the same line with the other 2.. its a few pixels up.
This is the css code
#services1 {
float:left;
width: 33%;
padding: 100px 0px 0px 0px;
text-align: center;
background-color: black;
height: 400px;
}
#services2 {
float:left;
width:33%;
padding: 80px 0px 0px 0px;
text-align: center;
background-color: black;
height: 400px;
}
#services3 {
float:left;
width: 33%;
padding: 80px 0px 0px 0px;
text-align: center;
background-color: black;
height: 400px;
}
How i can fix that?
use this css -
box-sizing: border-box;
on each box. This help you produce desired and accurate result.
Fiddle
Reduce the padding on the first box to 80px(Same as other two boxes). The padding value adds to the overall height of the box.
#services1 {
float:left;
width: 33%;
padding: 80px 0px 0px 0px;
text-align: center;
background-color: lightblue;
height: 400px;
}
#services2 {
float:left;
width:33%;
padding: 80px 0px 0px 0px;
text-align: center;
background-color: tomato;
height: 400px;
}
#services3 {
float:left;
width: 33%;
padding: 80px 0px 0px 0px;
text-align: center;
background-color: lightblue;
height: 400px;
}
<div id="services1"></div>
<div id="services2"></div>
<div id="services3"></div>
Update the first block, you need padding 100px to 80px
#services1 {
float:left;
width: 33%;
padding: 80px 0px 0px 0px;
text-align: center;
background-color: red;
height: 400px;
}
Its because of padding-top: 100px; other two boxes were having 80px padding.. Demo
As all the boxes were of 400px height with padding, you can adjust height or change the padding to 80px of 1st box.
#services1 {
float:left;
width: 33%;
padding: 100px 0px 0px 0px;
text-align: center;
background-color: red;
height: 380px; / *changed value*/
}
Related
I am attempting to code a blog page with a header, a navigation, a left sidebar, a right sidebar, and content. All of these sections are child divs being wrapped in an outer div. However, not all the properties of the parent div are being recognized, and bgSide is appearing overtop of the wrapper instead of underneath it and I cannot for the life of me figure out why.
I do not have any floats and I have already run my code through a program to ensure there's nothing wrong with the markup. overflow: hidden does nothing.
UPDATE ONE: Solved width property not inheriting. Still need solutions for wrapper height not working, left and right aligning to body instead of wrapper, and image showing up on top instead of behind.
UPDATE TWO: Solved height property not working by changing height: 100%; to height: 100vh;
<!DOCTYPE html>
<head>
<style>
body
{
background:{color:background};
background-repeat: no-repeat;
background-position: center top;
background-image: url('{image:background}');
margin: 0px;
padding: 0px;
word-wrap: break-word;
}
#bgside img
{
position: fixed;
z-index: 1;
margin-left: 0px;
margin-bottom: 0px;
height: 100%;
padding: 0px;
}
#wrapper
{
z-index: 2;
height: 100%;
min-height: 300px;
width: 60%;
min-width: 600px;
max-width: 900px;
margin: 0px auto; /* center the body */
padding: 0px;
border: 1px solid {color:side link border};
border-top: 0px;
border-bottom: 0px;
text-align: center;
background: {color:background};
-moz-box-shadow: 0px 0px 20px 20px #000
-webkit-box-shadow: 0px 0px 20px 20px #000;
box-shadow: 0px 0px 20px 20px #000;
}
#header
{
background: {color:header background};
position: fixed;
z-index: 3;
top: 0px;
width: 60%;
min-width: 600px;
max-width: 900px;
height: 100px;
padding: 0px;
border: 1px solid {color:side link border};
border-width: 0px 1px;
text-align: center;
vertical-align: center;
}
#header img
{
background: transparent;
width: 100%;
min-width: 600px;
max-width: 900px;
height: 100px;
min-height: 100px;
max-height: 100px;
}
#nav
{
background: {color:navigation background};
position: fixed;
z-index: 4;
top: 100px;
width: 60%;
min-width: 600px;
max-width: 900px;
height: auto;
padding: 10px 0px 15px 0px;
border: 1px solid {color:side link border};
text-align:center;
line-height:5px;
-moz-box-shadow: 0px 0px 10px 0px #000;
-webkit-box-shadow: 0px 0px 10px 0px #000;
box-shadow: 0px 0px 10px 0px #000;
}
#nav a
{
background: {color:top link bg};
padding: 2px 15px 3px 15px;
margin: 4px;
font-family: calibri;
font-size: 11px;
text-transform: uppercase;
text-decoration: none;
text-align: center;
color: {color:top link text};
-webkit-transition: all 0.5s ease-in-out;
}
#nav a:hover
{
color:{color:top link text hover};
background:{color:top link bg hover};
-webkit-transition: all 0.5s ease-in-out;
}
#right
{
background: {color:sidebar background};
position: fixed;
z-index: 3;
top: 135px;
right: 0px;
height: 100%;
width: 10%;
min-width: 150px;
text-align: center;
-moz-box-shadow: 0px 0px 10px 0px #000;
-webkit-box-shadow: 0px 0px 10px 0px #000;
box-shadow: 0px 0px 10px 0px #000;
}
#left
{
background: {color:sidebar background};
position: fixed;
z-index: 3;
top: 135px;
left: 0px;
height: 100%;
width: 10%;
min-width: 150px;
text-align: center;
-moz-box-shadow: 0px 0px 10px 0px #000;
-webkit-box-shadow: 0px 0px 10px 0px #000;
box-shadow: 0px 0px 10px 0px #000;
}
#content
{
/* Not coded yet */
}
</style>
</head>
<body>
<div id="bgside"><img src="{image:bgside}" alt="bgSide"/></div>
<!-- START OF CONTAINER -->
<div id="wrapper">
<div id= "header"><img src="{image:header}" alt="header"/></div>
<div id= "nav">
A BUNCH OF LINKS
</div>
<div id="left">
CONTENT
</div>
<div id="right">
CONTENT
</div>
<div id="content">
CONTENT
</div>
</div>
<!-- END OF CONTAINER -->
</body>
</html>
Try adding inherit to things inside the wrap that don't cascade. Some programs do this for you. For example:
height:inherit;
background:inherit;
color:inherit;
This may take a while but it works for me!
SOLUTIONS:
Width property not inheriting:
Change width properties of #nav and #header to width: inherit;
Height property not being recognized in wrapper:
In wrapper CSS, change height: 100%; to height: 100vh;
Left and Right ignoring wrapper and aligning to body:
Remove this code:
position: fixed;
z-index: 3;
top: 135px;
right: 0px;
and replace with float: right; and do the same with #left while assigning left instead of right. Then add overflow: hidden; to #wrapper
bgside ignoring z-index and layering on top:
Change z-index: 0; to z-index: -1;
I want to achieve the expected layout below (first image) but stuck with actual layout (second one)
Here is how I started
.parent .child{
float: left;
width: 25%;
height: 50px;
margin: 5px 2px 2px 2px;
background: #000;
}
How can i take it further to expected layout?
keep css :change float left to display:inline-block
.parent{ text-align: center;}
.parent .child{
display:inline-block;
width: 25%;
height: 50px;
margin: 5px 2px 2px 2px;
background: #000;
}
Try like this: LINK
css:
.parent{
margin: 0 auto;
display:block;
text-align:center;
}
.parent .child{
display:inline-block;
width: 25%;
height: 50px;
margin: 5px 2px 2px 2px;
background: #000;
}
I'm having issues with aligning some elements inside a nav bar.
Here's an example on jsfiddle: http://jsfiddle.net/flobar/b7nzR/
Here's the html:
<div id="nav">
<div id="menu">Menu</div>
<div id="logo">Logo</div>
<div id="settings">Settings</div>
</div>
Here's the css:
#nav {
height: 60px;
border: 1px solid #ccc;
}
#menu {
width: 70px;
height: 30px;
margin-top: 15px;
float: left;
background: #ccc;
}
#logo {
width: 200px;
height: 30px;
margin: 15px auto 0 auto;
background: #ccc;
}
#settings {
width: 70px;
height: 30px;
margin-top: 15px;
float: right;
background: #ccc;
}
The issue is that the far right block is being pushed down by the center block, but I'm not sure why.
Can anyone help please.
I'll explain you what's going on there, you have your first div set to float: left; which will float nicely, now your second div isn't floated either left or right so it's taking entire available horizontal space leading the third div to render below.
Demo
#logo {
width: 200px;
height: 30px;
margin: 15px auto 0 auto;
background: #ccc;
float: left;
margin-left: 120px;
}
Now am aware of the fact that you want to center align your #logo so in this case, make your #logo div position: absolute;
#nav {
height: 60px;
border: 1px solid #ccc;
position: relative; /* Be sure you use this else your div will fly out in the wild */
}
#logo {
width: 200px;
height: 30px;
margin: 15px auto 0 auto;
background: #ccc;
position: absolute; /* Takes your element out of the flow*/
left: 50%; /* 50% from the left */
margin-left: -100px; /* 1/2 of total width to ensure that it's exactly centered */
}
Demo 2
You must float also the #logo;
#logo {
float:left;
width: 200px;
height: 30px;
margin: 15px auto 0 auto;
background: #ccc;
}
example
#nav {
height: 60px;
border: 1px solid #ccc;
display:table;
}
#menu {
width: 70px;
height: 30px;
margin-top: 15px;
float: left;
background: #ccc;
display: inline-table;
}
#logo {
width: 200px;
height: 30px;
margin: 15px auto 0 auto;
background: #ccc;
display: inline-table;
}
#settings {
width: 70px;
height: 30px;
margin-top: 15px;
float: right;
background: #ccc;
display:inline-table
}
My HTML:
<!-- Content -->
<div class="content">
<!-- Content left -->
<div class="content-left"></div>
<!-- Content center -->
<div class="content-center">
</div>
<!-- Content right -->
<div class="content-right"></div>
</div>
My CSS:
.content
{
background-color: black;
height: auto;
margin: 80px auto 0px auto;
min-height: 100px;
padding: 10px 10px;
width: 1200px;
}
.content-center
{
-khtml-box-shadow: 0px -3px 5px rgba(0,0,2,2);
-moz-box-shadow: 0px -3px 5px rgba(0,0,2,2);
-webkit-box-shadow: 0px -3px 5px rgba(0,0,2,2);
background-color: #ffffff;
border-left: 1px solid;
border-right: 1px solid;
border-color: #999999;
box-shadow: 0px -3px 5px rgba(0,0,2,2);
height : 900px;
float: left;
width : 800px;
}
.content-left
{
background-color: #fff;
float: left;
height: 300px;
width: 190px;
}
.content-right
{
background-color: #fff;
float: left;
height: 300px;
width: 190px;
}
My problem is DIV with class "content" don't have same height with other element as child of this tag. I want div with class "content" have dynamic height according to "content-center", "content-left" or "content-right". I have use min-height and height : auto in class "content" but it still not correct.
Add overflow:auto to .content
.content{
width: 1200px;
min-height: 100px;
height: auto;
margin: 80px auto 0px auto;
background-color: black;
padding: 10px 10px;
overflow:auto
}
DEMO
Try this:
* {
margin: 0;
padding: 0;
}
html, body {
height:100%;
}
.content {
width: 1200px;
min-height: 100px;
height: auto;
margin: 80px auto 0px auto;
background-color: black;
padding: 10px 10px;
display:table;
overflow:hidden;
height:100%;
}
Demo Here
Please check out this CSS:
body {
margin: 50px 0px; padding: 0px;
}
.one {
background: #151515;
height: 700px;
width: 900px;
margin: 0px auto;
padding: 0px 0px 0px 0px;
}
#two {
background: #e6e6e6;
height: 140px;
width: 900px;
}
(http://jsfiddle.net/UvvPC/)
I want to use margin-top to move the grey box in the CSS above.
I want the grey box to be in the middle of the black box but I have been told margin-top does not go well with internet explorer.
What do I use instead?
Use margin-bottom on the element before it :)
Using display: table-cell won't work in IE6-7. If that's a concern for you, you could use the following technique :
.one {
background: #151515;
height: 700px;
width: 900px;
margin: 0px auto;
padding: 0px 0px 0px 0px;
position: relative;
}
.two {
background: #e6e6e6;
height: 140px;
width: 900px;
position: absolute;
top: 50%;
margin-top: -70px; /* half of the height */
}
http://jsfiddle.net/HYjke/
I don't know why do you need to use margin-top to do this task. This may help you:
.one {
background: #151515;
height: 700px;
width: 900px;
margin: 0px auto;
padding: 0px 0px 0px 0px;
display:table-cell;
vertical-align:middle;
}