Somethings wrong with the float.

[attila2452]

AND my entire site is weird. nothing Hover is working.. http://hajzer.info.com/ the nav has a hover state but it only shows when you click. and nothing is right in the sidebar (link hovers) nothing happens with the curser..its on wordpress. http://jsfiddle.net/...lahajzer/m9cpV/ theres the code for the sidebar, and css for sidebar. i think I'm doing the float wrong. ... nevermind i got it.

[attila2452]

INSTEAD! i have a problem with my search page!. http://hajzer.info/?s=s the float THERE is messing up my sidebar. which leads me to think theres something wrong in my side bar. code for loop.php page :

<?php/*** The loop that displays posts.** The loop displays the posts and the post content.  See* http://codex.wordpress.org/The_Loop to understand it and* http://codex.wordpress.org/Template_Tags to understand* the tags used in it.** This can be overridden in child themes with loop.php or* loop-template.php, where 'template' is the loop context* requested by a template. For example, loop-index.php would* be used if it exists and we ask for the loop with:* <code>get_template_part( 'loop', 'index' );</code>** @package WordPress* @subpackage Starkers* @since Starkers 3.0*/?><?php/* Start the Loop.  *  * In Twenty Ten we use the same loop in multiple contexts.  * It is broken into three main parts: when we're displaying  * posts that are in the gallery category, when we're displaying  * posts in the asides category, and finally all other posts.  *  * Additionally, we sometimes check for whether we are on an  * archive page, a search page, etc., allowing for small differences  * in the loop on each template without actually duplicating  * the rest of the loop that is shared.  *  * Without further ado, the loop:  */ ?><?php while ( have_posts() ) : the_post(); ?><?php /* How to display posts in the Gallery category. */ ?><?php if ( in_category( _x('gallery', 'gallery category slug', 'twentyten') ) ) : ?>   <h2><a href="<?php the_permalink(); ?>" title="<?php printf( esc_attr__( 'Permalink to %s', 'twentyten' ), the_title_attribute( 'echo=0' ) ); ?>" rel="bookmark"><?php the_title(); ?></a></h2>   <?php twentyten_posted_on(); ?><?php if ( post_password_required() ) : ?>    <?php the_content(); ?><?php else : ?><?php$images = get_children( array( 'post_parent' => $post->ID, 'post_type' => 'attachment', 'post_mime_type' => 'image', 'orderby' => 'menu_order', 'order' => 'ASC', 'numberposts' => 999 ) );$total_images = count( $images );$image = array_shift( $images );$image_img_tag = wp_get_attachment_image( $image->ID, 'thumbnail' );?>	 <a href="<?php the_permalink(); ?>"><?php echo $image_img_tag; ?></a>    <p><?php printf( __( 'This gallery contains <a %1$s>%2$s photos</a>.', 'twentyten' ),	  'href="' . get_permalink() . '" title="' . sprintf( esc_attr__( 'Permalink to %s', 'twentyten' ), the_title_attribute( 'echo=0' ) ) . '" rel="bookmark"',	  $total_images	 ); ?></p>    <?php the_excerpt(); ?><?php endif; ?>    <a href="<?php echo get_term_link( _x('gallery', 'gallery category slug', 'twentyten'), 'category' ); ?>" title="<?php esc_attr_e( 'View posts in the Gallery category', 'twentyten' ); ?>"><?php _e( 'More Galleries', 'twentyten' ); ?></a>    |    <?php comments_popup_link( __( 'Leave a comment', 'twentyten' ), __( '1 Comment', 'twentyten' ), __( '% Comments', 'twentyten' ) ); ?>    <?php edit_post_link( __( 'Edit', 'twentyten' ), '|', '' ); ?><?php /* How to display posts in the asides category */ ?><?php elseif ( in_category( _x('asides', 'asides category slug', 'twentyten') ) ) : ?>  <?php if ( is_archive() || is_search() ) : // Display excerpts for archives and search. ?>   <?php the_excerpt(); ?>  <?php else : ?>   <?php the_content( __( 'Continue reading →', 'twentyten' ) ); ?>  <?php endif; ?>    <?php twentyten_posted_on(); ?>    |    <?php comments_popup_link( __( 'Leave a comment', 'twentyten' ), __( '1 Comment', 'twentyten' ), __( '% Comments', 'twentyten' ) ); ?>    <?php edit_post_link( __( 'Edit', 'twentyten' ), '| ', '' ); ?><?php /* How to display all other posts. */ ?><?php else : ?><div id="default-container"><h2><a href="<?php the_permalink(); ?>" title="<?php printf( esc_attr__( 'Permalink to %s', 'twentyten' ), the_title_attribute( 'echo=0' ) ); ?>" rel="bookmark"><?php the_title(); ?></a></h2>   <?php twentyten_posted_on(); ?><?php if ( is_archive() || is_search() ) : // Only display excerpts for archives and search. ?>   <?php the_excerpt(); ?><?php else : ?>   <?php the_content( __( 'Continue reading →', 'twentyten' ) ); ?>   <?php wp_link_pages( array( 'before' => '' . __( 'Pages:', 'twentyten' ), 'after' => '' ) ); ?><?php endif; ?></div><!-- END DEFAULT CONTAINER -->    <?php	 $tags_list = get_the_tag_list( '', ', ' );	 if ( $tags_list ):    ?>	 <?php printf( __( 'Tagged %2$s', 'twentyten' ), 'entry-utility-prep entry-utility-prep-tag-links', $tags_list ); ?>	 |    <?php endif; ?>  <?php comments_template( '', true ); ?><?php endif; // This was the if statement that broke the loop into three parts based on categories. ?><?php endwhile; // End the loop. Whew. ?> <?php /* Display navigation to next/previous pages when applicable */ ?><?php if (  $wp_query->max_num_pages > 1 ) : ?>    <?php //next_posts_link( __( '← Older posts', 'twentyten' ) ); ?>    <?php //previous_posts_link( __( 'Newer posts →', 'twentyten' ) ); ?><?php endif; ?> 

