Results 1 to 5 of 5

Thread: [RESOLVED] ul appears outside of div

  1. #1

    Thread Starter
    Super Moderator dday9's Avatar
    Join Date
    Mar 2011
    Location
    South Louisiana
    Posts
    11,711

    Resolved [RESOLVED] ul appears outside of div

    I'm getting frustrated with this. For some reason my <ul> is appearing outside of my <div> element. Here is my full code:
    Code:
    <html>
    
    	<head>
    		<link rel="stylesheet" type="text/css" href="index.css">
    	</head>
    	
    	<body>
    	
    		<div id='header'>
    			<ul>
    				<li><a href=''>Account</a></li>
    				<li><a href=''>Register</a></li>
    				<li><a href=''></a></li>
    				<li><a href=''></a></li>
    				<li><a href=''></a></li>
    			</ul>
    		</div>
    		
    		<div id='main'>
    			<div>
    				<img id='logo' />
    				<ul>
    					<li><a href=''>Home</a></li>
    					<li><a href=''>Our Story</a></li>
    					<li><a href=''>How It Works</a></li>
    				</ul>
    			</div>
    			<!-- TODO: Slideshow -->
    		</div>
    		
    		<div id='products'>
    			<div class='product'>
    				<img src='' />
    				<strong></strong>
    			</div>
    			<div class='product'>
    				<img src='' />
    				<strong></strong>
    			</div>
    			<div class='product'>
    				<img src='' />
    				<strong></strong>
    			</div>
    			<div class='product'>
    				<img src='' />
    				<strong></strong>
    			</div>
    		</div>
    		
    		<div id='testimonials'>
    			<p>Lorem ipsum dolor sit amet, odio libris sea id, alii minimum oportere an eos. Vix ea nulla ignota philosophia, id numquam splendide concludaturque duo. At falli movet disputando his. Nec nibh efficiendi ad, ad per accumsan probatus partiendo.<span id='author1'></span></p>
    			<p>Lorem ipsum dolor sit amet, iudico periculis intellegebat sed ut. Usu an eripuit consulatu sadipscing, no mea delenit quaestio gubergren. Ea usu velit bonorum, repudiandae necessitatibus sed id, ex duo utinam ridens consequat. Usu cu exerci mucius.<span id='author1'></span></p>
    			<p>Lorem ipsum dolor sit amet, per ne enim alterum, ei utroque rationibus nam, molestie tincidunt usu an. Per laudem postea elaboraret ut, eam ex quis everti audire. Mel paulo alienum tibique cu. Numquam ornatus fabellas eam ei, ius unum dictas adipiscing te, mel an amet dicit noster. Nec in rebum.<span id='author1'></span></p>
    		</div>
    		
    		<div id='footer'>
    			<p></p>
    		</div>
    	
    	</body>
    
    </html>
    And the CSS:
    Code:
    #header {
    	background-color: #B0C4DE;
    	display: block;
    	height: 1.25em;
    	width: 100%;
    }
    
    #header ul {
    	float: right;
    }
    
    #header li {
    	display: inline-block;
    	font-family: "Trebuchet MS", Helvetica, sans-serif;
    	font-size: 1.063em;
    	list-style: none;
    }
    
    #header a, #header a:link, #header a:visited, #header a:active {
    	color: #ffffff;
    	text-decoration: none;
    }
    
    #header a:hover {
    	color: #000000;
    }
    Whenever I debug with Firebug, the <ul> appears below the <div>, what am I doing wrong?
    Last edited by dday9; Oct 1st, 2014 at 10:30 PM.
    "Code is like humor. When you have to explain it, it is bad." - Cory House
    VbLessons | Code Tags | Sword of Fury - Jameram

  2. #2

    Thread Starter
    Super Moderator dday9's Avatar
    Join Date
    Mar 2011
    Location
    South Louisiana
    Posts
    11,711

    Re: [RESOLVED] ul appears outside of div

    I was able to fix it by setting the margin-bottom property of the header div to 2em, although this seems like a hack... it works.

    I'd really enjoy to hear yalls suggestions.
    Last edited by dday9; Oct 1st, 2014 at 10:32 PM.
    "Code is like humor. When you have to explain it, it is bad." - Cory House
    VbLessons | Code Tags | Sword of Fury - Jameram

  3. #3
    Smooth Moperator techgnome's Avatar
    Join Date
    May 2002
    Posts
    34,531

    Re: ul appears outside of div

    which div? which ul? You've got more than one case of ul in div... which one are you talking about?
    By your own reply, I'm guessing you meant the header div with the ul in it? Rather than floating the ul, try floating the div tag instead. Generally I try to float the containers, not the elements themselves.

    -tg
    * I don't respond to private (PM) requests for help. It's not conducive to the general learning of others.*
    * I also don't respond to friend requests. Save a few bits and don't bother. I'll just end up rejecting anyways.*
    * How to get EFFECTIVE help: The Hitchhiker's Guide to Getting Help at VBF - Removing eels from your hovercraft *
    * How to Use Parameters * Create Disconnected ADO Recordset Clones * Set your VB6 ActiveX Compatibility * Get rid of those pesky VB Line Numbers * I swear I saved my data, where'd it run off to??? *

  4. #4

    Thread Starter
    Super Moderator dday9's Avatar
    Join Date
    Mar 2011
    Location
    South Louisiana
    Posts
    11,711

    Re: ul appears outside of div

    Well it's actually happening to both. Setting the margin worked for the header DIV because the UL was the only element. I'll try floating the DIV instead and see what happens.

    God, CSS has so many quirks.

    Edit: So here is a solution that I'm fine with:
    Code:
    #header {
    	background-color: #B0C4DE;
    	float: right;
    	height: auto;
    	width: 100%;
    }
    
    #header ul {
    	float: right;
    }
    That seems to work perfectly.
    Last edited by dday9; Oct 2nd, 2014 at 11:20 AM.
    "Code is like humor. When you have to explain it, it is bad." - Cory House
    VbLessons | Code Tags | Sword of Fury - Jameram

  5. #5
    Frenzied Member tr333's Avatar
    Join Date
    Nov 2004
    Location
    /dev/st0
    Posts
    1,605

    Re: [RESOLVED] ul appears outside of div

    Just a quick note, in future it would be helpful to post your sample code on a code playground, as it makes it much easier to visualise the problem and make quick changes.

    Example for this thread: http://cssdeck.com/labs/aeesbdqh
    CSS layout comes in to the 21st century with flexbox!
    Just another Perl hacker,

Posting Permissions

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



Click Here to Expand Forum to Full Width