I've been searching on how to align items of a list, verticaly, in the right side of a div.
I tried float,
li {
float: right;
}
But it makes the two items be in the right side but not on top of another as I intended.
What I got on Fiddle, as you can see option1 and option2 are in the right side but not vertically aligned.
In your CSS for your li, also add clear:both;. This prevents other objects from being to either side of your li. I tried it in your fiddle, and it works nicely
See here
Basically you need to remove float: right; and add text-align:right to UL check out eh jsfiddle link i provided to see the solution
//remove
li {
float: right;
}
// and add
ul {
text-align:right;
}
http://jsfiddle.net/jspatel/F3XgY/
You can just add a :
line-height:98px;
to your li class
So it will center your text with the ul height
Here is the JSFiddle
Related
I have 2 divs. I want 1 div to be on the left side of my window and the other on the right side. I did this correctly with my logo and a little text next to it. However, under that I would like to have yet another 2 divs. I put those 2 divs in 1 div with style clear:both; this div lines up nicely under the two others. But once I do float: right; with the 2nd div, it goes outside the main div... Why?
The code:
(This should be lined up to the left)
#menu {
background-color:#485D9C;
margin-left:10px;
text-align:center;
width: 200px;
position:absolute;
float:left;
}
(This should be lined up to the right)
#content {
text-align:right;
width:600px;
position:absolute;
float:right;
}
(This is the div where both "content" and "menu" are in)
#middle {
clear:both;
border: thick solid;
position:relative;
}
Do you have an example ? With this little test: http://jsfiddle.net/BouFe/uHJQB/1/ it works !
Whenever I am using floats, I put a div, with "clear: both;" applied to it, inside of the container that holds the elements that have the float applied to them. An example of this can be found here, which I think is what you were looking for.
try placing an outer div and set the position: relative; and the inner elements mark their position as absolute
Don't know exactly what's going on without seeing your code, but I'm wondering if you're simply just no clearing your floats?
http://www.quirksmode.org/css/clearing.html
Not sure how to describe it. Why aren't the last two li floating correctly?
Site: http://symphonyninjas.com/interviews/
Add clear:left:
.photo-id.first, .first.interviewee {
margin-left: 0;
clear: left;
}
The LIs are all floating, but the images are different heights. The fifth image is hitting the third image and sitting next to it instead of underneath it.
Clear the float when you want to start a new row. You already have a class on that LI to remove the margin, simply add clear:left;
.photo-id.first, .first.interviewee {
[...]
clear: left;
}
I have a html page where I have 3 anchors in an ordered list. the last two anchors need to be at the right of the page. I understand the better way to do this involves using nth-child selectors. I attempted to create 3 instances, one to specify each anchor and this failed. I could get one of the instances to the right of the page but not two. I tried, as you will see in my code, using '2n+1' but that also did not work.
I am a bit stuck and any advice would be greatly appreciated!
http://jsfiddle.net/MwT6d/
how about this:
http://jsfiddle.net/MwT6d/7/
Maybe this:
div.content ul li {
list-style-type: none;
clear: left;
}
[...]
div.content ul li a:nth-last-child(-n+2) {
float: right;
}
In this way you set to float: right just the last two children <a> of every <li>, and then you clear the float at every <li>.
http://jsfiddle.net/hr7uz/1/
In your case, to use the nth-child selector I would do the following.
div.content ul li a:nth-child(1) {
float: left;
}
div.content ul li a:nth-child(n+2) {
float: right;
}
div.content ul li{clear:right}
The rest of your CSS seems to work fine. I would then add some margins or padding to those links that were floated right and there you go.
Personally how I would do it I would set all the relevant links to float right, then set the first-child to float left. It's kind of like thinking about the problem backwards.
You can check the problem here: http://jsfiddle.net/gkJAd/4/
I have an unordered list in where every li will have a max-height of 2.25em (I want it to be at most 2 lines). The list-type should show normally, on the outside, aligned on the first line. I tried a few things all with its on issues:
If I add the hidden, height, etc, codes to the li instead of the a, the disc disappears;
If I change the a to be display: block instead of display: inline-block, it shows correctly on Firefox but wrongly everywhere else;
If I change the a to be display: inline it puts the disc at the right place, but, since it is not longer a block, the height is ignored. Anyone got an solution?
Sol
All you need to do is add vertical-align: top to your ul li a selector code.
Updated JSFiddle. Working in FF, Chrome, and IE8/9.
I think this is what you want.
Basically, I floated and then cleared the lis.
Then I gave the ul li as a display:inline-block and a height and made sure to use vertical-align:top;
ul{
margin: 5px 10px 5px 20px;
background:green;
height:250px;
}
ul li{
list-style-type:disc;
float:left;
clear:both;
}
ul li a{
background:green;
line-height:1.25em;
overflow: hidden;
display:inline-block;
height:2.25em;
vertical-align:top;
}
Example: http://jsfiddle.net/jasongennaro/gkJAd/6/
Tested and works in Chrome and FF
I played with this a bit, but it basically comes down to that overflow: hidden will hide the list markers as well. Here's what I came up with: http://jsfiddle.net/N3JGg/
Basically used the display type of list-item, then instead of declaring the discs on the outside, pulled them into the box with inside so the overflow wouldn't hide them. It doesn't give you the same, nice line that you had before, but you've got the markers displaying now.
Might be a bit too early in the morning for me but I struggling to figure out what I've done wrong here.
I have a page with 9 boxes and I would like them to be positioned with 3 on one line, 3 on another and 3 on the other.
Have a look here: http://dev.tim-morgan.co.uk/other/Untitled-1.html
Right now you can see, the list bullets are showing and each box looks like it's going down like a staircase since I put in float: left;
Any ideas of what I'm doing wrong?
Thanks
You need to:
Move float: left from ul.tabs2 a to ul.tabs2 li.
Add overflow: hidden to .tabs2 to clear the floats.
Add clear: left to every 3n+1 li using :nth-child, try this:
ul.tabs2 li:nth-child(3n+1) {
clear: left
}
If you need to support Internet Explorer 8 and lower (no nth-child support), you can use http://selectivizr.com/, or just add the clear: left rule yourself to each relevant li.
You might want to remove the default styles on your <li>s, they could be interfering with the floating of the <a>s in the <li>s.
I’d suggest:
ul.tabs2 {
list-style: none;
}
ul.tabs2 li {
margin: 0;
padding: 0;
}
For getting three in a row, #thirydot’s answer looks good. If you know how wide you want each box to be, you could set that width on the <a>s, then set a width on the <ul>:
ul.tabs2 {
width: 300px;
}
ul.tabs2 li a {
width: 100px;
}
In your css add this
ul.tabs2 li {display:block;float:left;width:33%;margin:0 0 10px 0;padding:0;}
and also add overflow:hidden and list-style:none to your ul.tabs2 if you don't want bullets.