My chrome is the latest 31.0.1650.48 version.
Today I just notice that the float:left seems not working properly. (IE & FF are fine and Chrome used to be fine as well.)
Html is like:
<div class="listWrapper collapsed clearfix">
<ul>
<li></li>
<li></li>
<li></li>
</ul>
<div class="ui-checkbox" role="checkbox" tabindex="0" style="display:inline-block;"></div>
</div>
Css is like:
.ui-checkbox {
background: url("../images/elements/form.png") no-repeat -183px -331px;
width: 37px;
height: 31px;
float: left;
}
What happened now is the inner checkbox div cannot float next to ul & li at very beginning. But if I right-click on that div --> Inspect Element --> Untick 'float: left' and then re-tick it on, it becomes correct.
Who has any idea about this?
ADD:
ul is float:left and each li actually has 1 background image and float:left as well. In that case, 3 (li) images show together in 1 line, and next div (checkbox shape) should display in the same line. But now div display to next line unless I untick & re-tick its float:left css.
ADD AGAIN
Please see the screen shots for 2 result:
The WHOLE div is float:right, and inner ul,li and div are float left. But the green "checkbox like" div at very beginning display under all these li. When I untick and re-tick float:left, it becomes OK.
Thanks!
Check whether you have given an explicit width to <ul>. And check whether your <ul> 's and the checkbox div 's widths' addition are less than or equal to the width of div listWrapper collapsed. If there is no width to the mother div then it is ok and try this
.ui-checkbox {
background-color:green;
width: 37px;
height: 31px;
float: left;
}
ul{
float: left;
width:50px;
}
Check this Fiddle
Or the update Fiddle.
Not sure why you're getting different results from different browsers, but you need to float the ul element as well to position the checkbox alongside it. Also, as someone mentioned in your post comments, you have an inline style changing the display property to inline-block, which obviously negates the float property.
Here's a codepen. I replaced the background image url with a color just to show the behavior.
.ui-checkbox {
background: url("../images/elements/form.png") no-repeat -183px -331px;
width: 37px;
height: 31px;
float: left;
display:inline-block
}
Related
I am building a navigation bar using <nav> and I am aligning the text to the right but I want to get the logo in the navbar to be on the left I have tried many ways to move it like giving it a id and using !important but it still wont move
Here is my relevant HTML
<div id="navDiv">
<nav>
Name
Home
About
Contact
</nav>
</div>
And here is my CSS
#logo
{
text-align:left !important;
}
nav
{
text-align:right;
}
Why is the logo element still on the right when !important is telling it to go to the left and how can I fix this?
add float:left;
#logo
{
float:left;
}
nav
{
text-align:right;
}
Live demo: JSFiddle
If I understand you correctly, you want to the "Name" to appear to the left while everything else is to the right? So, like this: http://jsbin.com/gejefiji/1/edit
The only thing I did there is add a float: left; to the #logo selector.
The reason the nav rule overrides the #logo rule even with the !important is due to nesting. The nav itself is a block element, meaning it expands to fill its container. The a tags are not block elements, they are inline, meaning they follow the alignment rules for the containing element, which means they get text-aligned right. If you inspect the elements in the layout section of your browser's development tools, you can see that the width of the a elements shrinks-to-fit the content, like so:
The text inside the a#logo is left-aligned, but the elements themselves are right-aligned, so it appears to not follow what you want.
If you do use the float: left, I strongly recommend you look into adding where and when to use a clear: left element after your nav, just to prevent any float properties form interfering with the rest of the page's layout. Emre's nav:after trick is handy, but is not supported on all browsers, so you might need a separate element with a specific class assigned to it, like this:
// CSS
.clear {
clear: left;
}
// HTML
</nav> <!-- after the nav -->
</div> <!-- or after the div -->
<div class="clear"></div>
Basically, you want to put the clear before anything else that you don't want floated.
The text-align property can only be applied to box-level item that contains items to be aliged either left or right -- not on the items themselves. So you can't have some items inside nav text-aligned left and some text-aligned right this way.
You can, however, float the logo left:
#logo{float:left;}
here it is :) that should work well [tested]
<style>
nav
{
text-align:right;
}
#logo
{
float:left;
}
nav:after { /* fix float */
visibility: hidden;
display: block;
font-size: 0;
content: " ";
clear: both;
height: 0;
}
</style>
<div id="navDiv">
<nav>
Name
Home
About
Contact
</nav>
</div>
Why you do not use float?
#logo {
float:left;
}
friends,
I decided to ask this because I've seen many answers on the internet, but no one seems to be a definitive answer.
In out HTML documents we have many elements one inside another. Eventually we'll want to add paddings and margins to these elements.
So, what if we want to have all content horizontally aligned to the center of the page? If the content has 1000px of width and the screen resolution will change from device to device, the most common solution is something like (will work on netscape based browsers):
body{
width: 100%;
}
#content{
width: 1000px;
margin: 0 auto;
}
But if we have lots of other elements inside the #content element, like a table made of DIV elements, we start to face some problems. The parent's height will not adjust to its children's height and padding and margin will not work properly (if we inspect the element we will see that the width and height is not behaving as expected) unless we add some new rules.
I use float: left but then the headache starts! When I add float: left only those elements will work fine, but the parents will not. If I add float: left to an element that already has margin: 0 auto set, it will no longer be aligned to the center of the page...
I've seen some solutions using text-align: center to the parent and display: inline-block; float: none; to the element we want to be aligned to the center. But it also has many problems (for example, we can't set the float rule)
How do you deal with this problem guys?
You need to use clear after you use float on elements in order to 'clear the floats' and make the height propagate up to its parents. You can use clear:left (or right) to just clear float:left elements but typically it's fine to just use clear:both.
In the below example there are two versions of clearfixes, one that uses a pseudo-element on the container and another that is just another element.
Demo
HTML
<div id="content">
<nav>
<ul>
<li>Home</li>
<li>Second</li>
<li>Third</li>
</ul>
</nav>
<div class="float-me">Test1</div>
<div class="float-me">Test2</div>
<div class="clear"></div>
</div>
CSS
#content {
width: 500px;
margin: 0 auto;
}
li {
float:left;
}
/* our pseudo-element clearfix */
ul:after {
display: block;
content: "";
clear: both;
}
.float-me {
float:left;
}
.clear {
clear:both;
}
In this gallery the last image should float to the left but it is positioned in the middle. Whats wrong with the code?
This is the whole code CSS.
This is the whole code HTML.
HTML:
<div class="text-block7" >
<img src="gal/thumb/60.png" alt="">
</div>
CSS:
#rightcolumn-12 .text-block7 { width: 239px; height: 190px; display: block; float: left; margin-top: 0px; margin-bottom: 15px;}
Before the 7th div block add:
<div style="clear:left"></div>
this happens because your 4th image is higher, so the 7th image when is floating to the left is slamming against that element.
to prevent this kind of behaviour just define a css rule that applies a clear:left on every 3n + 1 div involved: e.g.
div[class^="text-block"]:nth-child(3n + 1) {
clear: left;
}
Note: the nth-child pseudoclass unfortunately doesn't work on IE8, but if you need to absolutely support that browser you may simply use display: inline-block and vertical-align: top instead of floating elements
I have a list of names which is rendered inside <ul>. I am applied some CSS code but facing some browser specific issues.
Chrome : List element is getting displaced by 1 row.
Firefox : All list items collapsing to one item.
Code snippet (JS bin editor)
HTML
<div id='container'>
<ul class='list'>
<li> <div class='rel'>
<div class='abs'> item 1 </div>
</div> </li>
... More items similar to above one
Css
#container {
height: 100px;
overflow-y:scroll;
width: 200px
}
.list {
background-color: skyblue;
}
.rel {
position: relative;
}
div.abs {
position: absolute;
left: 20px;
}
I want to know the reason of this misbehavior in both the browsers. Have I written wrong CSS ?
Update: With in <div class='abs'> I have a lot of code which I have not added here as it is not necessary and the content of abs div is positioned with respect to its parent i.e. <div class='rel'>
The problem is indeed the
div.abs {
position: absolute;
left: 20px;
}
This positions every element with class "abs" 20px to the left (and 0px from top) of the ul element.
What would you like to achieve? Your menu horizontally or vertically?
Horizontally: Use float:left or display:inline with a margin-left:20px;
Vertically: for a 20px margin-left:
http://jsbin.com/ediloh/17/edit
I first added margin:0px to delete the top and bottom margin of the ul element. Next I added a left margin of 20px to move it to the right.
alternative: put margin-left on the li-element instead. This will not move the circles
The divs with position:absolute are taken out of the page flow, basically causing their parent divs to have no content at all (no content amounting to any width or height that is). So they will collapse.
What outcome do you actually want. You are fixing the div.abs to be indented by 20px inside its containing div.rel.
Could you give some idea of what you are trying to achieve.
Wing
I have a div called NAV and inside of NAV I have an UL with 5 li which I float to the left, the li's that is but when I do that the NAV collapses. I know this because I put a border around NAV to see if it collapses and it does. Here is the example.
collapsed http://img401.imageshack.us/img401/8867/collapsedze4.png
no collapsed http://img71.imageshack.us/img71/879/nocollapsedkx7.png
as you can see in the first image, the links in the NAV div are floated left and that
black border ontop is the actual div called NAV.
in this image you can see how it has top and bottom border and it not collapsed.
here is some of the html and css I used.
alt text http://img301.imageshack.us/img301/5514/codejc8.png
#nav #ulListNavi a {
float: left;
}
Add any overflow value other than visible to your container:
div#nav { overflow:auto; }
Then add width to restore the width
div#nav { width: 100%; overflow:auto; }
One solution is to add a "clear:both" style to an element after the last floated anchor, for instance:
<div id="nav">
<ul id="ulListNavi">
<li>Home</li>
<li>Search</li>
<li>Flowers</li>
<li>My Account</li>
<li>Contact Us</li>
</ul>
<div style="clear:both;"></div>
</div>
This causes the containing element to clear all floating elements before closing the containing box.
A few other options for clearing floats here:
http://www.quirksmode.org/css/clearing.html
http://www.sitepoint.com/blogs/2005/02/26/simple-clearing-of-floats/
As to the best way of doing it, that's almost a holy war, the purists would freak about the extra div, if you are not fussed by a little extra markup, the addition of the cleared div as suggested by Joshua and AJ will work fine, and is a reliable technique, but there are at least 17 other ways of doing it...
add this code after your ul:
<div style="clear: both"></div>
Try floating the containing element to the left too.
Don't bother with clearing elements or overflow. Add this:
#nav {
float: left;
}
When you float the LI's, the #nav no longer "contains" anything so it collapses. But if the #nav is floated also, it contains anything floated inside it, so it expands again.
(Also consider removing the #nav div and just applying the same styles to the UL.)
Your problem is because you are floating the <A> elements, but each of them is inside an <LI> element. LIs display as blocks by default, so each <LI> is forcing it's child <A> to begin on a new line.
If you float the <LI>s, I think you'll solve your problem.
#nav #ulListNavi li {
float: left;
}
The quickest solution would be to add overflow:hidden to clear the float on the parent element:
#nav{overflow:hidden;}
Without changing your HTML:
#nav
{
width: 100%;
overflow: auto;
border: solid 1px red;
}
#ulListNavi
{
margin: 0;
padding: 0;
list-style: none;
}
#nav #ulListNavi li
{
float: left;
}
#nav #ulListNavi li a
{
margin-left: 5px;
}
Works in IE8 and FF 3.5