Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 2 of 2
  1. #1
    Regular Coder
    Join Date
    Jan 2013
    Location
    Australia
    Posts
    118
    Thanks
    22
    Thanked 0 Times in 0 Posts

    Smile Header Out Of Line

    Hello I have a problem with some floats.

    http://jsfiddle.net/mwbcomputers/gsPWW/3/

    I have two sections top and main header the css is interfering with each other

    Forcing the cart down?

    And Gap Between Top And bottom header

    Feel free to edit fiddle
    Last edited by riwakawd; 04-30-2013 at 06:12 PM.

  • #2
    Regular Coder
    Join Date
    Dec 2010
    Posts
    134
    Thanks
    17
    Thanked 6 Times in 6 Posts
    Code:
    <div id="container">
    	
    		<div id="top-header">
    					
    			<div class="floatLeft">
    				<div id="leftNav">
    					<ul>
    						<li><a href="#" class="th-button">Home</a></li>
    						<li><a href="#">FAQs</a></li>
    						<li><a href="#">My Account</a></li>
    					</ul>
    				</div>
    			</div>
    					
    			<div class="floatRight">
    				<div id="rightNav">
    					<ul>
    						<li><a href="#">Welcome Guest</a></li>
    						<li><a href="#">Login</a></li>
    						<li><a href="#">Register</a></li>
    					</ul>
    				</div>
    			</div>
    			
    		<div class="clear"></div>
    			
    		</div>
    		
    		<div class="clear"></div>
    	  
    		<header class="main">
    			
    			
    			
    			<div class="col-1">
    				<div id="logo">
    					Sample Logo
    					<p>www.sample.com</p>
    				</div>
    			</div>
    			 
    			
    			 
    			<div class="col-2">
    			</div>
    			
    			  
    			  
    			<div class="col-3">
    				<div class="col-3ia">
    					<div class="image"></div>
    						<ul class="cartinfo">
    							<li><a href="#" class="total">0 items $0.00</a></li>
    							<li><a href="#" class="cart">View Cart</a></li>
    						</ul>
    				</div>
    			</div>
    			
    			<div class="clear"></div>
    			
    		</header>
    		
    		<div class="clear"></div>
    							
    	</div>
    Stop going mad with the clears, you don't clear after every float, you clear after the last float.


  •  

    Tags for this Thread

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •