I have ul where li elements are floating left. I want to align those li elements to center of ul.
Goal:
======>>>
My try:
My try always result this
Jsbin:
http://jsbin.com/EGoVAg/19/edit
EDIT:
width of #wrapper is not fixed ! I use 320px just to show you result pictures !
Firstly, remove the float: left; from .widgetPhotoGallery li.photo. display: inline-block (which is already included) is all you need to correctly position the elements:
.widgetPhotoGallery li.photo{
background-color: blue;
padding: 0;
margin: 0;
position: relative;
display: inline-block;
}
Then all you need to do is simply give your ul some padding (36px evens out both sides):
.widgetPhotoGallery .photogallery{
background-color: lime;
list-style: none;
padding:0 36px;
margin: 0 auto;
text-align: left;
}
Working JSBin demo.
On a side note, you don't need any of those !important declarations. The styling is identical without them. If you need to override existing styling you should look into CSS Specificity instead.
Your only option is to set a fixed width and do:
#wrapper {
display: block;
margin: 0 auto; /* center it */
width: XXX;
}
You can use media queries to set the fixed width at certain breakpoints, if you like, or you could use max-width instead of width
http://jsbin.com/EGoVAg/23/edit
You may not like this answer (judging by your large font, bolded comment about #wrapper not being a fixed width), but there is no other way to achieve what you want.
You have to set a fixed width to the ul. So in your example, each li has 118px of width and 2px of margin on each side. To fit two li's in a row set this to .widgetPhotoGallery .photogallery:
width: 244px;
Notice that the background will become smaller, so you can simply put it to .widgetPhotoGallery .widgetContent
.widgetPhotoGallery .widgetContent {
background-color: lime;
}
Here's the update JSbin.
Related
So I used the example given by by w3schools to create a div with a list in it.
http://jsfiddle.net/TBsx8/
#links li {
height: 32px;
width: 100%;
display: block;
margin: 0;
background-repeat: no-repeat;
list-style: none;
}
is the relevant part.
You can see that everything works fine (I took a random twitter icon for all of them in this example)
Problem is, I want them inline. So, I change it to display: inline;. no problem, right? nope, it makes eveything disappear. inline-block does not do anything either. any solutions?
Edit: sorry, did not make this clear: I want the links horizontally.
inline-block works just fine. You've got your wrapper DIV fixed to 4em in height though. So it gets cutoff:
Fiddle with inline-block and fixed height commented out:
http://jsfiddle.net/TBsx8/2/
For horizontal layout set width of LIs: (width:100% causes the LI to consume all horizontal space available)
#links li {
height: 32px;
width: 32px; /* <<----- */
display: inline-block;
margin: 0;
background-repeat: no-repeat;
list-style: none;
}
http://jsfiddle.net/TBsx8/8/
Add float:left and width:32px, this will work
You can set the width to 32px and display to inline-block and it should work. Right now you have the width at 100% which will fill in container.
the width of your li's should not be 100%, try an exact width.
code block using 20% width that works:
#links li {
height: 32px;
width: 20%;
display: inline-block;
margin: 0;
background-repeat: no-repeat;
list-style: none;
}
As an adjunct to the calls for you to use display:inline-block;width:32px, it's worth saying that the reason for this is that you can't apply a width to any element that is displayed inline. Ever.
Alternatively you could use display:block;width:32px;float:left on the li, and overflow:hidden or a clearfix on the containing ul/ol/dl to prevent the margins from collapsing due to the floats
I cant figure out why my list is not vertically aligned. I set ul and li to be 100% height of parent, but it seems to be only 100% of itself.
I dont want to use any margin or padding to make them vertically aligned. How can I force it to be 100% of parent so it would be vertically in the middle?
http://jsfiddle.net/qS5A6/
#nav li a{
color: #fff;
text-decoration: none;
font-size: 18px;
padding: 15px 20px;
line-height:90px; //add this
}
defining your height relative to the parten usually just works with elements that have position:absolute. The reason is, that the height of surrounding elements is usually determined by their children. If you make the childrens height relative to the parent you have an endless loop :)
So using this code would make your li have 100% height but the height of your #nav won't change anymore with increasing length of the ul.
http://jsfiddle.net/qS5A6/5/
Using display: table instead of your inline-block approach would keep that functionality
http://jsfiddle.net/qS5A6/6/
Maybe you can use table-cell for li:
#nav ul{
display: table;
height: 90px;
}
#nav li{
display: table-cell;
height: 100%;
vertical-align: middle;
}
this works fine for ie8+
if you use:
#nav li a{
line-height:90px;
}
there is some problem, you can't have more, than one line in the tag
I have a container div and 5 child div's with
{display: inline-block}
so they appear next to each other. Each of the child div's have a height of 20px, but the container grows to a height of 24px. Why does this happen?
Fiddle: http://jsfiddle.net/VHkNx/
Inline block elements still take care of the line-height/font-size. So adding this:
line-height: 0;
to #container will fix it.
Demo
Try before buy
Once you're using the inline-block display, your elements behaves similarly to words and letters. Whitespaces and line heights are rendered as well and it might cause some unexpected results.
One way of solving this is to give the container font-size: 0 setting (of course you can still give the child elements themselves their own font size).
jsFiddle Demo
P.S - line-height: 0 will also work.
One simple way of fixing this is to add vertical-align: top to the child elements:
.thing {
vertical-align: top;
display: inline-block;
background-color: Red;
height: 20px;
width: 18%;
margin-left: 1.25%;
margin-right: 1.25%;
}
This way, you don't need to adjust line heights or font sizes.
As noted earlier, a similar layout can be realized using floats. Both approaches are valid.
See demo at: http://jsfiddle.net/audetwebdesign/74Y2V/
Inline-block elements are placed as block on the base line of a text line, as they are inline elements, so it's the space from the base line to the bottom of the text line that takes up space.
You can use floating elements instead of inline elements:
#container {
background-color: Green;
width: 500px;
overflow: hidden;
}
.thing {
float: left;
background-color: Red;
height: 20px;
width: 18%;
margin-left: 1.25%;
margin-right: 1.25%;
}
#first {margin-left: 0px;}
#last {margin-right: 0px;}
Demo: http://jsfiddle.net/VHkNx/2/
Easiest way is not to give them display: inline-block, but use float: left; . All elements will float next to each other. Good luck!
I have a sidebar with a set width and height. The problem is, it's supposed to be on the right but it takes up space on the left too like a block. However, I've set the display to inline but that doesn't seem to fix the problem. How can I make the div take up no space on the left?
Part of the CSS:
div#sidebar {
float: right;
width: 256px;
height: 500px;
display: inline;
clear: none;
}
JSFiddle for the whole page: http://www.jsfiddle.net/9tW2U
The width of either #sidebar or #mainbox is 3px to big to fit next to each other in #page. Take 3px of the width of #sidebar or #mainbox and it will fit.
By the way, display: inline doesn't have anything to do with it because you are allready using floats.
I have a container that contains:
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
As in here: http://sneakyrascal.com/gmat/conv/select-plan.html
And the CSS for the <li> is set to the left so they can be in one line. If I remove one <li> then it will add an empty space to the right. like this one: http://sneakyrascal.com/gmat/conv/select-plan-2.html
When I remove a <li> I want the other ones to be centered rather than being floated to the left. But I can't remove the float:left now that they need to be in one order. How can I get around it? I tried margin: auto; for <ul> but it didn't work.
If you're absolutely constrained to using floats to achieve this, then you'll need some way to compute what the width of the container should be given the number of elements, and somehow apply it to the container directly. Then margin:auto should work fine.
Why? Because when you float the items, the container no longer uses them to calculate its width.
As is, it appears you are applying width: 1050px directly to the container. You might want to remove this style declaration from the stylesheet, and then (if you can) dynamically insert a class-name like columns-4 or columns-5 (depending on the count) to the container, then style each class with the appropriate width.
If, however, you can use other layout methods, then you have a couple of better options:
Apply display:inline-block on the lis, like here: http://jsfiddle.net/HPeAK/
Notes:
1) ie6 won't apply display:inline-block to elements that are native blocks, like <li>, so if IE6 support is essential (yuck!), you would need to have a span inside that item and apply display:inline-block there.
2) inline-block will introduce white-spaces where they exist in the source because they are treated as inline elements.
OR:
Apply display:table on the container or ul, and display:table-cell on the <li>s, like here: http://jsfiddle.net/3efZJ/
I found that if you set your UL to have display: table, margin: 0 auto will work on that and centre it. The alternative is set the UL to display: inline-block and use text-align: center on the container div to position it. With both of these though you are going to see problems with IE7 and below. It doesn't support display: table outright and display: inline-block only works on elements which are naturally inline, of which UL isn't.
Make your container overflow: hidden:
.select-plan #container {
float: left;
margin: 0 auto 40px;
overflow: hidden;
width: 1050px;
}
Set the list as having float: left; left: 50%; position: relative; margin: 0 auto like so:
.select-plan #container ul {
float: left;
left: 50%;
margin: 0 auto;
position: relative;
list-style-type: none;
}
Give your list items right: 50% like so
.select-plan #container ul li {
background: none repeat scroll 0 0 #FFFFFF;
border: 1px solid #DBDBDB;
border-radius: 5px 5px 5px 5px;
box-shadow: 0 1px 1px #666666;
float: left;
height: 418px;
margin-right: 10px;
overflow: hidden;
position: relative;
width: 187px;
right: 50%;
}
This hack should work. It isn't ideal but hey, it's better than nothing.
you cannot use auomatic left/right margin if you don't give a value to the width of ul.
If you generate this page with a programming language, you can calculate the width of the UL element having fixed with of LI elements.
So for the second example you can set a width of 796px for UL element obtaining the effect you need.
As i can see in your css you are forcing elements to stay in different positions.
eg. #margin-top: -106px; in footer
This may lead to different appearances in different browsers. Moreover elements are overflowing.
eg. elements inside#wrapdiv.
you can add overflow: hidden; to fix that. Use firebug and hover over your page and try to fix the css issues first.
.select-plan #container ul {
margin-left: 9em;
}
It's not dynamic but it will center 4 containers.