How can I set those divs to be equally, I gave it first width:50%; bu then I wanted to set a margin for each one, so I set the width to 49% and gave it margin-right:1%; but it doesn't seem right because I have also margin-right on the right
Code:
ul li {
list-style-type:none;
background:#f29;
width:49%;
height:100px;
float:left;
margin-right:1%;
margin-bottom:1%;
}
Example:
http://jsfiddle.net/bnjv39o3/
You can use box-sizing: border-box which makes the width: 50% take into account the padding & border and then you can remove the margin-right
Using Flexbox this can be easily accomplished. See this
* {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
html, body {
height: 100%;
}
body {
font-family: sans-serif;
line-height: 1.4;
}
h1 {
font-size: 150%;
}
p {
margin-bottom: 10px;
}
.paddingBlock {
padding: 20px 0;
}
.eqWrap {
display: flex;
}
.eq {
padding: 10px;
}
.eq:nth-of-type(odd) {
background: yellow;
}
.eq:nth-of-type(even) {
background: lightblue;
}
.equalHMRWrap {
justify-content: space-between;
flex-wrap: wrap;
}
.equalHMR {
width: 49%;
margin-bottom: 2%;
}
<div class="paddingBlock">
<div class="equalHMRWrap eqWrap">
<div class="equalHMR eq">boo</div>
<div class="equalHMR eq">shoo</div>
<div class="equalHMR eq">clue</div>
<div class="equalHMR eq">boo <br> boo </div>
<div class="equalHMR eq">shoo</div>
<div class="equalHMR eq">clue</div>
</div>
</div>
You can solve this but adding padding-left & padding-top to the parent
* {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
body {
padding: 0;
margin: 0;
}
ul {
padding: 0;
padding-left: 1%;
padding-top: 1%;
margin: 0;
}
ul li {
list-style-type: none;
background: #f29;
width: 49%;
height: 100px;
float: left;
margin-right: 1%;
margin-bottom: 1%;
}
<ul>
<li>BOX1</li>
<li>BOX2</li>
<li>BOX3</li>
<li>BOX4</li>
<li>BOX5</li>
<li>BOX6</li>
</ul>
Use child selectors. Here is the fiddle
ul li {
list-style-type:none;
background:#f29;
width:49.5%;
height:100px;
float:left;
margin-bottom:1%;
}
ul li:nth-child(odd)
{ margin-right:0.5%;
}
ul li:nth-child(even)
{margin-left:0.5%;}
Related
When I increase or decrease margin-top of #nav it affects #header, but when increasing margin-top of #header it doesn't affect #nav.
How to correct this to when I change whether nav or header it shouldnt affect other?
body {
width: 960px;
margin: auto;
color: #000000;
background-color: #fff;
}
h1 {
margin: 0;
padding: 5px;
}
#header {
float: left;
color: #000000;
font-size: 20px;
margin-top: 10px;
}
#header h1 {
float: left;
}
#nav {
width: 900px;
;
height: 20px;
position: relative;
margin-top: 34px;
}
#nav li {
display: inline;
float: left;
}
<div id="header">
<h1>rrrr</h1>
</div>
<div id="nav">
<ul>
<li>sss</li>
<li>www</li>
<li>fff</li>
<li>ttt</li>
</ul>
</div>
You are facing a margin-collapsing issue. Since you made the header to be a float element, the #nav become the first in-flow element thus its margin will collapse with body margin.
top margin of a box and top margin of its first in-flow child
So when you increase the margin of the nav you increase the collapsed margin which is the margin of the body and you push all the content down including the #header.
To fix this you need to avoid the margin collapsing by adding (for example) a padding-top to the body.
body {
width: 960px;
margin: auto;
color: #000000;
background-color: #fff;
padding-top: 1px;
}
h1 {
margin: 0;
padding: 5px;
}
#header {
float: left;
color: #000000;
font-size: 20px;
margin-top: 10px;
}
#header h1 {
float: left;
}
#nav {
width: 900px;
;
height: 20px;
position: relative;
animation: ani1 2s;
margin-top: 34px;
}
#nav li {
display: inline;
float: left;
}
<div id="header">
<h1>rrrr</h1>
</div>
<div id="nav">
<ul>
<li>sss</li>
<li>www</li>
<li>fff</li>
<li>ttt</li>
</ul>
</div>
I have an HTML code that can be simplified as:
<body>
<div class='header'>
</div>
<div class='main'>
<nav class='menu'>
<a>a</a><a>b</a>
</nav>
<div class='content'>Here be dragons!</div>
</div>
</body>
It uses the following CSS:
html, body
{
margin: 0;
padding: 0;
background-color: #7effad;
}
.header
{
background-color: black;
position: relative;
height: 20px;
}
.main
{
position: relative;
}
.main .menu
{
background-color: white;
}
.main .menu a,
.main .menu a:visited,
.main .menu a:active
{
display: block;
float: left;
background-color: blue;
border-radius: 2px;
margin: 5px;
}
.main .menu:after
{
display: block;
content: "";
clear: both;
height: 0;
line-height: 0;
visibility: hidden;
}
.main .content
{
position: relative;
padding-top: 12px;
padding-bottom: 10px;
padding-left: 15px;
padding-right: 15px;
margin-left: 21px;
margin-right: 21px;
margin-top: 15px;
margin-bottom: 0;
min-height: 1500px;
background-color: #d4b074;
}
As you can see here this generates some sort of a margin between the header and the menu. However, if i remove the content tag all together this margin magically disappears.
I don't understand how it can alter the appearance, since it is a normal block that follows the menu.
Edit: The problem only occurs in Firefox, Chromium does everything just fine.
The problem goes away if i set margin-top for .main .content to 0; however if margin-bottom of .main .menu is non-zero the problem returns.
i have a Problem i have these Markup & CSS i wanted, that the H2 and the p Tag are one the same Line.At the moment the h2 is a little bit under the vertical Line.I wouldn't use margin or padding have anyone a Solution?
Thanks for your help.
.content-left {
float: left;
width: 50%;
}
.content-right {
float: right;
width: 50%;
}
.content-left, .content-right {
min-height: 10em;
padding-left: 2%;
padding-right: 2%;
margin-top: 2%;
margin-bottom: 2%;
}
.content-box {
border-bottom: 1px dotted black;
overflow: hidden;
min-height: 5em;
}
.content-box ul {
list-style: none;
}
.content-box ul li {
text-indent: -1.4em;
padding-bottom: .3em;
}
.content-box ul li {
text-indent: -1.4em;
}
.content-box ul li:before {
font-family: fontawesome;
content: "\f054";
float: left;
width: 1.4em;
margin-top: .2em;
color: #0062ae;
font-size: 1em;
}
.content-box ul {
padding: 0;
}
.content-box p {
font-weight: 300;
}
.content-box li {
font-size: .9em;
font-weight: 300;
}
.content-left h2 {
color: #0062ae;
text-align: right;
word-wrap: break-word;
}
.content-right p {
line-height: 1.5em;
}
<div id="main-content">
<div class="wrapper">
<div class="content-box">
<div class="content-left">
<h2 class="blue font-xs">...</h2>
</div>
<div class="content-right">
<p>..</p>
<p>...</p>
</div>
</div>
Your snippet doesn't work because you are missing to set box-sizing property in your CSS:
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
Take a look at this jsFiddle.
Without setting box-sizing property to border-box, the left and right paddings you added caused content-left and content-right divs to exceed 50% width. See this document for more details:
border-box: The width and height properties (and min/max properties)
includes content, padding and border, but not the margin
By default, padding is added to the width of a block element, eg. 2 divs with 50% width and a 1% padding become a total width of 102% - So you would need to set them at 49.5% width and 1% padding.
Alternatively, you can use box-sizing: border-box which makes the padding become part of the width, so 2 divs at 50% width and 1% padding will remain 50% width each, hence totaling 100%.
I have set the Box-sizing. Have a look i uploaded a full fiddle with all CSS Files.
http://jsfiddle.net/4pqzLk5f/
.content-left {
float: left;
width: 50%;
}
.content-right {
float: right;
width: 50%;
}
.content-left, .content-right {
min-height: 10em;
padding-left: 2%;
padding-right: 2%;
margin-top: 2%;
margin-bottom: 2%;
}
.content-box {
border-bottom: 1px dotted black;
overflow: hidden;
min-height: 5em;
}
.content-box ul {
list-style: none;
}
.content-box ul li {
text-indent: -1.4em;
padding-bottom: .3em;
}
.content-box ul li {
text-indent: -1.4em;
}
.content-box ul li:before {
font-family: fontawesome;
content: "\f054";
float: left;
width: 1.4em;
margin-top: .2em;
color: #0062ae;
font-size: 1em;
}
.content-box ul {
padding: 0;
}
.content-box p {
font-weight: 300;
}
.content-box li {
font-size: .9em;
font-weight: 300;
}
.content-left h2 {
color: #0062ae;
text-align: right;
word-wrap: break-word;
}
.content-right p {
line-height: 1.5em;
}
<div id="main-content">
<div class="wrapper">
<div class="content-box">
<div class="content-left">
<h2 class="blue font-xs">...</h2>
</div>
<div class="content-right">
<p>..</p>
<p>...</p>
</div>
</div>
I am having an issue with elements not vertically aligning in the middle of it's parent div.
CSS:
/* Main body structure */
body{
font-size:0.5em;
}
.main-wrapper {
width: 90%;
margin: auto;
background-color: #efefef;
}
* {
box-sizing: border-box;
}
/* Main header/logo/navigation structure */
.main-header {
padding: 20px;
background-color: #003;
display:table;
width: 100%;
min-height: 150px;
}
.main-logo,
.main-nav,
.main-nav li {
display: inline-block;
}
.main-logo,
.main-nav, {
display: table-cell;
vertical-align: middle;
}
.main-logo,
.main-nav li {
padding: 10px 20px;
border-radiues: 5px;
background-color:#3CC;
}
.main-nav li {
margin-right: 10px;
display:inline-block;
}
.main-logo {
background-color:#3F6;
}
.main-nav {
padding: 10px;
}
.main-logo a,
.main-nav a {
color: #FFF;
text-decoration:none;
display:block;
text-align:center;
padding: 10px 20px;
}
#media ( max-width: 768px) {
.maing-logo,
.main-nav,
.main-nav li {
display:block;
width: initial;
margin: initial;
}
.main-nav {
padding-left: initial;
}
.main-nav li {
margin-top: initial;
}
HTML:
<div class="main-wrapper">
<header class="main-header">
<h1 class="main-logo">logo</h1>
<div class="main-nav">
<ul class="main-nav">
<li>HOME</li>
<li>SEARCH</li>
<li>MESSAGES</li>
<li><a href=logout.php>LOGOUT</a></li>
</ul>
</header>
</div>
So the issue being that if I alter the min-height of the main-header class the elements stay in the same place and do not automatically adjust but my code looks like it should be automatically middle aligning the elements?
if you use display:table; , you should use height and not min-height . Behavior of this display rule will do that the element will expand to fit its content anyway.
You have an extra , , that kills you rule .
correct is :
.main-header {
padding: 20px;
background-color: #003;
display:table;
width: 100%;
/*min-*/height: 150px;
}
.main-logo,
.main-nav,
.main-nav li {
display: inline-block;
}
.main-logo,
.main-nav/* , */ {
display: table-cell;
vertical-align: middle;
}
I'm having trouble putting a sticky footer onto a site I'm working on.
I've tried everything and can't think of what the problem could be.If someone could take a look at the coding id appreciate it.
As some content on the site is only going to be small paragraphs i need a sticky footer to stick to the bottom to stop it floating in the middle of the site.
I have the content in a div that over laps a image and id like the footer to float on the bottom. however when i close the divs i can't get the footer to stay at the bottom, it starts floating under the image banner. Ive tried position:fixed; but i don't want that as it overlaps the content. Thanks
HTML
<!doctype html>
<html><head>
<meta charset="UTF-8">
<title>Linear Partners</title>
<meta name="viewport" content="initial-scale=1.0, user-scalable=yes" />
<meta name="viewport" content="initial-scale=1, maximum-scale=2" />
<link href="style1.css" rel="stylesheet" />
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
<script src="js/modernizr.js"></script>
<script src="js/respond.min.js"></script>
<script src="js/prefixfree.min.js"></script>
<script type='text/javascript' src='js/main.js'></script>
<script>
$(document).ready(function() {
$('#menu-toggle').click(function () {
$('#menu').toggleClass('open');
e.preventDefault();
});
});
</script>
</head>
<body>
<div id="wrap">
<div id="mainpage">
<div id="header">
<img src="images/Linear.Partners.Logo.png" width ="173" height="65" alt="logo">
<nav class="nav clearfix">
<a id="menu-toggle" class="anchor-link" href="#"><img src="images/3lines.png" width ="31" height="25"></a>
<ul class="simple-toggle" id="menu">
<li>Home</li>
<li>About
<ul>
<li>Team</li>
</ul>
</li>
<li>Expertise</li>
<li>Research</li>
<li>Best Practice</li>
<li>Join Our Team</li>
<li>Contact</li>
</ul>
</nav>
</div>
<div id="bg-image"style="background-image:url(images/slide1.jpg); background-position:50% 50%;">
<div id="main" class="wrapper clearfix">
<left>
<h1>Privacy Policy</h1>
<p>Linear Partners are required by law to comply with the UK and European Data Protection legislation. We are committed to ensuring that all employees comply with the Acts in order to maintain the confidentiality of personal data.</p>
</left>
<right>
<h1>Privacy Policy</h1>
Linear Partners are required by law to comply with the UK and European Data Protection legislation. We are committed to ensuring that all employees comply with the Acts in order to maintain the confidentiality of personal data.</right>
</div>
</div>
<div class="clear"></div>
<footer>
<div id="footer-wrapper">
<div id="footer-content">
<div class="Copyright">
Copyright © 2014 Linear Partners. All rights reserved.
</div>
<div class="footer-nav">
Home Privacy Diversity Policy
</div>
</div>
</div>
</footer>
<!-- #end footer area -->
</body>
</html>
CSS
html, body {
height: 100%; margin: 0; padding: 0;
}
body
{
margin:0;
padding:0;
background: #fff;
font: 13px'helvetica', ariel, sans-serif;
color: #000;
}
/*Header*/
#header
{
position:relative;
width:autopx;
max-width:950px;
height:65px;
margin: 0 auto;
z-index:10000;
background: #fff;
padding:20px;
}
#wrap {min-height: 100%;}
#mainpage {
padding-bottom: 85px;} /* must be same height as the footer */
.footer {position: relative;
margin-top: -85px; /* negative value of footer height */
height: 85px;
clear:both;}
/* nav */
.nav
{
width:autopx;
float:right;
padding-top:22px;
}
ul.simple-toggle
{
list-style:none;
padding: 0px;
margin: 0px;
text-align: center;
}
ul.simple-toggle li {
display: inline-block;
text-align: center;
border-right: 1px solid #cfcfcf;
}
ul.simple-toggle li:last-child
{
border-right: none;
}
ul.simple-toggle li a
{
display: block;
padding-left: 10px;
padding-right: 10px;
padding-top: 5px;
padding-bottom: 5px;
color:#000;
text-decoration:none;
}
.anchor-link
{
display: none;
background-color: #16447b;
margin-top: -10px;
float: right;
height:40px;
width:40px;
}
.anchor-link img
{
margin:9px 6px 0px 4px ;
}
#mobile-nav
{
display:none;
}
nav ul ul
{
display: none;
}
nav ul li:hover > ul
{
display: table-cell;
text-align: center;
vertical-align: middle;
}
nav ul
{
list-style: none;
position: relative;
display: inline-table;
}
nav ul li:hover
{
background: #16447b;
color: #fff;
}
nav ul li:hover a
{
color: #fff;
}
nav ul ul
{
background: #092a55; padding:0px; margin:0px;
position: inherit; top: 100%;
}
nav ul ul:hover a
{
background: #6689b3;
}
/*wrapper*/
#bg-image {
z-index:-5780000;
float: left;
width: 100%;
height:250px;
background-size:cover;
margin-top:2px;
border: 2px solid #16447b;
border-width: 2px 0;
border-color: #fff;
box-shadow: 0 2px 0px #16447b, 0 -2px 0px #16447b;
}
.wrapper
{
width:90%;
max-width: 910px;
margin: auto;
margin-top:125px;
padding:20px;
background: #fff;
height:150px;
}
#main left{
background-color: #fff;
width: 62.5%;
float: left;
}
#main right
{
background-color:#fff;
width: 35%;
float: right;
}
/*Footer*/
#footer-wrapper
{
height:65px;
margin: 0 auto;
background: #000;
padding:20px;
}
#footer-content
{
height:65px;
max-height:120px;
position:relative;
width:100%;
max-width:950px;
margin: 0 auto;
margin-top:20px;
color: #fff;
}
.Copyright
{
margin-top:5px;
float:left;
color: #fff;
text-decoration:none;
}
.footer-nav
{
margin-top:5px;
float:right;
color: #fff;
text-decoration:none;
margin-right:-6px;
}
.footer-nav a
{
color: #fff;
padding-left:6px;
padding-right:5px;
border-right: 1px solid #fff;
text-decoration:none;
float: left;
}
.footer-nav a:last-child
{
border:none;
}
.footer-nav a:hover
{
text-decoration:underline;
}
.clear {
clear:both;
}
/*media*/
#media (max-width:750px){
ul.simple-toggle
{
display: none;
}
.anchor-link, #mobile-nav
{
display: block;
}
ul.open
{
background-color: #16447b;
display: block;
list-style: none outside none;
margin: 0;
padding: 0;
position: absolute;
right: 20px;
top: 100%;
width: 175px;
z-index: 50000;
opacity:0.90;
}
ul.open ul
{
background-color: #092a55;
display: none;
list-style: none outside none;
margin: 0;
padding: 0;
position: relative;
top: 100%;
width: 175px;
z-index: 50000;
}
ul.open li
{
display: block;
list-style: none;
text-align: center;
border: none;
}
ul.open li a
{
display: block;
padding: 10px 5px;
border-bottom: 0px solid #5578a4;
color: #fff;
}
ul.open li a:hover
{
background-color: #375d8f;
color: #fff;
}
.wrapper
{
width:85%;
max-width: 910px;
margin: auto;
margin-top:125px;
padding:20px;
background: #fff;
height:250px;
}
#main left{
background:#fff;
width: 62.5%;
float: left;
}
#main right
{
background:#fff;
width: 35%;
float: right;
}
.Copyright
{
position:absolute;
left:0px;
top:-10px;
font: 11px'helvetica', ariel, sans-serif;
}
.footer-nav
{
position:absolute;
left:-6px;
top:10px;
font: 11px'helvetica', ariel, sans-serif;
}
}
#media (max-width:480px){
img[src*="images/Linear.Partners.Logo.png"]
{
margin-top:13px;
height:40px;
width:106px;
}
.bg-image {
float: left;
width: 100%;
height:150px;
background-size:cover;
}
.wrapper{
width:80%;
height:200px;
margin-top:75px;
}
#main right
{
float: left;
clear: left;
margin: 0 0 10px;
width: 100%;
}
#main left
{
float: left;
clear: left;
margin: 0 0 10px;
width: 100%;
}
.Copyright
{
position:absolute;
left:0px;
top:-10px;
font: 11px'helvetica', ariel, sans-serif;
}
.footer-nav
{
position:absolute;
left:-6px;
top:10px;
font: 11px'helvetica', ariel, sans-serif;
}
}
To avoid the footer to overlap the content add a margin to the content corresponding to the footer's height
.footer-nav{
//...
position:fixed;
bottom;0;
height:50px; // just an example
//...
}
.wrap{
margin-bottom:50px;// same as .footer-nav height
}
FIDDLE
Try this for footer div:-
#footer-wrapper {
background: none repeat scroll 0 0 #000000;
height: 65px;
margin: 0 auto;
padding: 20px;
bottom: 0;/*add from here*/
left: 0;
position: fixed;
width: 100%;/*to here*/
}
Check out this code
it may help youjust wirte the footer tag inside the wrap div
<div id="wrap"> <footer></footer> </div>
It seems that everything alright but you missed somewhere 2 closing DIVs.
Try to add them before
<div class="clear"></div>
http://jsfiddle.net/wF9UL/