I have a main menu, and in the HTML code, it is in the correct order, but when viewed in the browser, it is reversed. Why?
HTML:
<div class="header">
<img src="images/JTS_1_B_FL31.png" alt="J.T.S Logo" class="logo" />
<ul class="menu">
<li class="current">Home</li>
<li>Services</li>
<li>Support</li>
<li>Contact Us</li>
<li>My Account</li>
</ul>
</div>
CSS:
.header{
width: 100%;
height: 30px;
background-color: #1D242D;
}
.logo{
padding: 5px 0 0 5px;
float: left;
}
.menu{
float: right:
}
li{
display: inline;
list-style: none;
float: right;
padding: 5px 5px 7px 5px;
}
Screenshot:
You have the LI's floated: right, as well as the #menu floated right, which will layout from right to left. You might try float: left on them, maybe try without a float attribute on either #menu and the LI.
When you use CSS to float things right, they are attached to the right of the page in the order that you list them.
In this case, 'Home' is getting attached to the right of the page, then 'Services' is attached as far right as possible (which ends up being to the left of 'Home').
You either need to reverse the order of your list (since this is expected behaviour), or possibly put the entire list in a single div which is floated right.
You are floating each list item <li>. This causes each new list item to appear to the left of the previously floated items.
float: right within the same box element will put elements added later to the left of a previously right-floated element. if you don't like Jared's suggestion, you can add them in reverse order.
Because you've told the list-elements to float: right. They're doing exactly what you told them to. If you leave the li elements with display: inline and remove the float declaration they should appear in the right order, with the menu itself still floated to the right.
Seems to work (please note the colour change of the a elements, blue-on-black was painful to try and read): JS Fiddle.
Related
I would like to have part of <li> content aligned to the left ("Title") and rest of it ("[button]") to the right. For each item.
I'm using following HTML code:
<ul class="dual-align-list">
<li><div>Title</div><div>[button]</div></li>
<li><div>Title</div><div>[button]</div></li>
</ul>
and styles:
ul.dual-align-list li
{
display: block;
height: 25px;
}
ul.dual-align-list li div:first-child {float: left}
ul.dual-align-list li div:nth-child(2) {float: right}
But I have a bad feeling, that I'm doing something really wrong.
Is there a better approach/solution to this problem?
But I have a bad feeling, that I'm doing something really wrong.
Is there a better approach/solution to this problem?
The only problem is your classes and use of pseudo-elements aren't very semantic. A better approach would be to give classes to your divs that describe what their content is, and style them that way.
<ul class="title-content-list">
<li><div class="title">Title</div><div class="content">[button]</div></li>
</ul>
And CSS
ul.title-content-list > li { display: block; height: 25px; }
ul.title-content-list > li > div.title { float: left }
ul.title-content-list > li > div.content { float: right }
Or something along those lines.
It's very bad practice to use "left" or "right" as class names - what if you later decide you want your title on the right and button on the left? You'd have to change all your HTML, or have weird CSS where .right positions elements on the left and .left on the right.
What you are doing seems to be working (at least per how you describe what you are looking for here). I'm assuming that your issue is the complexity of your selectors? If so, one thing you could try is moving the selector to the individual element. I know for bootstrap they call this pull-right so I went ahead and did that:
<ul class="dual-align-list">
<!-- Title really only needs to be in a div if you
plan on styling it further -->
<li> Title <div class="pull-right">[button]</div></li>
<li> Title <div class="pull-right">[button]</div></li>
</ul>
See this JSFiddle for a working example with that in it. Hopefully this addresses the actual question!
Edit
By the way, if the issue is just how far the button goes to the right you can put everything in a fixed width container or you can add a margin-right to the "pull-right" class. For the fixed width container, just wrap your ul in:
<div class="container"> <!-- "ul" here --> </div>
You will also need the following style rule as well:
/* edited to use percents for a responsive layout */
.container { margin-left: 5%; margin-right: 5% }
I put this in an update to the previous fiddle you can find here. Hopefully that helps some as well. Good luck!
EDIT (2)
Changed fixed width layout to responsive layout with 5% margins. These could be adjusted per the desired result or even styled with the #media element to vary based on screen size!
Try this:
HTML
<ul class="dual-align-list">
<li>
<div class="left">Title</div>
<div class="right">[button]</div>
</li>
<li>
<div class="left">Title</div>
<div class="right">[button]</div>
</li>
</ul>
CSS
ul.dual-align-list li {
display: block;
height: 25px;
position: relative;
}
ul.dual-align-list li .left {
text-align: left;
position: absolute;
left:0;
}
ul.dual-align-list li .right {
text-align: right;
position: absolute;
right:0;
}
Hopefully this helps :)
I have made a horizontal navigation bar using styles, but I've encountered a major issue... Since <li> is a block element, I can't align it using text-align:right, which makes me unable to align it properly. I've tried using the display:inline; syntax for the list-item element, but that doesn't make any difference either (which makes sense actually).
My question being, is there any way of aligning horizontal <li>, without having to use float:right;? I want it to fit the current list's format (which I've adjusted to fit a parent div), and using float isn't really a good or safe method. Here's a screenshot of what I got so far (layout is slightly messed up due to recent addition of image). As you can see, I have managed to get the "My page" and "Log out" properly placed, but as soon as I add something more "complex" (like the "+", which now is placed in the normal list), it gets screwed up... I really don't get how other websites manages to get this right.
You must define text-align: right for the containing element
HTML:
<ul class="nav">
<li class="menu">1</li>
<li class="menu">2</li>
<li class="menu">3</li>
<li class="menu">4</li>
<li class="menu">5</li>
</ul>
CSS:
.nav {
text-align: right;
}
.menu {
display: inline;
}
JSFiddle
You can split the menu to a left and right part, if you like. Add or remove padding and margin as needed
HTML:
<ul class="nav left-nav">
<li class="menu">1</li>
<li class="menu">2</li>
<li class="menu">3</li>
</ul>
<ul class="nav right-nav">
<li class="menu">4</li>
<li class="menu">5</li>
</ul>
CSS:
.nav {
margin: 0;
padding: 0;
}
.left-nav {
text-align: left;
}
.right-nav {
text-align: right;
}
.menu {
display: inline;
}
JSFiddle
Here you go i think this is what you are looking for:
jsfiddle.net/Sdw5h/
I am trying to create custom bullet points and it is not working.
This is my HTML.
<div id="services">
<ul id="serviceText">
<h2 id="serviceHeader"><strong>Services I Offer:</strong></h2>
<li>Intros</li>
<li>Transitions</li>
<li>Lower Third Titles</li>
<li>Web Page Design</li>
<li>and more...</li>
</ul>
</div>
This is my CSS
ul#serviceText {
list-style-image: url(images/checkmark.gif);
font-size: 14px;
float: right;
padding-top: 5px;
color: white;
}
My site is located here xdtrammell.com/lol if it helps you to see all my code.
change your selector to ul#serviceText li. Also keep in mind that you can't include h2 element in ul. Is not valid html.
Specifically I think you're trying to create custom bullets that are images, here is how I would do it.
The CSS
.list {
margin: 0;
padding: 0;
}
.list-li {
background: url('../directory/your image here.jpg') no-repeat top left;
margin: 0;
padding: 4px 0 4px 20px;
list-style: none;
}
The key thing to note is the background image is in the top left, so take that into consideration when you adjust your padding. Padding is: Top, Right, Left, Bottom.
The HTML
<ul class="list">
<li class="list-item">lorem ipsum</li>
<li class="list-item">lorem ipsum</li>
</ul>
I hope this helps!
You're far better of using a CCS background for your list items than using list-style-image. You get far greater control over the positioning of the graphic and the spacing of the text.
See: http://preview.moveable.com/JM/ilovelists/
Does it need the ../ before the image URL so it knows to go up a directory? In other words, does your image exist in the top level directory or in one of the next-levels? If it doesn't exist in the top level then it needs "../"
Just change the path to image folder in URL like this(../images/checkmark.gif) and "li" tag element is enough as a selector.
li {list-style-image: url(../images/checkmark.gif);}
my case was,
the bullet was hidden or invisible when list-style: inside was not set.
I have an (XHTML Strict) page where I float an image alongside regular paragraphs of text. All goes well, except when a list is used instead of paragraphs. The bullets of the list overlap the floated image.
Changing the margin of the list or the list items does not help. The margin is calculated from the left of the page, but the float pushes the list items to the right inside the li itself. So the margin only helps if I make it wider than the image.
Floating the list next to the image also works, but I don't know when the list is next to a float. I don't want to float every list in my content just to fix this. Also, floating left messes up the layout when an image is floated to the right instead of left of the list.
Setting li { list-style-position: inside } does move the bullets along with the content, but it also causes lines that wrap to start aligned with the bullet, instead of aligned with the line above.
The problem is obviously caused by the bullet being rendered outside the box, the float pushing the contents of the box to the right (not the box itself). This is how IE and FF handle the situation, and as far as I know, not wrong according to the spec. The question is, how can I prevent it?
I have found a solution to this problem. Applying an ul { overflow: hidden; } to the ul ensures that the box itself is pushed aside by the float, instead of the contents of the box.
Only IE6 needs an ul { zoom: 1; } in our conditional comments to make sure the ul has layout.
Adding an improvement to Glen E. Ivey's solution:
ul {
list-style: outside disc;
margin-left: 1em;
}
ul li {
position: relative;
left: 1em;
padding-right: 1em;
}
http://jsfiddle.net/mblase75/TJELt/
I prefer this technique, since it works when the list needs to flow around the floating image, while the overflow: hidden technique will not. However, it's also necessary to add padding-right: 1em to the li to keep them from overflowing their container.
This is where the "display" property comes into its own. Set the CSS below to make the list work alongside the floated content.
display: table; works alongside floated content (filling the gap) but without hiding content behind it. Much like a table does :-)
.img {
float: left;
}
.table {
display: table;
}
<img class="img" src="https://via.placeholder.com/350x350" alt="">
<ul>
<li>Test content</li>
<li>Test content</li>
<li>Test content</li>
</ul>
<ul class="table">
<li>Test content</li>
<li>Test content</li>
<li>Test content</li>
</ul>
EDIT: Remember to add a class to isolate which lists you wish to do this for. E.g. "ul.in-content" or more generally ".content ul"
Try list-style-position: inside to change the layout of the bullets.
Why overflow: hidden works
The solution is as easy as:
ul {overflow: hidden;}
A block box with overflow: other than visible establishes a new block formatting context for its contents. W3C recommendation: http://www.w3.org/TR/CSS2/visuren.html#block-formatting
Example
The buttons on my website, which are <li> in disguise, are made like this. Make the viewport (window) of your browser smaller to see the indenting in action.
Related answers
https://stackoverflow.com/a/710264/2192488
https://stackoverflow.com/a/16041390/2192488
Article with examples
Overflow – a secret benefit
At http://archivist.incutio.com/viewlist/css-discuss/106382 I found a suggestion that worked for me: style the 'li' elements with:
position: relative;
left: 1em;
Where you replace "1em" with the width of the left padding/margin that your list items would have if the float weren't present. This works great in my application, even handling the case where the bottom of the float occurs in the middle of the lists--the bullets shift back over to the (local) left margin just right.
By adding overflow: auto; to your ul works for me at least.
Update
I've updated my jsfiddle to visualize what's going on. When having the ul beside the floating img, the content of the ul will be pushed by the float, but not the actual container. By adding overflow: auto the whole ul-box will be pushed by the float instead of only the content.
You could assign position: relative; left: 10px; to the li. (You may additionally want to give it a margin-right: 10px;, otherwise it might become too wide on the right side.)
Or, if you want to use float for the ul -- as suggested by others -- you can probably stop the rest from floating right of the ul by using clear: left on the element that follows the ul.
Disclaimer
Lists next to floated elements cause issues. In my opinion, the best way to prevent these sorts of floating issues is to avoid floating images that intersect with content. It'll also help when you have to support responsive design.
A simple design of having centered images between paragraphs will look very attractive and be much easier to support than trying to get too fancy. It's also one step away from a <figure>.
But I really want floated images!
Ok, so if you're crazy persistent enough to continue down this path, there are a couple techniques that can be used.
The simplest is to make the list use overflow: hidden or overflow: scroll so that the list is essentially shrink wrapped which pulls the padding back to where it's useful:
img {
float: left;
}
.wrapping-list {
overflow: hidden;
padding-left: 40px;
}
<img src="http://placehold.it/100x100"/>
<ul class="wrapping-list">
<li>lorem</li>
<li>ipsum</li>
<li>dolor</li>
<li>sit</li>
<li>amet</li>
</ul>
This technique has a few problems though. If the list gets long, it doesn't actually wrap around the image, which pretty much defeats the entire purpose of using float on the image.
img {
float: left;
}
.wrapping-list {
overflow: hidden;
padding-left: 40px;
}
<img src="http://placehold.it/100x100"/>
<ul class="wrapping-list">
<li>lorem</li>
<li>ipsum</li>
<li>dolor</li>
<li>sit</li>
<li>amet</li>
<li>lorem</li>
<li>ipsum</li>
<li>dolor</li>
<li>sit</li>
<li>amet</li>
<li>lorem</li>
<li>ipsum</li>
<li>dolor</li>
<li>sit</li>
<li>amet</li>
</ul>
But I really want wrapping lists!
Ok, so if you're even crazier more persistent and you absolutely must continue down this path, there's another technique that can be used to wrap the list items and maintain bullets.
Instead of padding the <ul> and trying to get it to behave nicely with bullets (which it never seems to want to do), take those bullets away from the <ul> and give them to the <li>s. Bullets are dangerous, and the <ul> just isn't responsible enough to handle them properly.
img {
float: left;
}
.wrapping-list {
padding: 0;
list-style-position: inside;
}
.wrapping-list li {
overflow: hidden;
padding-left: 25px;
}
<img src="http://placehold.it/100x100"/>
<ul class="wrapping-list">
<li>lorem</li>
<li>ipsum</li>
<li>dolor</li>
<li>sit</li>
<li>amet</li>
<li>lorem</li>
<li>ipsum</li>
<li>dolor</li>
<li>sit</li>
<li>amet</li>
<li>lorem</li>
<li>ipsum</li>
<li>dolor</li>
<li>sit</li>
<li>amet</li>
</ul>
This wrapping behavior can do weird things to complex content, so I don't recommend adding it by default. It's much easier to set it up as something that can be opted into rather than something that has to be overridden.
I am using this to solve this problem:
ul {
display: table;
}
Try the following on your UL tag. This should take care of the bullets overlaying your image and you don't have to mess up your left allignment caused by list-position: inside.
overflow: hidden;
padding-left: 2em;
Struggled with this myself. Best I've managed is the following:
ul {
list-style-position: inside;
padding-left: 1em;
text-indent: -1em;
}
The text is not actually indented but the bullet shows.
After fighting with this interesting issue in several projects, and investigating why it happens, I finally believe I found both: a working and 'responsive' solution.
Here is the magic trick, live example: http://jsfiddle.net/superKalo/phabbtnx/
ul {
list-style: none;
position: relative;
padding-left: 0; /* remove any left padding */
margin-left: 0; /* remove any left margin */
left: 35px;
}
li {
padding-left: 0; /* remove any left padding */
margin-left: 0; /* remove any left margin */
text-indent: -19px; /* adjust as much as needed */
}
li:before {
content: '•\00a0\00a0\00a0';
color: #000; /* bonus: you can customize the bullet color */
}
Edited to update based on OP's comment
ok, then just break it up into 2 divs nested together
ul {background: blue; position:static;}
.therest {position:relative; width:100%}
.indent {float:left; }
<div class="therest">
<p>
Est tincidunt doming iis nobis nibh. Ullamcorper eorum elit lius me delenit.
</p>
<hr />
<h3>Lorem</h3>
<div class="indent">
<ul>
<li>list element</li>
<li>list element</li>
<li>list element</li>
</ul>
<div>
the rest now under the UL
</div>
try changing the ul li css to
ul {float:left; background: blue; }
Working inside an LMS without access to head of doc, found it easier to go with margin-right: 20px as an inline style for the image. Which I owe to this site.
try this:
li{
margin-left:5px;
}
If you want them to go left, just put in a -##px value.
or you could do this:
#content ul {
background:none repeat scroll 0 0 #AACCDD;
float:left;
margin-right:10px;
padding:10px;
and then remove all the styling from the li
How about this?
ul{float:left; clear:right}
width: 300px;
height: 30px;
margin-left: auto;
right: 10px;
margin-left: auto will cause the element itself to be right aligned.
Set height and width of the element you want - in my it's a background image in a div inside
You could try also floating the ul to the left, and define an appropriate width for it, so that it floats next to the image.
Something a little like this jsfiddle?
I fixed it with
div.class-name ul {
clear: both;
}
width: auto; overflow: hidden;
Add display:table; to ul:
ul{display:table;}
I have an (XHTML Strict) page where I float an image alongside regular paragraphs of text. All goes well, except when a list is used instead of paragraphs. The bullets of the list overlap the floated image.
Changing the margin of the list or the list items does not help. The margin is calculated from the left of the page, but the float pushes the list items to the right inside the li itself. So the margin only helps if I make it wider than the image.
Floating the list next to the image also works, but I don't know when the list is next to a float. I don't want to float every list in my content just to fix this. Also, floating left messes up the layout when an image is floated to the right instead of left of the list.
Setting li { list-style-position: inside } does move the bullets along with the content, but it also causes lines that wrap to start aligned with the bullet, instead of aligned with the line above.
The problem is obviously caused by the bullet being rendered outside the box, the float pushing the contents of the box to the right (not the box itself). This is how IE and FF handle the situation, and as far as I know, not wrong according to the spec. The question is, how can I prevent it?
I have found a solution to this problem. Applying an ul { overflow: hidden; } to the ul ensures that the box itself is pushed aside by the float, instead of the contents of the box.
Only IE6 needs an ul { zoom: 1; } in our conditional comments to make sure the ul has layout.
Adding an improvement to Glen E. Ivey's solution:
ul {
list-style: outside disc;
margin-left: 1em;
}
ul li {
position: relative;
left: 1em;
padding-right: 1em;
}
http://jsfiddle.net/mblase75/TJELt/
I prefer this technique, since it works when the list needs to flow around the floating image, while the overflow: hidden technique will not. However, it's also necessary to add padding-right: 1em to the li to keep them from overflowing their container.
This is where the "display" property comes into its own. Set the CSS below to make the list work alongside the floated content.
display: table; works alongside floated content (filling the gap) but without hiding content behind it. Much like a table does :-)
.img {
float: left;
}
.table {
display: table;
}
<img class="img" src="https://via.placeholder.com/350x350" alt="">
<ul>
<li>Test content</li>
<li>Test content</li>
<li>Test content</li>
</ul>
<ul class="table">
<li>Test content</li>
<li>Test content</li>
<li>Test content</li>
</ul>
EDIT: Remember to add a class to isolate which lists you wish to do this for. E.g. "ul.in-content" or more generally ".content ul"
Try list-style-position: inside to change the layout of the bullets.
Why overflow: hidden works
The solution is as easy as:
ul {overflow: hidden;}
A block box with overflow: other than visible establishes a new block formatting context for its contents. W3C recommendation: http://www.w3.org/TR/CSS2/visuren.html#block-formatting
Example
The buttons on my website, which are <li> in disguise, are made like this. Make the viewport (window) of your browser smaller to see the indenting in action.
Related answers
https://stackoverflow.com/a/710264/2192488
https://stackoverflow.com/a/16041390/2192488
Article with examples
Overflow – a secret benefit
At http://archivist.incutio.com/viewlist/css-discuss/106382 I found a suggestion that worked for me: style the 'li' elements with:
position: relative;
left: 1em;
Where you replace "1em" with the width of the left padding/margin that your list items would have if the float weren't present. This works great in my application, even handling the case where the bottom of the float occurs in the middle of the lists--the bullets shift back over to the (local) left margin just right.
By adding overflow: auto; to your ul works for me at least.
Update
I've updated my jsfiddle to visualize what's going on. When having the ul beside the floating img, the content of the ul will be pushed by the float, but not the actual container. By adding overflow: auto the whole ul-box will be pushed by the float instead of only the content.
You could assign position: relative; left: 10px; to the li. (You may additionally want to give it a margin-right: 10px;, otherwise it might become too wide on the right side.)
Or, if you want to use float for the ul -- as suggested by others -- you can probably stop the rest from floating right of the ul by using clear: left on the element that follows the ul.
Disclaimer
Lists next to floated elements cause issues. In my opinion, the best way to prevent these sorts of floating issues is to avoid floating images that intersect with content. It'll also help when you have to support responsive design.
A simple design of having centered images between paragraphs will look very attractive and be much easier to support than trying to get too fancy. It's also one step away from a <figure>.
But I really want floated images!
Ok, so if you're crazy persistent enough to continue down this path, there are a couple techniques that can be used.
The simplest is to make the list use overflow: hidden or overflow: scroll so that the list is essentially shrink wrapped which pulls the padding back to where it's useful:
img {
float: left;
}
.wrapping-list {
overflow: hidden;
padding-left: 40px;
}
<img src="http://placehold.it/100x100"/>
<ul class="wrapping-list">
<li>lorem</li>
<li>ipsum</li>
<li>dolor</li>
<li>sit</li>
<li>amet</li>
</ul>
This technique has a few problems though. If the list gets long, it doesn't actually wrap around the image, which pretty much defeats the entire purpose of using float on the image.
img {
float: left;
}
.wrapping-list {
overflow: hidden;
padding-left: 40px;
}
<img src="http://placehold.it/100x100"/>
<ul class="wrapping-list">
<li>lorem</li>
<li>ipsum</li>
<li>dolor</li>
<li>sit</li>
<li>amet</li>
<li>lorem</li>
<li>ipsum</li>
<li>dolor</li>
<li>sit</li>
<li>amet</li>
<li>lorem</li>
<li>ipsum</li>
<li>dolor</li>
<li>sit</li>
<li>amet</li>
</ul>
But I really want wrapping lists!
Ok, so if you're even crazier more persistent and you absolutely must continue down this path, there's another technique that can be used to wrap the list items and maintain bullets.
Instead of padding the <ul> and trying to get it to behave nicely with bullets (which it never seems to want to do), take those bullets away from the <ul> and give them to the <li>s. Bullets are dangerous, and the <ul> just isn't responsible enough to handle them properly.
img {
float: left;
}
.wrapping-list {
padding: 0;
list-style-position: inside;
}
.wrapping-list li {
overflow: hidden;
padding-left: 25px;
}
<img src="http://placehold.it/100x100"/>
<ul class="wrapping-list">
<li>lorem</li>
<li>ipsum</li>
<li>dolor</li>
<li>sit</li>
<li>amet</li>
<li>lorem</li>
<li>ipsum</li>
<li>dolor</li>
<li>sit</li>
<li>amet</li>
<li>lorem</li>
<li>ipsum</li>
<li>dolor</li>
<li>sit</li>
<li>amet</li>
</ul>
This wrapping behavior can do weird things to complex content, so I don't recommend adding it by default. It's much easier to set it up as something that can be opted into rather than something that has to be overridden.
I am using this to solve this problem:
ul {
display: table;
}
Try the following on your UL tag. This should take care of the bullets overlaying your image and you don't have to mess up your left allignment caused by list-position: inside.
overflow: hidden;
padding-left: 2em;
Struggled with this myself. Best I've managed is the following:
ul {
list-style-position: inside;
padding-left: 1em;
text-indent: -1em;
}
The text is not actually indented but the bullet shows.
After fighting with this interesting issue in several projects, and investigating why it happens, I finally believe I found both: a working and 'responsive' solution.
Here is the magic trick, live example: http://jsfiddle.net/superKalo/phabbtnx/
ul {
list-style: none;
position: relative;
padding-left: 0; /* remove any left padding */
margin-left: 0; /* remove any left margin */
left: 35px;
}
li {
padding-left: 0; /* remove any left padding */
margin-left: 0; /* remove any left margin */
text-indent: -19px; /* adjust as much as needed */
}
li:before {
content: '•\00a0\00a0\00a0';
color: #000; /* bonus: you can customize the bullet color */
}
Edited to update based on OP's comment
ok, then just break it up into 2 divs nested together
ul {background: blue; position:static;}
.therest {position:relative; width:100%}
.indent {float:left; }
<div class="therest">
<p>
Est tincidunt doming iis nobis nibh. Ullamcorper eorum elit lius me delenit.
</p>
<hr />
<h3>Lorem</h3>
<div class="indent">
<ul>
<li>list element</li>
<li>list element</li>
<li>list element</li>
</ul>
<div>
the rest now under the UL
</div>
try changing the ul li css to
ul {float:left; background: blue; }
Working inside an LMS without access to head of doc, found it easier to go with margin-right: 20px as an inline style for the image. Which I owe to this site.
try this:
li{
margin-left:5px;
}
If you want them to go left, just put in a -##px value.
or you could do this:
#content ul {
background:none repeat scroll 0 0 #AACCDD;
float:left;
margin-right:10px;
padding:10px;
and then remove all the styling from the li
How about this?
ul{float:left; clear:right}
width: 300px;
height: 30px;
margin-left: auto;
right: 10px;
margin-left: auto will cause the element itself to be right aligned.
Set height and width of the element you want - in my it's a background image in a div inside
You could try also floating the ul to the left, and define an appropriate width for it, so that it floats next to the image.
Something a little like this jsfiddle?
I fixed it with
div.class-name ul {
clear: both;
}
width: auto; overflow: hidden;
Add display:table; to ul:
ul{display:table;}