Tweet
On my landing page, http://mistiwolanski.com/, I have two large buttons, which for some reason insist on appearing one below the other. In my experience, that usually means a padding or margin issue, but sometimes it's a punctuation thing.
I've been over the code well over a dozen times in the past week or so, and I can't figure out what's wrong.
To sum it up: I want the "Freelancer" and "Author" boxes to float beside each other.
Ideally, I'd like them to center vertically on the page, but I'll be happy just to get them side by side, for now.
Thank you so much for your help, folks! I greatly appreciate it.
HTML:
CSS 1 (primary sheet)
CSS 2 (sheet with code specific to this page)
I've been over the code well over a dozen times in the past week or so, and I can't figure out what's wrong.
To sum it up: I want the "Freelancer" and "Author" boxes to float beside each other.
Ideally, I'd like them to center vertically on the page, but I'll be happy just to get them side by side, for now.
Thank you so much for your help, folks! I greatly appreciate it.
HTML:
Code:
<!DOCTYPE html>
<head>
<title>Misti Wolanski</title>
<?php include($_SERVER['DOCUMENT_ROOT'] . '/part/header-metas.php'); ?>
<meta name="description"
content="Misti Wolanski, Christian freelancer and fantasy writer." />
<meta name="keywords"
content="Misti Wolanski, web writer, Christian writer, Christian ghostwriter, Christian proofreader, Christian author" />
<?php include($_SERVER['DOCUMENT_ROOT'] . '/part/header-appearance.php'); ?>
</head>
<body>
<div id='content-wrapper'><div id='content'>
<section id='choose'>
<div id='freelance-wrapper'><div id='freelance'>
<a href="/freelance/">
<h3>
Freelancer
</h3>
<ul><li>
Web Writer
</li><li>
Proofreader
</li><li>
Ghostwriter
</li><li>
Grammar Tutor
</li></ul>
</a>
</div></div> <!-- Close #freelance & #freelance-wrapper -->
<div id='fiction-wrapper'><div id='fiction'>
<a href="/fiction/">
<h3>
Author
</h3>
<ul><li>
Young Adult Fantasy
</li><li>
Urban Fantasy
</li><li>
High Fantasy
</li><li>
Dark Fantasy
</li></ul>
</a>
</div></div> <!-- Close #fiction & #fiction-wrapper -->
</section> <!-- Close #choose -->
<div class='clear'></div>
</div></div> <!-- Close #content & #content-wrapper. -->
</body>
</html>
Code:
/*- - - - - - - - - - - - - - - - - - - -
This skin belongs to Misti Wolanski ©2011.
NAME: Gracious and Grey
CREATOR: Misti Wolanski
HOMEPAGE: http://mistiwolanski.com
COMPLETED: Aug 08 2011
- - - - - - - - - - - - - - - - - - - -*/
/*- - - - - - - - - - - - - - - - - - - -
- - - - - - - SIZES - - - - - - -
(for COMPUTER)
full width: 90%
max-width: 1000px;
margin-right: 250px;
main width: 70%
side width: 250px;
(for MOBILE)
full width: 100%
main width: 70%
side width: NONE (make sidebar a horizontal bar below nav)
- - - - - COLOR PALETTE - - - - -
black: #111
gray - light: #ddd
gray - dark: #222
pink: #f09
purple: #505
- - - - BACKGROUND IMAGES - - - -
/image/background/graypatt-dk.jpg FOR FICTION
/image/background/graypatt-lt.jpg FOR FREELANCE
/image/background/misti-pink.png SIGNATURE
- - - - - - - FONTS - - - - - - - -
font-family: 'Ruslan Display', cursive; FOR FICTION
font-family: 'Expletus Sans', cursive; FOR FREELANCE
NOTE: DEFAULTS = FREELANCE
- - - - - - - - - - - - - - - - - - - -*/
/*- - - - - - - - - - - - - - -*/
/*- - - - STRIPPER CODES - - - */
/*- - - - - - - - - - - - - - -*/
/* References:
http://tantek.com/log/2004/undohtml.css
http://blog.stannard.net.au/2006/08/31/removing-a-browsers-default-css-settings/
http://www.w3.org/TR/CSS2/sample.html
http://www.opera.com/support/mastering/sysadmin/#locations
http://www.accessifyforum.com/viewtopic.php?t=5551
http://www.red-tigers.com/css/initial.css
http://webdesign.about.com/od/css/a/master_stylesht.htm
My own experience. Please don't reuse my code without my permission.
*/
:link,:visited { text-decoration:none; }
ul,ol {
list-style: none;
list-style-position: outside;
}
h1,h2,h3,h4,h5,h6,
blockquote,cite {
font-weight: normal;
font-size: 1em;
text-align: left;
}
pre,code { font-size:1em; }
html,body,
ul,ol,li,
dl,dt,dd,
table,th,td,tr,
h1,h2,h3,h4,h5,h6,
pre,form,fieldset,input,textarea,
p,a,blockquote,cite {
margin:0;
padding:0;
border: 0;
}
a img,:link img,:visited img { border:none; }
address { font-style:normal; }
dd { margin-left: 0; }
/*- - - - - - - - - - - - - - -*/
/*- - - - SITE DEFAULTS - - - -*/
/*- - - - - - - - - - - - - - -*/
html,
body {
font: 1em Verdana,sans-serif;
font-weight: normal;
line-height: 1.3;
text-align: center;
}
a:link {
font-weight:bold;
text-decoration: none;
}
a:visited {
font-weight:bold;
text-decoration: none;
}
a:hover,
a:active {
font-weight:bold;
text-decoration: underline;
}
h1 {
font-size: 3em;
}
h2 {
font-size: 2.5em;
}
h3 {
font-size: 1.75em;
line-height: 1;
}
h4 {
text-align: center;
font-size: 1.25em;
font-weight: bold;
}
h6 {
text-align: center;
}
ul {
list-style: square outside;
text-indent: 0;
margin: 0;
padding: 0 0 0 15px;
}
ol {
list-style: decimal outside;
text-indent: 0;
margin: 0;
padding: 0 15px 0 25px;
}
ul li,
ol li {
line-height: 1.5em;
margin: 10px 0;
margin-left: 20px;
}
dl {
margin: 0;
padding: 0;
}
dt {
font-weight: bold;
margin: 20px auto 10px auto;
}
dd { margin: 10px 50px 10px 0; }
dd ul {
margin: 0 0 0 10px;
line-height: 1;
}
dd ul li {
margin: 0 0 0 10px;
padding-left: 25px;
}
p {
line-height: 1.2em;
margin: 15px 0;
}
table {
margin: 5px;
padding: 0;
}
th {
font-size: 2em;
text-align: center;
}
tr {
margin: 5px 0;
padding: 0;
}
td {
font-size: 1em;
margin: 0;
padding: 2px;
border: none;
}
hr {
border: 3px ridge;
}
blockquote { padding: 15px; }
cite {
text-align: right;
font-size: 0.75em;
font-style: italic;
}
input { margin: 0 auto; }
form { width: 70%; }
form ul { list-style: none; }
.button {
margin: 0 auto;
text-align: center;
}
.button input {
margin: 0 auto;
padding: 5px;
font-size: 1.25em;
font-weight: bold;
}
/*
ul[id~='child'] { display: none; }
*/
/*- - - - - - - - - - - -*/
/*- - - SITE LAYOUT - - -*/
/*- - - - - - - - - - - -*/
/* Display HTML5 elements */
header, footer, nav, article, aside, section { display:block; }
#content-wrapper {
width: 90%;
max-width: 1000px;
margin: 0 auto;
padding: 0;
}
#content {
margin: 0;
height: 100%;
clear: none;
}
#header-wrapper {
width: 100%;
margin: 0;
padding: 0;
} /*- This is 100% of #content-wrapper's 90% - */
header {
float: left;
padding: 10px;
}
nav {
font-size: 1.2em;
padding: 2px;
margin: 1em 0;
}
#main-wrapper {
float: left;
padding-bottom: 25px;
}
#main {
text-align: left;
padding: 0 15px;
margin: 0;
}
#sidebar-wrapper {
float: right;
}
#sidebar {
padding: 0px;
margin: 10px 0;
font-size: 0.9em;
}
#footer-wrapper {
float: left;
border-top: 2px ridge;
}
#footer {
padding: 10px;
font-size: 0.75em;
font-style: italic;
text-align: center;
}
/* - - - HEADER CONTENT - - - */
header h1,
header h2,
header h3 {
padding: 0 50px;
margin: 0;
}
header h1 { text-align: left; }
header h2 { text-align: right; }
header h3 { text-align: center; }
header ul,
header ol {
list-style-type: none;
list-style-position: outside;
display: inline;
}
/* - - - NAVIGATION CONTENT - - - */
/*
nav ul:hover,
nav ul:target { display: block; }
*/
nav ul {
padding: 0;
margin: 0;
list-style-type: none;
list-style-position: outside;
text-align: center;
border-right: none;
}
nav ul li {
padding: 0;
display: inline;
margin: 0;
line-height: 2.25;
}
nav ul li a {
padding: 6px 10px;
border: 3px outset;
}
nav ul li a:hover,
nav ul li a:active { border: 3px inset; }
/* - - - - SIDEBAR CONTENT - - - - */
#sidebar ul,
#sidebar ol,
#sidebar p {
list-style-position: inside;
padding: 0;
margin: 0;
}
#sidebar li {
margin: 10px 0;
padding: 0;
}
#sidebar h3 { padding-top: 15px; }
#sidebar a:visited,
#sidebar a:hover { text-decoration: underline; }
/* - - - - MAIN CONTENT - - - - */
#main h2 {
text-align: center;
border-top: 2px groove;
padding-top: 10px;
}
#main ul { padding: 0px; margin: 0px; }
/* - - - - FOOTER CONTENT - - - - */
/*- - - - - - - - - - - - - -*/
/*- - - SPECIAL CLASSES - - -*/
/*- - - - - - - - - - - - - -*/
.rounded-corners {
-moz-border-radius: 1em; /* Firefox */
-webkit-border-radius: 1em; /* Chrome/Safari */
-khtml-border-radius: 1em; /* Konqueror */
border-radius: 1em; /* Future; someday it'll be supported */
/* IE currently requires a hack. */
}
.per25 { width: 25%; height: auto; }
.per33 { width: 33%; height: auto; }
.per50 { width: 50%; height: auto; }
.per75 { width: 75%; height: auto; }
.wid125 { width: 125px; height: auto; }
.center { text-align: center; }
.left { text-align: left; }
.right { text-align: right; }
.center-object { margin: 0 auto; }
.em { font-style: italic; }
.strong { font-weight: bold; }
.clear { clear: both; } /* Hack to avoid section overlap. */
/*
.signature {
clear: left;
background: url('/image/background/misti-pink.png') 30%;
repeat: none;
}
*/
.special {
}
.note {
font-size: 0.75em;
font-style: italic;
text-align: center;
}
Code:
/* ———— NOTE: - - -
This is a subsection of the Gracious and Gray skin by Misti Wolanski. ©2011
*/
/*- - - - - - - - - - - - - - -*/
/*- - - - STRIPPER CODES - - - */
/*- - - - - - - - - - - - - - -*/
/* References:
http://tantek.com/log/2004/undohtml.css
http://blog.stannard.net.au/2006/08/31/removing-a-browsers-default-css-settings/
http://www.w3.org/TR/CSS2/sample.html
http://www.opera.com/support/mastering/sysadmin/#locations
http://www.accessifyforum.com/viewtopic.php?t=5551
http://www.red-tigers.com/css/initial.css
http://webdesign.about.com/od/css/a/master_stylesht.htm
My own experience. Please don't reuse my code without my permission.
*/
:link,:visited { text-decoration:none; }
ul,ol {
list-style: none;
list-style-position: outside;
}
h1,h2,h3,h4,h5,h6,
blockquote,cite {
font-weight: normal;
font-size: 1em;
text-align: left;
}
pre,code { font-size:1em; }
html,body,
ul,ol,li,
dl,dt,dd,
table,th,td,tr,
h1,h2,h3,h4,h5,h6,
pre,form,fieldset,input,textarea,
p,a,blockquote,cite {
margin:0;
padding:0;
border: 0;
}
a img,:link img,:visited img { border:none; }
address { font-style:normal; }
dd { margin-left: 0; }
/*- - - - - - - - - - - - - - -*/
/*- - - - APPEARANCE HERE - - - */
/*- - - - - - - - - - - - - - -*/
html,
body {
background: url('/image/background/graypatt-md.jpg') repeat;
margin: 0;
padding: 0;
border: 0;
font-size: 1.2em;
}
/* ALREADY SET:
font-family, font-size, text-align, line-height
*/
h3 {
font-size: 2em;
text-align: center;
}
ul {
display: block;
list-style-type: none;
text-align: center;
margin: 0;
padding: 0;
}
#content-wrapper {
}
/* ALREADY SET:
width, max-width, margin, padding
*/
#content {
padding: 0;
vertical-align: middle;
margin: 3%;
}
/* ALREADY SET:
height, clear (none)
PULLED OUT:
*/
#choose {
width: 100%;
}
#fiction-wrapper,
#freelance-wrapper {
padding: 0;
width: 50%;
}
#fiction,
#freelance {
margin: 5%;
padding: 0.5em;
}
#freelance-wrapper {
float: left;
margin: 0 50% 0 0;
background: url('/image/background/graypatt-lt.jpg') repeat;
}
#freelance-wrapper:hover {
background: url('/image/background/graypatt-dk.jpg') repeat;
}
#freelance {
background: #ddd;
font-family: 'Expletus Sans',Sans-Serif;
}
#freelance ul li {
color: #222;
margin: 0;
padding: 0 0 1em 0;
font-size: 1em;
}
#freelance h3 {
color: #505;
padding: 0.2em 0;
}
#fiction-wrapper {
float: right;
margin: 0 0 0 50%;
background: url('/image/background/graypatt-dk.jpg') repeat;
}
#fiction-wrapper:hover {
background: url('/image/background/graypatt-lt.jpg') repeat;
}
#fiction {
background: #222;
font-family: 'Ruslan Display',Sans-Serif;
}
#fiction ul li {
color: #ddd;
padding: 0 0 0.5em 0;
font-size: 1.1em;
}
#fiction h3 {
color: #e06;
}
Comment