I have a two-column-list that looks like this
I need the list items of the second column to always align to the right border of the list but not text-align right, but like this:
so the item with the longest word is actually text-aligned to the right, but the other shorter items start right where the longest item starts. The list css up until now is
ul{
column-count:2;
}
If you're open to using two lists in a parent container you can utilize flexbox. margin-left: auto moves the element to end of container in this case. Be sure to specify the parent's width so it knows what to align to! See https://css-tricks.com/snippets/css/a-guide-to-flexbox/
<div style="width:100%; display: flex; flex-direction: row">
<ul style="">
<li>item</li>
<li>item</li>
<li>item</li>
</ul>
<ul style="margin-left: auto">
<li>item</li>
<li>item</li>
<li>item</li>
</ul>
</div>
Related
This is my first post here, I hope you can help.
I have a nav list that is inside a div with a specific height and width - 900x200.
What I need to do is keep the nav list vertical in the containing div until it reaches the 200 height limit then I need to force the next element in the nav to the right so it looks like columns.
Here's an example of my simple nav html:
<nav id="nav">
<ul>
<li class="parent">
<ul>
<li></li>
<li></li>
<li></li>
</ul>
</li>
<li class="parent">
<ul>
<li></li>
<li></li>
</ul>
</li>
<li class="parent">
<ul>
<li></li>
</ul>
</li>
<li class="parent">
<ul>
<li></li>
<li></li>
</ul>
</li>
</ul>
</nav>
So here, #nav will have a height of 200px. when one li.parent hits the 200px within the div, I need the following li.parent to be forced right and to the top again.
The result might be 3 li.parents stacked in the first column and 2 in the next etc depending on how many children they each contain. Here's a link to a visual example of what I need it to do. Many thanks in advance!
Visual example of what I need
Place your properties for the smaller height inside #media all and (max-height: 200px) { }
Here is an example with your floats. You can drag the middle divider down to pull the output underneath and test the height.
CSS
#media all and (max-height: 200px) {
/* Your properties for a small height */
}
Here is a basic example using CSS columns and #media. You can drag the middle divider down to pull the output underneath and test the height. When the height reaches 200px the CSS columns take over. You of course don't need to use CSS columns, you could layout the lists with floats, inline-block, whatever.
CSS
* {
margin: 0;
padding: 0;
}
nav {
width: 500px;
}
#media all and (max-height: 200px) {
nav {
-moz-column-count: 4;
-moz-column-gap: 20px;
-webkit-column-count: 4;
-webkit-column-gap: 20px;
}
}
HTML
<nav id="nav">
<ul>
<li>Link1</li>
<li>Link1</li>
<li>Link1</li>
</ul>
<ul>
<li>Link2</li>
<li>Link2</li>
</ul>
<ul>
<li>Link3</li>
</ul>
<ul>
<li>Link4</li>
<li>Link4</li>
</ul>
</nav>
I am having this problem with a layout I designed. The part in question is the div id="menu", where I styled
#menu {border-bottom:solid}
The border does not wrap around the nested content (another div and a ul menu), but instead sits above it. The example:
http://jsfiddle.net/Amct3/2/
Clear the float after the "menu"
Add this code
#menu:after {
content:"";
clear: both;
display: table;
}
You need to clear your floats.
Add another div under the container with the style "clear:both"
<div id="menu">
<div class="container">
<ul>
<li>Home</li>
<li>Page 1</li>
<li>Page 2</li>
<li>Page 3</li>
</ul>
</div>
<div style="clear:both;" />
</div>
you could just remove the "float:left" from "#menu ul" and instead give it "height:40px;clear:both;". will fix it.
I'm trying to develop a menu where dynamically some text must have the property vertical-align:super.
It's happening that this item containing "super" text is not vertical aligned with other item.
Here the CSS code:
<style>
#menu{width:300px;height:100px;background:#ABD4E6;}
#menu ul{list-style:none;}
#menu li{float:left;background:#054664;padding:20px;}
</style>
<div id="menu">
<ul>
<li>Home</li>
<li>App<span style="vertical-align: super;">*</span></li>
<li>Contacts</li>
</ul>
</div>
How can I solved the issue?
Many thanks in advance
Elements with float: left behave in such way that they won't position themselves verticaly, no matter what vertical-align would you set to them. All li elements should not have float: left so they would preserve some specific line-height. Then you can position them together with the span, relatively to the line-height. One of the possibilities is to change the #menu li styles to this:
#menu li {
display: inline-block;
vertical-align: top;
background:#054664;
padding:20px;
}
You will also have to remember to change the HTML markup a bit. There must be no white-spaces between each opening and enclosing li tags, like this:
<ul>
<li>
Home
</li><li><!-- HERE: no space -->
App<span style="vertical-align: super;">*</span>
</li><li><!-- HERE: no space also -->
Contacts
</li>
</ul>
Here's an example: http://jsfiddle.net/eLft6/
I've another issues. The text in now vertically aligned but the position changed if I use span with super property or not.
Vertical alignment of this code:
<div id="menu">
<ul>
<li>Home</li>
<li>App<span style="vertical-align: super;">*</span></li>
<li>Test</li>
</ul>
is different from that one:
<div id="menu">
<ul>
<li>Home</li>
<li>App</li>
<li>Test</li>
</ul>
I've tried to modify the line-height using span for all li item, also setting it with different value in case of super usage or not but it doesn't work!
<div id="container">
<div class="category-group">
<h4>title</h4>
<ul>
<li>item</li>
<li>item</li>
</ul>
</div>
<div class="category-group">
<h4>title</h4>
<ul>
<li>item</li>
<li>item</li>
</ul>
</div>
</div>
<style>
.category-group {
display: inline-block;
vertical-align: top;
}
</style>
I want all category-groups to be arranged one after another and fit together in the container. In this case, second category-group would go right under the first category-group, then there would be third on the right of the first and the second and so on.
If I try to give category-group display: inline, all category-groups are then lined in one long column that would break out of the container.
I have faced this problem as well. I ended up using jQuery Masonry to get my div's to stack nicely within a fixed width container.
To my knowledge, there isn't a pure CSS fix that will achieve this effect.
I'll ask the basic question first and then go into excruciating detail as to why I'm asking. I have a bunch of similar floated block elements inside a <div> and I've set overflow:auto on the <div> so that its height expands to properly contain all of the elements inside it.
Is there any way, using CSS and HTML only, to set only the first floated element to the full height of the div?
Just to be clear: I want to grow the contained element to the height of the container, not the other way around.
I tried adding
height: 100%
to the first floated element's CSS, but that has no effect.
On to the excruciating detail. And if a better overall approach comes to mind, which would eliminate this particular problem, I'm all ears.
I'm simulating a table with a bunch of floated <ul> elements inside a <div>. Each list is a column in the "table" and the first list is the row-label column. So, to render the following:
col A col B
row 1 foo baz
row 2 bar bat
I use this markup:
<div>
<ul class='row-label'>
<li> </li> *
<li>row 1</li>
<li>row 2</li>
</ul>
<ul class='data-col'>
<li class='data-header'>col A</li>
<li>foo</li>
<li>bar</li>
</ul>
<ul class='data-col'>
<li class='data-header'>col B</li>
<li>baz</li>
<li>bat</li>
</ul>
</div>
* there's supposed to be a non-breaking space in the first item of the 'row-label' list but I can't get SO to show
Attentive readers may be wondering "Huh? Why not use a real table?" Two answers:
My fake-table approach is much more appropriate, semantically, for my data. The data is more closely related within each "column" than within each "row", but HTML tables assume the opposite. So I would need more complex PHP on the backend to convert the data into HTML tables, and the result wouldn't make as much sense. The "table" here really is more of a visual/presentation effect than anything.
I wanted to leave open the ability to manipulate individual columns in JavaScript (show them and hide them in response to user action, with transition effects). From what I could tell when I was researching it, there's no straightforward way to do this in a standard HTML table -- precisely because the row, not the column, is the basic unit of the HTML table. Please shoot me a counter-example if I'm wrong.
The CSS, simplified, looks like this:
div {
overflow: auto;
}
div ul {
float: left;
list-style-type: none;
padding: 0;
margin: 0 0.5em;
}
A problem arises when a row has more columns than will fit in the width of the browser window. The columns wrap to the next line and I get this sloppy result:
col A col B col C
row 1 foo baz bar
col D col E
zab oof
Ultimately I have a better solution in mind but the simplest immediate fix is to give the row-label column enough height to push those wrapped columns into line. If I do something like this:
ul.row-label {
height: [lots of ems]
}
Then I get this result:
col A col B col C
row 1 foo baz bar
col D col E
zab oof
But since there can be more of these simulated tables below the first one, and since there can be any number of rows in each "table", I can't rely on an absolute height.
Make sure you set display: block on your the LI elements inside of your UL. You should also give your UL display: block, overflow: hidden and height: 100% as well. By default list items are inline-block, which will ignore your height settings.
Here is a proof of concept:
<html>
<head>
<style type="text/css">
* { border: solid 1px black; }
div { overflow: auto; }
div ul
{
display: block;
height: 100%;
overflow: hidden;
float: left;
}
div ul li { display: block; }
</style>
</head>
<body>
<div>
<ul class='row-label'>
<li> </li>
<li>row 1</li>
<li>row 2</li>
</ul>
<ul class='data-col'>
<li class='data-header'>col A</li>
<li>foo</li>
<li>bar</li>
</ul>
<ul class='data-col'>
<li class='data-header'>col B</li>
<li>baz</li>
<li>bat</li>
</ul>
</div>
</body>
</html>
Rendered example http://img526.imageshack.us/img526/9444/tablewithlists.png
Firstly, and as you pointed out, your REALLY SHOULD be using tables for tabular data. You can perform exactly the same manipulations on the elements in a table as you can anywhere else.
I dont know why you would want to do such a crazy thing, but your best bet is to just put the .data-col elements in a separate div, add a left margin, and position them to the left:
EDIT: code added for my sanity
ul, li {
display: block;
margin: 0px;
padding: 0px;
}
ul {
float: left;
margin: 0px 5px;
}
li {
height: 20px;
}
.data-cols {
left: 0px;
margin-left: 50px;
overflow: hidden;
}
<div>
<ul class='row-label'>
<li> </li>
<li>row 1</li>
<li>row 2</li>
</ul>
<div class="data-cols">
<ul class='data-col'>
<li class='data-header'>col A</li>
<li>foo</li>
<li>bar</li>
</ul>
<ul class='data-col'>
<li class='data-header'>col B</li>
<li>baz</li>
<li>bat</li>
</ul>
</div>
</div>
May be this would help with ideas? I just found this css framework myself:
http://www.blueprintcss.org/