Menu
So I have a 3 unordered lists like so:
<ul class="menu"> <li class="heading">Title (Click To Download)</li> <li><a title="Download sample.mp3" href="http://example.com/sample.mp3">Sample Song</a></li> </ul> With the following css style:
/* SITE MAP MENUS */ ul.menu { float: left; margin: 0 10px 0 10px; display: block; font-size: 13px; line-height: 24px; color: #898989; } ul.menu li {} .menuText { } li.heading { color: #493f0b; font-weight: bold; border-bottom: 1px solid #d7d7d7; } However when I put a new div:
<div class="pleasedontfloat">The paganation would go here..</div> Instead of going below the lists it goes next to them. How would I fix this? (the class pleasedontfloat has no rules applied to it)
976
Set size and make inline Because they're block elements, when reducing the size of Div one to make room for the other div, you're left with space next to Div one and Div two below Div one. To move the div up to the next line both div's need to have the inline-block display setting as shown below.
By default <DIV> does cause a line break. You probably want to use a <SPAN> . Show activity on this post. You could make them float, but for menu items, it is far more common to use lists to create these.
They're just tags. There's zero difference whatsoever between them DOM-wise; the only difference is in the rendering (CSS, which you can customize either way) and the meaning (semantics). If you have a list of things, use a <ul> .
To get all elements to appear on one line the easiest way is to: Set white-space property to nowrap on a parent element; Have display: inline-block set on all child elements.
.pleasedontfloat { clear:both; } If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
