I would like to centrally align a multiple-row list within a div:
http://jsfiddle.net/8Wu2S/
In this example I have set a fixed width on the ul to demonstrate what I want to achieve. However, I need the width of the ul to be dynamic, so that it just contains the list items (which are fixed width), i.e. shrink to fit. Each row of list items should start from the left and fit as many items as it can before flowing onto a new line.
The div is variable width, so for example, if the div was a little wider it would look like this:
http://jsfiddle.net/8Wu2S/1/
I've tried all sorts, but it seems to be a lot more difficult than I had thought!
ul {
background-color: red;
width: 80%;
margin: 0 auto;
}
li {
display: inline-block;
width: 49%;
border: 1px solid black;
}
I used 49% but you could use CSS box-sizing: border-box to avoid that and use a solid 50%.
Set the ul and li elements to display inline.
<div style="width:20%;">
<ul style="display:inline;">
<li style="display:inline;">Foo</li>
<li style="display:inline;">bar</li>
</ul>
</div>
jsFiddle example: http://jsfiddle.net/QcNTW/4/
I managed to find essentially the same problem:
CSS - how to make DIV with wrapped floats inside only be as large as it needs to be to hold the floats?
It turns out there is no nice solution. One way is using media queries to set the width of the ul. The other way is using a jQuery plugin like Masonry.
I was probably going to use Masonry on my site anyway, so I think I'll go down this route, with non-javascript users falling back to a non-centered layout.
Related
Problem
I have a header with the basic HTML structure
<div id="header">
<div id="logo"></div>
<div id="navigation"></div>
<div id="userInfo"></div>
<div class="headRight"></div>
<div id="callCenter" class="headRight"></div>
</div>
I cannot change the HTML. Currently it is laid out with floats, and navigation was aligned to the bottom of the header using padding-top. However, it only works when userInfo is 2 lines, and it can be 3 or 4.
What I need to do
Using only CSS, align navigation to the bottom for all nav heights while maintaining the original layout.
What I've tried
Half a dozen stack overflow solutions including the classics position:absolute and vertical-align:bottom on parent. (The former breaks the document flow, and the latter seems not to work because other elements get in the way.)
The fiddle
Cleaned fiddle best I could, but inspect will probably still be easiest.
https://jsfiddle.net/ohrhe4u5/1/
Notes:
The tabs should just touch the bottom of the header.
callCenter is misaligned in this example as well, but you can ignore. It's much lower priority.
New fiddle
I changed header, logo, and navigation to display:inline-block, allowed userInfo to float right, gave the nave extra height to make sure there's always room, and absolute positioned the headRight items.
That leaves me with this. A little janky due to the absolute positioning and forcing the nav height larger. Any better ideas?
https://jsfiddle.net/ohrhe4u5/2/
I generally dislike float for positioning where i can help it (this is a personal preference because i find it sometimes painfully unpredictable), as such, using a combination of position:absolute, min-height and margin i believe i have recreated what you're after.
Basically this solution works by position:absolute'ing the elements that we have some idea of consistent sizes of (the logo and the navigation), then have the header element take its height from the user data and links on the right. We add a min-height to the header element though so that should the user data be reduced to 2 lines, the height is still enough to accommodate the absolutely positioned elements (given they no longer affect the height of the header element by being absolute).
JSFIDDLE
CSS
/* new parts of the css */
#header {
min-height:112px; /* in case user data is made smaller */
padding:10px 10px 0 20px;
position:relative;
}
#logo {
width: 210px;
position:absolute;
top:50%;
width:210px;
height:62px;
left:20px;
margin-top:-32px;
z-index:1; /* bring logo above the user data */
}
#navigation {
position:absolute;
bottom:0;
left:210px;
font-size: 20px;
height: 40px;
z-index: 1; /* bring navigation above the user data*/
}
#userInfo table{
margin:0 0 0 auto;
}
.headRight{
text-align: right;
padding-bottom: 0.2em;
}
I am trying to create this effect by using HTML in UIWebView control of iOS. The goal is to create the effect of progress bar on the listing. So far I tried this but as you see, by adding a padding on diV makes everything messed up. How can I achieve similar effect? I have no issue of using table but seems that would be more difficult.
Thanks
Why not just use nested divs and give the inner Div a percentage width.
<div><div class="inner"></div></div>
And CSS:
div {
background-color: blue;
height: 30px;
}
.inner {
width: 50%;
background-color: skyblue;
}
Since divs are block level element they have a 100% width by default so you don't need to explicitly specify it for the outer div if that is sufficient.
Another possibility would be to use a background gradient and just move alter the background-position.
In the code you supplied you have this div:
<div style='position:absolute;left:0%; background-color: hsl(30,100%,59%);width:30%;z-index:10;'> </div>
Just add "top: 0px;" to it so that it becomes
<div style='position:absolute;left:0%; top: 0px; background-color: hsl(30,100%,59%);width:30%;z-index:10;'> </div>
And it will look correct.
Edit: And then give the LI elements position: relative to make it work with multiple elements. See http://jsfiddle.net/tFn78/9
Another version which is a bit cleaner: http://jsfiddle.net/v7zNn/ and adjusts to variable height of the title.
It's amazing how can't I just pull out such a simple task.
We wish to have a menu (ul list) displayed inline, where, on top we have an image and, at the bottom, we have an anchor.
Something like the above:
<iimg> <iimg> <iimg>
<anchor> <anchor> <anchor>
The solution must be valid for IE 7 too.
I've tried text-align centered the image. No luck;
I've tried display:block; on the li, on -img on both...
I've also defined widths here and there (but the images could have variable widths (not sure));
I've tried margin: 0 auto; but it centers on the page, but not on the LI. :///
Can I have a help here plz ?
http://jsfiddle.net/4E7Lu/
ul li {
display: block;
float: left;
text-align: center;
}
Just be sure to do a clearfix after the ul. As in:
<div style="clear: both;"></div>
If you make the ul display as inline-block, and set the anchor and image to display as block, you can center them via margin: 0 auto;.
http://jsfiddle.net/4E7Lu/1/
I would apply the image as a background image to each li element. It's easy to position using background-position and keeps your HTML markup clean for SEO. You can then use CSS sprites to make loading the images faster.
Just saw this, could help.
http://css.maxdesign.com.au/listamatic/horizontal01.htm
I'm making a menu. Looks something like thing:
<div>
<ul>
<li><a>menu/<br/>item</a></li>
</ul>
</div>
I want to center the text vertically. I usually go with
ul li { height: 50px; line-height: 50px; }
for example. But obviously this does not work since it is a tag in the menu. I need the text to look like
menu/
item
in the menu. Any ideas how to solve this? Thanks!
You could just set a smaller line height and equal padding top and bottom, like so:
ul li {
padding: 20px 0;
line-height: 14px;
}
This method assumes each item list contains two lines of text for them all to be equal height.
It would look something like this - http://jsfiddle.net/ajcw/fVamh/
Vertical Align is only supported in table cells. You can either adjust your padding to move the text around (will only work for your particular font size and if that changes you will have to re-adjust your padding), or as Dan Andrews mentioned above, you can use display: table-cell, however, this is only supported by the newer browsers, so depending on your audience, it may not be a viable solution.
For table-cell support, see QuirksMode.com
This might be a very simple question, but I can't get it working.
All I want is to have 2 boxes (left and right), both should take 50% of the space and they should show up next to each other.
My current css looks like this:
#left {
text-align: right;
width: 50%;
padding-right: 10%;
float: left;
}
#right {
width: 50%;
text-align: left;
padding-left: 10%;
}
#footer {
clear: both;
}
The HTML looks like this:
<div id='left'>
<h1>Left</h1>
<ul>
<li>Some Listing</li>
</ul>
</div>
<div id='right'>
<h1>Stuff</h1>
<p>
Stuff right
</p>
</div>
<div id='footer'>
</div>
As I said, it isn't working. But I think it should be clear what it should do.
You have to take the padding and margins into account. Putting 50% on each <div> while specifying any padding other than 0, will cause the <div> to wrap. Try removing the padding on the <div>, or reducing the width from 50% to, say, 45% and see what it looks like.
There are 2 things I needed to do to make it work:
1) The width + padding of each div must only add up to 50%. Otherwise, in your original code, they add up to 60%, and both add up to 120%, and they can't fit in the 100% width of the body.
2) I have to also float the second div to the left, or make both div overflow: hidden
(i am still looking into why step 2 is needed)
A full style reset will make sure you avoid falling foul of anything that XSaint mentioned. Margins, Borders and padding will affect this.
So you should make sure that these elements have:
div {
margin: 0;
padding: 0;
border: 0;
}
If you wish to have padding and borders, be sure to reduce the width of the elements accordingly.
One document worth referencing is the box model, that picture is worth 1000 words:
http://www.w3.org/TR/CSS2/box.html
In the note below that diagram, it states that the width affects the width of the content box, not the padded, bordered or margined box. That is the box inside all the others.
you may either do what XSaint32 has suggested or remove the padding from the #left div and put another div #context with the padding inside the #left div. i.e)
Xsaint and Danny Staple gave the best answers so far.
Just complementing their answers, you can also use a property named "box-sizing" in order to ensure correct calculations.
I even recommend adding this property to your (and everybody else) CSS reset, hence Webkit, IE, Opera and Mozilla tends to use different box models.