Actual HTML Output:

<body class="search search-results logged-in admin-bar"><div id="wrapper"><div id="header"><h1>  <a href="/">Attila Hajzer<br />   <span>Designs that inspire.</span>  </a></h1><div class="clear"></div><div id="navigation" >  <ul>   <li><a href="/">Home</a>   <li><a href="services/">Services</a>   <li><a href="portfolio/">Portfolio</a>   <li><a href="about/">About</a>   <li><a href="support/">Support</a>   <li><a href="contact/">Contact</a>  </ul></div><!-- navigation --></div><!-- end header--><div style="clear:left;"></div>    <h1>Search Results for: s</h1>   <div id="default-container"><h2><a href="http://hajzer.info/skills" title="Permalink to Skills" rel="bookmark">Skills</a></h2>   <span class="meta-prep meta-prep-author">Posted on</span> <a href="http://hajzer.info/skills" title="4:30 am" rel="bookmark"><span class="entry-date">January 15, 2012</span></a> <span class="meta-sep">by</span> <span class="author vcard"><a class="url fn n" href="http://hajzer.info/author/attila" title="View all posts by Attila Hajzer">Attila Hajzer</a></span>    <p>Skills Web Design Skills: Graphical user interface (GUI) design using HTML/XHTML/CSS Web standards compliance and basic accessibility issues (as they pertain to XHTML and HTML5) Planning, designing, and implementing web site structure and navigation layout Designing and planning additions to … <a href="http://hajzer.info/skills">Continue reading <span class="meta-nav">→</span></a></p></div><!-- END DEFAULT CONTAINER -->	  <div id="default-container"><h2><a href="http://hajzer.info/resume" title="Permalink to Resume" rel="bookmark">Resume</a></h2>   <span class="meta-prep meta-prep-author">Posted on</span> <a href="http://hajzer.info/resume" title="4:29 am" rel="bookmark"><span class="entry-date">January 15, 2012</span></a> <span class="meta-sep">by</span> <span class="author vcard"><a class="url fn n" href="http://hajzer.info/author/attila" title="View all posts by Attila Hajzer">Attila Hajzer</a></span>    <p>Resume Expert Knowledge of XHTML (standards compliance and basic accessibility) and Cascading Style Sheets (CSS). Good knowledge of Adobe Fireworks/ Photoshop/Dreamweaver/ Homesite, and Microsoft Office Windows environment. High level of knowledge of Macintosh environment. Experience Web Designer The Dot People, … <a href="http://hajzer.info/resume">Continue reading <span class="meta-nav">→</span></a></p></div><!-- END DEFAULT CONTAINER -->	 <div id="default-container"><h2><a href="http://hajzer.info/portfolio" title="Permalink to Portfolio" rel="bookmark">Portfolio</a></h2>   <span class="meta-prep meta-prep-author">Posted on</span> <a href="http://hajzer.info/portfolio" title="3:36 am" rel="bookmark"><span class="entry-date">January 15, 2012</span></a> <span class="meta-sep">by</span> <span class="author vcard"><a class="url fn n" href="http://hajzer.info/author/attila" title="View all posts by Attila Hajzer">Attila Hajzer</a></span>    <p>Design Process When I get an idea, the first thing I do is grab paper and a pen, draw out what I’m thinking, what elements I want and where I want them. When I find something that is visually pleasing, … <a href="http://hajzer.info/portfolio">Continue reading <span class="meta-nav">→</span></a></p></div><!-- END DEFAULT CONTAINER -->	  <div id="default-container"><h2><a href="http://hajzer.info/about" title="Permalink to About" rel="bookmark">About</a></h2>   <span class="meta-prep meta-prep-author">Posted on</span> <a href="http://hajzer.info/about" title="9:11 pm" rel="bookmark"><span class="entry-date">January 14, 2012</span></a> <span class="meta-sep">by</span> <span class="author vcard"><a class="url fn n" href="http://hajzer.info/author/attila" title="View all posts by Attila Hajzer">Attila Hajzer</a></span>    <p>About My name is Attila Hajzer and I am a Current student studying at Niagara College for General Arts. I have been doing website design for 4 years now and I enjoy every bit of it. I enjoy learning new … <a href="http://hajzer.info/about">Continue reading <span class="meta-nav">→</span></a></p></div><!-- END DEFAULT CONTAINER -->	 <div id="default-container"><h2><a href="http://hajzer.info/services" title="Permalink to Services" rel="bookmark">Services</a></h2>   <span class="meta-prep meta-prep-author">Posted on</span> <a href="http://hajzer.info/services" title="9:11 pm" rel="bookmark"><span class="entry-date">January 14, 2012</span></a> <span class="meta-sep">by</span> <span class="author vcard"><a class="url fn n" href="http://hajzer.info/author/attila" title="View all posts by Attila Hajzer">Attila Hajzer</a></span>    <p>Services I provide website design service as well as web development services. I make the job easy for you because you can choose whether to have me just design a website, just develop or update a design you previously had … <a href="http://hajzer.info/services">Continue reading <span class="meta-nav">→</span></a></p></div><!-- END DEFAULT CONTAINER -->	  <div id="default-container"><h2><a href="http://hajzer.info/" title="Permalink to Home" rel="bookmark">Home</a></h2>   <span class="meta-prep meta-prep-author">Posted on</span> <a href="http://hajzer.info/" title="6:50 am" rel="bookmark"><span class="entry-date">January 14, 2012</span></a> <span class="meta-sep">by</span> <span class="author vcard"><a class="url fn n" href="http://hajzer.info/author/attila" title="View all posts by Attila Hajzer">Attila Hajzer</a></span>    <p>Need A Website? You’ve come to the right place! Take a tour of our newly redesigned website we guarintee you’ll love it just as much as we do! Website Design Graphic Design WordPress Website Design Using HTML5 and valid CSS3 … <a href="http://hajzer.info/">Continue reading <span class="meta-nav">→</span></a></p></div><!-- END DEFAULT CONTAINER -->	 <div id="default-container"><h2><a href="http://hajzer.info/hello-world" title="Permalink to Hello world!" rel="bookmark">Hello world!</a></h2>   <span class="meta-prep meta-prep-author">Posted on</span> <a href="http://hajzer.info/hello-world" title="2:59 am" rel="bookmark"><span class="entry-date">January 14, 2012</span></a> <span class="meta-sep">by</span> <span class="author vcard"><a class="url fn n" href="http://hajzer.info/author/attila" title="View all posts by Attila Hajzer">Attila Hajzer</a></span>    <p>Welcome to WordPress. This is your first post. Edit or delete it, then start blogging!</p></div><!-- END DEFAULT CONTAINER -->	  <div id="default-container"><h2><a href="http://hajzer.info/support" title="Permalink to Support" rel="bookmark">Support</a></h2>   <span class="meta-prep meta-prep-author">Posted on</span> <a href="http://hajzer.info/support" title="2:59 am" rel="bookmark"><span class="entry-date">January 14, 2012</span></a> <span class="meta-sep">by</span> <span class="author vcard"><a class="url fn n" href="http://hajzer.info/author/attila" title="View all posts by Attila Hajzer">Attila Hajzer</a></span>    <p>Support This is an example page. It’s different from a blog post because it will stay in one place and will show up in your site navigation (in most themes). Most people start with an About page that introduces them … <a href="http://hajzer.info/support">Continue reading <span class="meta-nav">→</span></a></p></div><!-- END DEFAULT CONTAINER -->	   <div id="sidebar"><div id="search">  <form role="search" method="get" id="searchform" action="http://hajzer.info/">	 <div><label class="screen-reader-text" for="s">Search for: </label>		 <input type="text" id="searchinput" placeholder="Search..." value="" name="s" id="s" />		 <input type="submit" id="searchsubmit" value="Search" />	 </div>  </form></div><br /><h3 id="title">Sidebar</h3> <div id="twitter-box"><h3>Twitter:</h3><div id="tweet">   <ul>	    <li>		    <div class="tweet-inner">			    <p>					 Super exited to Launch the new website hoping it will be done by the end of next week! Ive been working all week non stop on it! in bed soon					 <span class="tweet-time">7 hours ago</span>			    </p>		    </div><!-- /tweet-inner -->	    </li>    </ul><span><a href="http://twitter.com/#!/attilahajzer1">Follow me on Twitter</a></span></div></div><div id="social"><a href="https://www.facebook.com/pages/Attila-Hajzer-Designs/130098887017673" target="_Blank" class="box facebook"></a><a href="http://www.linkedin.com/profile/view?id=156704864" target="_Blank" class="box linkedin"></a><a href="http://www.flickr.com/photos/attilahajzer/" target="_Blank" class="box flickr"></a><a href="http://www.twitter.com/Attilahajzer1" target="_Blank" class="box twitter"></a><a href="https://plus.google.com/118442094377896970615/posts" target="_Blank" class="box google"></a><a href="http://wordpress.org/" target="_Blank" class="box wordpress"></a><div class="right"></div></div><br /><div id="sponsors"><p>Sponsors</p><a href="http://thedotpeople.com/" target="_Blank" class="sponsor-box tdp"></a><a href="http://thedotpeople.com/" target="_Blank" class="sponsor-box tdp"></a><a href="http://thedotpeople.com/" target="_Blank" class="sponsor-box tdp"></a><a href="http://thedotpeople.com/" target="_Blank" class="sponsor-box tdp"></a></div><div class="right"></div><br /></div><!-- END SIDEBAR --><div class="both"></div></div><!--WRAPPER--> <div id="footer"><div id="inside"><div class="navigation">  <h3>Navigation</h3>  <ul>   <li><a href="/">Home</a></li>   <li><a href="about/">About</a></li>   <li><a href="services/">Services</a></li>   <li><a href="contact/">Contact</a></li>   <li><a href="portfolio/">Portfolio</a></li>   <li><a href="resume">Resume</a></li>   <li><a href="support/">Support</a></li>   <li><a href="skills/">Skills</a></li>  </ul></div><!-- End navigation --><div class="websites">  <h3>Favorite Websites</h3>  <ul>   <li><a href="http://css-tricks.com/" target="_Blank">CSS-Tricks</a></li>   <li><a href="http://www.smashingmagazine.com/" target="_Blank">Smashing Magazine</a></li>   <li><a href="http://www.webdesignerdepot.com/" target="_Blank">Webdesigners Depot</a></li>   <li><a href="http://webdesignerwall.com/" target="_Blank">Webdesigners Wall</a></li>  </ul></div><!-- End websites --><div class="people">  <h3>People I Enjoy</h3>  <ul>   <li><a href="http://chriscoyier.net/" target="_Blank">Chris Coyier</a></li>   <li><a href="http://lea.verou.me/" target="_Blank">Lea Verou</a></li>   <li><a href="http://www.doncor.com/site/home" target="_Blank">Don Cormier</a></li>   <li><a href="http://squaredeye.com/" target="_Blank">Matthew Smith</a></li>   <li><a href="http://elliotjaystocks.com/" target="_Blank">Elliot Jay Stocks</a></li>   <li><a href="http://paulirish.com/" target="_Blank">Paul Irish</a></li>   <li><a href="http://www.kaylaellisdesign.com/" target="_Blank">Kayla Ellis</a></li>  </ul></div><!-- End people --><div class="both"></div></div>   <!-- END INSIDE --><div class="both"></div></div>    <!--END FOOTER -->

