-
Oct 1st, 2014, 08:53 PM
#1
[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.
-
Oct 1st, 2014, 09:39 PM
#2
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.
-
Oct 2nd, 2014, 08:30 AM
#3
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
-
Oct 2nd, 2014, 09:04 AM
#4
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.
-
Oct 2nd, 2014, 07:15 PM
#5
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
Posting Permissions
- You may not post new threads
- You may not post replies
- You may not post attachments
- You may not edit your posts
-
Forum Rules
|
Click Here to Expand Forum to Full Width
|