Title: Alignment problem Last modified: August 19, 2016 --- # Alignment problem * [vincepettit](https://wordpress.org/support/users/vincepettit/) * (@vincepettit) * [15 years, 10 months ago](https://wordpress.org/support/topic/alignment-problem-2-2/) * Hi * I have a template that I’ve made pretty much from scratch and I’m having some problems with alignment. * On the main page and my article pages the footer looks fine – [http://yfrog.com/86mcmj](http://yfrog.com/86mcmj) * But on my category pages the footer seems to creep up the page and over content– [http://yfrog.com/juhh6j](http://yfrog.com/juhh6j) * I’ve played around with CSS but can’t understand as all the basica layout uses the same div tags and CSS for alignment. * Any help would be grateful, let me know if you need to see anything like the coding for the different pages. Viewing 5 replies - 1 through 5 (of 5 total) * [Michelle Langston](https://wordpress.org/support/users/chellycat/) * (@chellycat) * [15 years, 10 months ago](https://wordpress.org/support/topic/alignment-problem-2-2/#post-1553903) * Did you clear the floats in the content div on the category pages? It looks like those images are floating elements… * Thread Starter [vincepettit](https://wordpress.org/support/users/vincepettit/) * (@vincepettit) * [15 years, 10 months ago](https://wordpress.org/support/topic/alignment-problem-2-2/#post-1554011) * Here is the coding for the page, CSS to follow (it’s probably really bad coding and probably the reason it’s not working so sorry in advance!) * ***** HEADER.PHP ***** * ``` > <?php bloginfo('name'); ?> <?php if ( is_single() ) { ?> » Blog Archive <?php } ?> <?php wp_title(); ?>
``` * ***** CATEGORY PAGE ***** * ```
'Fashion-feature', 'description' => 'Fashion Feature', 'before' => '
', 'after' => '
'); do_action('ad-minister', $args);?>
Featured
"; while (have_posts()) : the_post(); echo "
  • "; the_post_thumbnail(); the_title(); echo ""; echo "
    "; the_excerpt(); echo ""; echo "
    • "; endwhile;?>
    On The Cover
    "; while (have_posts()) : the_post(); echo "
  • "; the_post_thumbnail(); the_title(); echo ""; echo "
    "; the_excerpt(); echo ""; echo "
    • "; endwhile;?>
    Breaking News
    "; while (have_posts()) : the_post(); echo "
  • "; the_post_thumbnail(); the_title(); echo ""; echo "
    "; the_excerpt(); echo ""; echo "
    • "; endwhile;?>
     
    "; while (have_posts()) : the_post(); echo "
  • "; the_post_thumbnail(); the_title(); echo ""; echo "
    "; the_excerpt(); echo ""; echo "
    • "; endwhile;?>
    ``` * ***** FOOTER.PHP ***** * ```
    ``` * Thread Starter [vincepettit](https://wordpress.org/support/users/vincepettit/) * (@vincepettit) * [15 years, 10 months ago](https://wordpress.org/support/topic/alignment-problem-2-2/#post-1554012) * ***** CSS ***** * ``` body { padding:0; margin: 0px; background-image: url('http://www.the-dish.co.uk/the-dish-bg.gif'); background-repeat: repeat-y; background-position:center; background-color:#FFF; } #container { margin: 0px; padding: 0px; float: none; width: 1024px; margin: auto; border-width: 1px; border-color: #000000; border-style: solid; background-color:#FFFFFF; } #container #header { margin: 0px; padding: 0px; float: none; height: 158px; width: 1024px; background-color: #000000; } #container #main { margin: 0px; float: none; height: 604px; width: 938px; background-color: #FFFFFF; padding-left: 43px; padding-right: 43px; padding-top: 16px; padding-bottom: 14px; } #footer { height: 150px; padding-left: 0px; padding-right: 5px; padding-bottom: 5px; padding-top: 5px; background-color: #FFFFFF; font-family: Arial, Helvetica, sans-serif; font-size: 10px; } #footer-left { float: left; width: 728px; height: 90px; } #footer-right { float: right; width: 210px; height: 90px; } #container #header #logo { height: 145px; float: left; width: 512px; } .headlines { font-family: Arial, Helvetica, sans-serif; font-size: 12px; } #container #header #menu { float: right; height: 145px; width: 469px; margin-right: 43px; } h1 { font-family: Arial, Helvetica, sans-serif; font-size: 18px; font-weight: bold; text-align: left; margin-bottom: 0px; } h2 { font-family: Arial, Helvetica, sans-serif; font-size: 14px; font-weight: bold; text-align: left; margin-bottom: 0px; } h3 { font-family: Arial, Helvetica, sans-serif; font-size: 13px; font-weight: bold; text-align: left; margin-bottom: 0px; } a:link { color: #000000; text-decoration: none; } a:visited { color: #333333; text-decoration: none; } a:hover { color: #16E501; } a:active { color: #16E501; } #container #main #article-left #related { margin-top: 5px; height: 110px; width: 300px; background-color: #ededed; border-style: solid; border-width: 1px; border-color: #000000; } #container #main #article-left #relatedlinks { font-family: Arial, Helvetica, sans-serif; font-size: 11px; padding: -5px 0px 0px 10px } #container #main #article-left { width: 300px; float: left; } .articletitle { background-color: inherit; color:#0f9b00; font-size:200%; font-weight:bold; margin: 0 0 5px 0; padding:0; line-height: 100%; } .articletitle2 { background-color: inherit; color:#0f9b00; font-size:150%; font-weight:bold; margin: 0 0 5px 0; padding:0; line-height: 100%; } .cover-of-the-week { margin-right: 3px; margin-top: 7px; } .playlist { margin-left: 2px; margin-top: 7px; } #container #main #music-left { width: 600px; height: 584px; float: left; } #container #main #music-right { float: right; width: 333px; height: 584px; font-family: Arial, Helvetica, sans-serif; font-size: 12px; margin-left: 5px; } #container #main #fashion-page { width: 938px; height: 584px; font-family: Arial, Helvetica, sans-serif; font-size: 12px; } #container #main #fashion-page #thedishrecommends { width: 292px; height: 110px; margin-top: 9px; margin-bottom: 9px; } #container #main #fashion-page #fashion-box { width: 292px; height: 110px; margin-top: 9px; margin-bottom: 9px; } #container #main #fashion-page #women-trends { width: 292px; height: 110px; margin-top: 9px; margin-bottom: 9px; } #container #main #fashion-page #womens-directory { width: 292px; height: 110px; margin-top: 9px; margin-bottom: 9px; } #article-left img { border-style: solid; border-width: 1px; border-color: #000000; } #featurepic { border-style: solid; border-width: 1px; border-color: #000000; } #thedishrecommends img { border-style: solid; border-width: 1px; border-color: #000000; } #women-trends img { border-style: solid; border-width: 1px; border-color: #000000; } #fashion-box img { border-style: solid; border-width: 1px; border-color: #000000; } #womens-directory img { border-style: solid; border-width: 1px; border-color: #000000; } .articletitle { background-color: inherit; color:#0f9b00; font-size:200%; font-weight:bold; margin: 5px 0 5px 0; padding:0; line-height: 100%; } .articletitle2 { background-color: inherit; color:#0f9b00; font-size:150%; font-weight:bold; margin: 5px 0 5px 0; padding:0; line-height: 100%; } .date { color: #000000; text-align: left; } .fashion-boxes { border-style: solid; border-width: 1px; border-color: #000000; } #contact-table { width: 900px; } #contact-left { width: 450px; float: left; } #contact-right { width: 450px; float: right; } #container #main #mensfashion-page { font-family: Arial, Helvetica, sans-serif; font-size: 12px; margin-left: 5px; } #header-strip { width: 1024px; height: 20px; background-color: #000000; margin: auto; float: none; font-family: Arial, Helvetica, sans-serif; font-size: 11px; clear: both; color: #FFFFFF; border: 1px solid #000000; } #header-strip input { color: #ffffff; background: #525252; border: 1px solid #616161; border: 2px outset #d7b9c9 font-family: Arial, Helvetica, sans-serif; font-size: 10px; font-weight: bold; } #header-strip .submit input { color: #000; background: #ffa20f; } #navlist { padding-left: 0; margin-left: 0; border-bottom: 1px solid gray; width: 200px; } #navlist li { list-style: none; margin: 0; padding: 0.25em; border-bottom: 1px solid gray; } #navlist li a { text-decoration: none; color: #E5E5E5; } #navlist li a:hover { color: #0f9b00; } #Social { height: 86px; width: 155px; margin: auto; background-image: url(join-us.jpg); background-repeat: no-repeat; padding-left: 35px; padding-top: 4px; margin-left: 20px; } #wrapper { width: 1065px; clear: both; float: none; padding-top: 10px; position: relative; margin: auto; } #header { height: 140px; width: 1065px; } #logo { height: 88px; float: left; width: 320px; padding-bottom: 10px; } #ad1 { float: right; padding-bottom: 10px; } #nav { clear: both; border-top-width: thin; border-bottom-width: thin; border-top-style: solid; border-bottom-style: solid; border-top-color: #000; border-right-color: #000; border-bottom-color: #000; border-left-color: #000; width: 1065px; height: 30px; float: none; } #sidebar { float: right; width: 310px; font-family: Arial, Helvetica, sans-serif; font-size: 13px; } #sidebar ul { list-style-type: circle; padding-left: 20px; } #hotbox { border: thin solid #000; margin-right: 5px; width: 300px; } #feature { border: 1px solid #000; width: 730px; } .headline-title { font-family: Arial, Helvetica, sans-serif; font-size: 22px; font-weight: bold; border-bottom-width: thin; border-bottom-style: solid; border-bottom-color: #000; width: 730px; padding-top: 10px; } .headline-feature-title { font-family: Arial, Helvetica, sans-serif; font-size: 22px; font-weight: bold; border-bottom-width: thin; border-bottom-style: solid; border-bottom-color: #000; width: 730px; padding-top: 0px; } #text { float: left; width: 740px; margin-left: 5px; } #footer-nav { clear: both; border-top-width: thin; border-bottom-width: thin; border-top-style: solid; border-bottom-style: solid; border-top-color: #000; border-right-color: #000; border-bottom-color: #000; border-left-color: #000; width: 1065px; height: 30px; float: none; margin-top: 10px; } #footer-copy { font-family: Arial, Helvetica, sans-serif; font-size: 10px; font-weight: bold; text-align: right; float: right; margin-top: 2px; } #nav-menu ul { list-style: none; padding: 0; margin: 0; } #nav-menu li { float: left; margin-top: 3px; margin-right: 15px; margin-bottom: 0; margin-left: 0.15em; } #nav-menu { font-family: Arial, Helvetica, sans-serif; font-size: 20px; font-weight: bold; } #nav-menu li a { text-decoration: none; color: #000; } #nav-menu li a:hover { text-decoration: none; color: #090; } #headline { font-family: Arial, Helvetica, sans-serif; font-size: 16px; font-weight: bold; list-style-type: none; padding-left: 7px; } #headline ul { list-style-image: none; list-style-type: none; } #headline li { padding-top: 5px; padding-bottom: 0px; margin-top: 0px; } #headline-desc { font-weight: normal; font-style: italic; font-size: 12px; margin-top: 0px; padding-top: 0px; } #headline li a { text-decoration: none; color: #000; } #headline li a:hover { text-decoration: none; color: #090; } #footer-ad { margin-left: 5px; margin-bottom: 10px; float: left; } .footer-features { clear: none; margin-top: 10px; } .feature-left { float: left; width: 225px; height: 150px; margin-left: 5px; clear: none; } .feature-middle { top: 10px; margin-left: 245px; width: 225px; height: 150px; } .feature-right { float: right; width: 225px; height: 150px; margin-right: 5px; } #blog-info { height: 130px; padding: 2px; } .features { height: 170px; margin-top: 5px; font-family: Arial, Helvetica, sans-serif; font-size: 12px; width: 730px; } .features-title { font-family: Arial, Helvetica, sans-serif; font-size: 16px; font-weight: bold; } .features a { text-decoration: none; color: #000; } .features a:hover { text-decoration: none; color: #090; } .features-left { float: left; width: 400px; height: 180px; } .features-right { float: right; width: 325px; height: 180px; } #post{ float: right; margin-left: 10px; font-family: Arial, Helvetica, sans-serif; font-size: 12px; padding-bottom: 0px; margin-bottom: 0px; } #article{ width: 715px; padding-right: 25px; } .article-headline { font-family: Arial, Helvetica, sans-serif; font-size: 22px; font-weight: bold; border-bottom-width: thin; border-bottom-style: solid; border-bottom-color: #000; width: 720px; margin-bottom: 0px; padding-bottom: 0px; } .music-headline { font-family: Arial, Helvetica, sans-serif; font-size: 22px; font-weight: bold; border-bottom-width: thin; border-bottom-style: solid; border-bottom-color: #000; width: 225px; margin-bottom: 0px; padding-bottom: 0px; padding-top: 10px; } .music-feature-left { float: left; width: 225px; height: 350px; margin-left: 5px; clear: none; } .music-feature-middle { top: 10px; margin-left: 245px; width: 225px; height: 350px; } .music-feature-right { float: right; width: 225px; height: 350px; margin-right: 5px; } #music-features { font-family: Arial, Helvetica, sans-serif; font-size: 14px; color: #000; text-decoration: none; list-style-type: none; margin-left: 0.15em; padding-left: 0.15em; line-height: normal; vertical-align: top; } #arrows { color: #06F; font-size: 14px; font-weight: bold; } #newsfeature { float: left; height: 350px; } #newsheadlines { float: right; } .red { color: #F00; } #social { float:right; margin-top: 15px; margin-right: 35px; margin-bottom: 10px; } #searchbox { float:right; margin-top: 2px; } #searchbox label { width: 4em; float: left; text-align: right; margin-right: 0.5em; display: block } #searchbox .submit input { margin-left: 3em; } #blogbox { margin: 0px; width: 300px; padding-top: 20px; } #blogbox p { font-family: Arial, Helvetica, sans-serif; font-size: 12px; color: #000; } #blogbox img { margin-right: 5px; } #blogbox a { font-family: Arial, Helvetica, sans-serif; font-size: 14px; font-weight: bold; text-decoration: none; color: #000; } #blog-tab { width: 300px; border:none; } #blog-tab-top { border:none; } #blog-tab-content { background-color: #FFF; height: 405px; width: 290px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px; border-top-style: none; border-right-style: solid; border-bottom-style: solid; border-left-style: solid; border-right-color: #000; border-bottom-color: #000; border-left-color: #000; padding: 5px; padding-top: 10px; color: #FFF; } #fashion-features { font-family: Arial, Helvetica, sans-serif; font-size: 14px; color: #000; text-decoration: none; list-style-type: none; margin-left: 0.15em; padding-left: 0.15em; line-height: normal; vertical-align: top; font-weight: bold; } .fashion-feature-right { float: right; width: 330px; height: 350px; margin-right: 5px; } .fashion-feature-left { float: left; width: 330px; height: 350px; margin-right: 5px; } .fashion-feature-bottom-left { float: left; width: 330px; height: 350px; margin-right: 5px; margin-top: 35px; clear: left; } .fashion-feature-bottom-right { float: right; width: 330px; height: 350px; margin-right: 5px; margin-top: 35px; } .fashion-headline { font-family: Arial, Helvetica, sans-serif; font-size: 22px; font-weight: bold; border-bottom-width: thin; border-bottom-style: solid; border-bottom-color: #000; width: 350px; margin-bottom: 0px; padding-bottom: 0px; padding-top: 10px; } .fashion-breaking { font-family: Arial, Helvetica, sans-serif; font-size: 22px; font-weight: bold; border-bottom-width: thin; border-bottom-style: solid; border-bottom-color: #000; width: 720px; margin-bottom: 0px; padding-bottom: 0px; padding-top: 10px; } #fashion-categories { margin-top: 10px; } .wp-post-image { border: 1px solid #000; margin-right: 5px; float: left; } .fashion-headline-box { height: 110px; } .music-categories { } img.alignleft { margin: 0 7px 2px 0; } img.alignright { margin: 0 0 2px 7px; } .alignright { float: right; } .alignleft { float: left; } .wp-caption { border: 1px solid #000; text-align: center; background-color: #CCC; padding-top: 4px; -moz-border-radius: 3px; -khtml-border-radius: 3px; -webkit-border-radius: 3px; border-radius: 3px; margin-top: 0px; margin-right: 10px; margin-bottom: 5px; margin-left: 10px; } .wp-caption img { margin: 0; padding: 0; border: 0 none; } .wp-caption p.wp-caption-text { font-size: 11px; line-height: 17px; padding: 0 4px 5px; margin: 0; color: #000; } #respond { clear: both; } .noborder { border-top-style: none; border-right-style: none; border-bottom-style: none; border-left-style: none; border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 0px; } #music-feat{ height: 160px; clear: both; float: none; } ``` * Thread Starter [vincepettit](https://wordpress.org/support/users/vincepettit/) * (@vincepettit) * [15 years, 10 months ago](https://wordpress.org/support/topic/alignment-problem-2-2/#post-1554090) * Anyone able to help? * [Mark Ratledge](https://wordpress.org/support/users/songdogtech/) * (@songdogtech) * [15 years, 10 months ago](https://wordpress.org/support/topic/alignment-problem-2-2/#post-1554092) * Don’t paste huge chunks of code as per the [Forum Rules](http://wordpress.org/support/topic/68664?replies=1)– use the [WordPress Pastebin](http://wordpress.pastebin.com/) * At this point, your site URL will result in more help than code chunks. Viewing 5 replies - 1 through 5 (of 5 total) The topic ‘Alignment problem’ is closed to new replies. ## Tags * [alignment](https://wordpress.org/support/topic-tag/alignment/) * [css](https://wordpress.org/support/topic-tag/css/) * 5 replies * 3 participants * Last reply from: [Mark Ratledge](https://wordpress.org/support/users/songdogtech/) * Last activity: [15 years, 10 months ago](https://wordpress.org/support/topic/alignment-problem-2-2/#post-1554092) * Status: not resolved ## Topics ### Topics with no replies ### Non-support topics ### Resolved topics ### Unresolved topics ### All topics