CSS:

/*  Main Content Wrap  */#default-container{width:550px;float:left;padding:10px;margin:0px;}#default-container h2,#default-container h3{font-family: ‘Palatino Linotype’, ‘Book Antiqua’, Palatino, serif;font-style: italic;color:#fcae00;margin-bottom:15px;font-weight: 100;margin-top:40px;}#default-container p{color:#505050;font-family: ‘Palatino Linotype’, ‘Book Antiqua’, Palatino, serif;font-size:16px;font-weight:lighter;}#default-container input{height:25px;line-height:25px;color:#666666;font-size:14px;}#default-container a {color:#fcae00;}#default-container a.button{padding:4px 12px 6px 12px;background-color:#fcae00;border-radius:6px;color:#FFFFFF;}#default-container h3.button{color:#505050; font-style:italic;}.search-result{width:550px;background-color:#EEEEEE; margin:10px 0; padding:10px 10px 5px 10px; border-radius:8px;}#wrap{width:550px; margin:0 auto;}#content-wrap{width:550px;padding:20px 0;color:#333333;float:left;margin-bottom:30px;}/*   Search Query   */#search-query{color:#666666;font-family: "Gill Sans / Gill Sans MT", sans-serif;font-weight:normal;font-size:20px;width:auto;margin:20px 0;}

[dsonesuk]

Your link is wrong, everything works fine for me nav links go to darker colour with shadow, and cursor pointer appears.

[attila2452]

yeah it was weird. for some reason only for the support page it was like that. i think it had something to do with <div id="default-container"> was spelt wrong. which would affect the padding, or possibly because i was missing the ">" in the code. but thanks . think you could help me with the search results page? I've had the same problem with another website (same code)

[dsonesuk]

the floated anchors for social and the... sponsors are causing the problem either give then both clear: right; or wrap them in a outer container and use overflow: hidden.

[attila2452]

You are a html, CSS, PHP, jQuery GURU!! how do you do it!

[dsonesuk]

Don't know must be something in the water. or several years putting pages together and correcting these kind of problems.

[attila2452]

I think my weakest point right now with my current knowledge, is CSS Floats. it just doesn't stick, and i find myself guessing half the time. i know float left then margin anything left (the size + padding and margin of the floated item) but its the clearing, whether to clear left, right or both.

[dsonesuk]

To be honest I hardly use clear, I always wrap the floated elements and use overflow: hidden; which prevent float styling seeping out to affect other elements within the page.