Ryanplays Games
Reputation: 69
Why isn't my margin working?
I have been creating a simple sidebar for my website. I want to put a 40px margin next to my main table so it doesn’t look like it’s part of the sidebar.
I have also tried to put a <div> around the main area and styled it like this:
margin: 40px;
I also have a navigation bar in the way. (I’m fine if you want to make the font size smaller in the navigation bar.) How can I do this?
All Code:
<!DOCTYPE html>
<html>
<head>
<style>
body {
font-family: Open Sans;
margin: 40px;
}
.dateOfPost {
font-weight: bold;
text-decoration: underline;
}
form {
border: 1px solid #000;
width: 270px;
height: auto;
float: left;
}
#cssmenu ul {
background: #f96e5b;
width: auto;
list-style: none;
float: right;
margin: 0;
padding: 0;
line-height: 1;
display: block;
zoom: 1;
}
#cssmenu ul:after {
content: " ";
display: block;
font-size: 0;
height: 0;
clear: both;
visibility: hidden;
}
#cssmenu ul li {
display: inline-block;
padding: 0;
margin: 0;
}
#cssmenu.align-right ul li {
float: right;
}
#cssmenu.align-center ul {
text-align: center;
}
#cssmenu ul li a {
font-size: auto;
color: #ffffff;
text-decoration: none;
display: block;
padding: 15px 25px;
font-family: 'Open Sans', sans-serif;
font-weight: 700;
text-transform: uppercase;
font-size: 14px;
position: relative;
-webkit-transition: color .25s;
-moz-transition: color .25s;
-ms-transition: color .25s;
-o-transition: color .25s;
transition: color .25s;
}
#cssmenu ul li a:hover {
color: #333333;
}
#cssmenu ul li a:hover:before {
width: 100%;
}
#cssmenu ul li a:after {
content: "";
display: block;
position: absolute;
right: -3px;
top: 19px;
height: 6px;
width: 6px;
background: #ffffff;
opacity: .5;
}
#cssmenu ul li.last > a:after,
#cssmenu ul li:last-child > a:after {
display: none;
}
#cssmenu ul li.active a {
color: #333333;
}
#cssmenu ul li.active a:before {
width: 100%;
}
#cssmenu.align-right li.last > a:after,
#cssmenu.align-right li:last-child > a:after {
display: block;
}
#cssmenu.align-right li:first-child a:after {
display: none;
}
@media screen and (max-width: 768px) {
#cssmenu ul li {
float: none;
display: block;
}
#cssmenu ul li a {
width: 100%;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
border-bottom: 1px solid #fb998c;
}
#cssmenu ul li.last > a,
#cssmenu ul li:last-child > a {
border: 0;
}
#cssmenu ul li a:after {
display: none;
}
#cssmenu ul li a:before {
display: none;
}
}
</style>
<script>
</script>
</head>
<body>
<noscript>
<p>Please enable Javascript before viewing this page or else some elements may not appear and/or function properly.</p>
</noscript>
<div id="sidebar">
<form id="signUp">
<p>
<b>Hey! </b>Want to post comments and receive cool information about me? If You Do, Sign Up Now! :D
<br />
<br />Nickname:
<input type="text" id="nickname" placeholder="Nickname" required>
<br/>Email Address:
<input type="text" id="email" placeholder="Email Address" maxlength="254" required>
<br />Password:
<input type="password" id="password" placeholder="Password" required>
<br />
<input type="button" value="Submit" onclick="confirmAccount">
</p>
</form>
</div>
<div class="rightColumn">
<h1>Ryan Zhang's Blog</h1>
<div id="cssmenu">
<ul>
<li class="active"><a href="home.html"><span>Home</span></a>
</li>
<li><a href="aboutMe.html"><span>About Me</span></a>
</li>
<li><a href="tipsNTricks.html"><span>Tips 'n' Tricks</span></a>
</li>
<li><a href="inspiration.html"><span>Inspirational Quotes and Words</span></a>
</li>
<li><a href="timeline.html"><span>Timeline of Me</span></a>
</li>
<li><a href="contact.html"><span>Contact</span></a>
</li>
</ul>
</div>
<hr />
<p>
Lorem Ipsum
<br />Upload Date:
<br />
<date>25/10/15</date>
</p>
<hr />
</div>
</body>
</html>Upvotes: 0
Views: 64
Answers (1)
DFord
Reputation: 2358
You can give the right column a width and float it to the right. If you can add more of a margin but then the nav wraps to a second line.
<!DOCTYPE html>
<html>
<head>
<style>
body {
font-family: Open Sans;
margin: 40px;
}
.dateOfPost {
font-weight: bold;
text-decoration: underline;
}
h1 {
margin-top: 0px;
}
.rightColumn {
width: 77%;
float: right;
}
form {
border: 1px solid #000;
width: 270px;
height: auto;
float: left;
}
#cssmenu ul {
background: #f96e5b;
width: auto;
list-style: none;
margin: 0;
padding: 0;
line-height: 1;
display: block;
zoom: 1;
}
#cssmenu ul:after {
content: " ";
display: block;
font-size: 0;
height: 0;
clear: both;
visibility: hidden;
}
#cssmenu ul li {
display: inline-block;
padding: 0;
margin: 0;
}
#cssmenu.align-right ul li {
float: right;
}
#cssmenu.align-center ul {
text-align: center;
}
#cssmenu ul li a {
font-size: auto;
color: #ffffff;
text-decoration: none;
display: block;
padding: 15px 25px;
font-family: 'Open Sans', sans-serif;
font-weight: 700;
text-transform: uppercase;
font-size: 14px;
position: relative;
-webkit-transition: color .25s;
-moz-transition: color .25s;
-ms-transition: color .25s;
-o-transition: color .25s;
transition: color .25s;
}
#cssmenu ul li a:hover {
color: #333333;
}
#cssmenu ul li a:hover:before {
width: 100%;
}
#cssmenu ul li a:after {
content: "";
display: block;
position: absolute;
right: -3px;
top: 19px;
height: 6px;
width: 6px;
background: #ffffff;
opacity: .5;
}
#cssmenu ul li.last > a:after,
#cssmenu ul li:last-child > a:after {
display: none;
}
#cssmenu ul li.active a {
color: #333333;
}
#cssmenu ul li.active a:before {
width: 100%;
}
#cssmenu.align-right li.last > a:after,
#cssmenu.align-right li:last-child > a:after {
display: block;
}
#cssmenu.align-right li:first-child a:after {
display: none;
}
@media screen and (max-width: 768px) {
#cssmenu ul li {
float: none;
display: block;
}
#cssmenu ul li a {
width: 100%;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
border-bottom: 1px solid #fb998c;
}
#cssmenu ul li.last > a,
#cssmenu ul li:last-child > a {
border: 0;
}
#cssmenu ul li a:after {
display: none;
}
#cssmenu ul li a:before {
display: none;
}
}
</style>
<script>
</script>
</head>
<body>
<noscript>
<p>Please enable Javascript before viewing this page or else some elements may not appear and/or function properly.</p>
</noscript>
<div id="sidebar">
<form id="signUp">
<p>
<b>Hey! </b>Want to post comments and receive cool information about me? If You Do, Sign Up Now! :D
<br />
<br />Nickname:
<input type="text" id="nickname" placeholder="Nickname" required>
<br/>Email Address:
<input type="text" id="email" placeholder="Email Address" maxlength="254" required>
<br />Password:
<input type="password" id="password" placeholder="Password" required>
<br />
<input type="button" value="Submit" onclick="confirmAccount">
</p>
</form>
</div>
<div class="rightColumn">
<h1>Ryan Zhang's Blog</h1>
<div id="cssmenu">
<ul>
<li class="active"><a href="home.html"><span>Home</span></a>
</li>
<li><a href="aboutMe.html"><span>About Me</span></a>
</li>
<li><a href="tipsNTricks.html"><span>Tips 'n' Tricks</span></a>
</li>
<li><a href="inspiration.html"><span>Inspirational Quotes and Words</span></a>
</li>
<li><a href="timeline.html"><span>Timeline of Me</span></a>
</li>
<li><a href="contact.html"><span>Contact</span></a>
</li>
</ul>
</div>
<hr />
<p>
Lorem Ipsum
<br />Upload Date:
<br />
<date>25/10/15</date>
</p>
<hr />
</div>
</body>
</html>Upvotes: 1