Web Analytics Made Easy -
StatCounter Vertical positioning issue w/ CSS - CodingForum

Announcement

Collapse
No announcement yet.

Vertical positioning issue w/ CSS

Collapse
X
 
  • Filter
  • Time
  • Show
Clear All
new posts

  • Resolved Vertical positioning issue w/ CSS

    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:
    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>
    CSS 1 (primary sheet)
    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;
    	}
    CSS 2 (sheet with code specific to this page)
    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;
    	}
    Last edited by Carradee; Aug 23, 2011, 11:32 AM. Reason: Was playing w/ doctype & added typo. *facepalm*

  • #2
    on your two divs, get rid of the margin 50% call. When you assign a margin, you are eliminating that space to be used. So getting rid of it allows the images to be side by side.

    I completely removed the margins on both divs and it worked for me.
    WordPress Designer and theme developer. KlongDesigns - helping bloggers and non-technical folks claim their space on the internet.

    Comment


    • #3
      Thanks, resdog! That did it.

      Comment

      Working...
      X