Lucy Posted October 5, 2014 Share Posted October 5, 2014 Hope this is okay to post in here - it actually involves HTML, CSS and PHP, but this seemed the best place. I'm making a Wordpress theme for someone. It took me maybe an hour to make the static site - converting it to a Wordpress site has been a nightmare... so, here's my latest problem. I tried to put a small box below the posts on the homepage for users to subscribe to email alerts. It refused to display where it should. I've re-created this using the simple page template which has less code to sort through with some text. Here's a picture of what's happening: The text 'test' should be on the left hand side, below 'just a test'. As far as I can see there's literally no reason it shouldn't. All relevant code below: The above page: <?php get_header (); ?> <div id="content"> <ul id="nav"> <?php wp_nav_menu( array( 'container_class' => 'main-nav', 'theme_location' => 'primary' ) ); ?> </ul> <?php get_sidebar(); ?> <div class="standard"> <?php if (have_posts()) : while (have_posts()) : the_post();?> <h2><?php the_title(); ?></h2> <p><?php the_content(__('(more...)')); ?></p> <?php endwhile; else: ?> <p><?php _e('Sorry, no posts matched your criteria.'); ?></p> <?php endif; wp_reset_query(); ?> </div> test! <div class="formobile"><a href="#nav"><i>To menu</i></a></div> </div> <?php get_footer(); ?> CSS: #content { width:1350px; margin:auto; padding-bottom:20%; background-color:#F9F5E4; color:#7C6C75; font-size:2rem; overflow:auto; }#nav { list-style-type:none; margin:1% 0 0 8%; text-transform:uppercase; } #nav li { background-color:#EDE4BC; border:solid .2rem #F4DF84; width:10%; margin:0 .5%; display:block; float:left; text-align:center; font-size:1.5rem; letter-spacing:.1rem; } #nav a:hover { color:#D673B0; background-color:#F7F1D6; } #nav a { display:block; color:#AF6191; padding:5% 0%; }.standard { width:68%; float:left; margin:1% 0 0 1%; padding:5%; }.formobile { width:0; height:0; display:none; } Sidebar.php: <div id="side"> <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed dapibus, sapien non venenatis interdum, lectus risus vulputate nibh, et placerat tortor arcu facilisis risus. Etiam mauris magna, blandit quis ornare ac, malesuada dignissim nulla. Sed dignissim lorem mi, eu elementum dui accumsan a. </p> <img src="<?php bloginfo('template_directory'); ?>/images/advert.jpg" alt="advertisement"/> <img src="<?php bloginfo('template_directory'); ?>/images/advert.jpg" alt="advertisement"/> <br/> <a href=""><i>Facebook</i><br/></a> <a href=""><i>Twitter</i><br/></a> <a href=""><i>Pinterest</i><br/></a> </div> CSS for sidebar: #side { width:17%; padding:1.5%; float:right; background-color:#F4E9BA; font-size:1.75rem; line-height:130%; } #side img { width:80%; display:block; margin:auto; padding:5% 0; } Header.php: <!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Title <?php wp_title(); ?></title> <?php if ( is_singular() ) wp_enqueue_script( 'comment-reply' ); ?> <?php wp_head(); ?> </head> <body> <header><img src="<?php bloginfo('template_directory'); ?>/images/picture.jpg" alt="pretty picture"/></header> Footer.php: <div id="footer"></div> <?php wp_footer(); ?> </body> </html> CSS for footer: #footer { width:1350px; height:100px; margin:auto; background-color:red; } Please help, this is driving me mad Link to comment Share on other sites More sharing options...
Ingolme Posted October 5, 2014 Share Posted October 5, 2014 The reason is that .standard is floated to the left. Content that follows it will go to the right side of it. Link to comment Share on other sites More sharing options...
Lucy Posted October 5, 2014 Author Share Posted October 5, 2014 But surely it shouldn't display above? Link to comment Share on other sites More sharing options...
Ingolme Posted October 5, 2014 Share Posted October 5, 2014 It probably could if the element above it is also floated. You can wrap the text in an element and use the clear property to make it go below: <div class="content"> test!</div>.content { clear: both;} Link to comment Share on other sites More sharing options...
Lucy Posted October 5, 2014 Author Share Posted October 5, 2014 (edited) Thanks - that does help, although it creates a huge gap... picture below: Can't find anything that might cause this. There aren't any large margins there or anything. Edit - I've given the divs red backgrounds so you can see exactly what's going on Edited October 5, 2014 by Lucy Link to comment Share on other sites More sharing options...
Ingolme Posted October 5, 2014 Share Posted October 5, 2014 If instead of clear: both you use clear: left then it won't go below the right column. Link to comment Share on other sites More sharing options...
Lucy Posted October 7, 2014 Author Share Posted October 7, 2014 Ahh - of course... thanks very much Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now