<div style="background-color:red;width: 300px;">
<div style="float:left;border:1px solid yellow;">AAA AAA AAA</div>
<div style="float:left;border:1px solid green;">BBB BBB BBB</div>
<div style="clear:both;"></div>
</div>
Pasting the above HTML here: http://htmledit.squarefree.com/
And then zoom out in Chrome, you will see that <div> B will eventually be forced down to the next row. If you do the same thing in Firefox and IE, both <div> A and B will stay on the same row.
Adding a height attribute on the parent <div> may help, but if the height of the content is not known beforehand, this will not be feasible.
I would like to know how this problem can be fixed in Chrome.
Many thanks to you all.
EDIT: uploaded a screenshot here: http://img52.imageshack.us/i/screenshot1xd.jpg/
On your first div, add this:
<div style="background-color:red;width: 300px; white-space:nowrap;">
See if that helps.
I can't reproduce this either, but it seems that you are only zooming the text and I can't find this as an option in Chrome right now.
However you should keep in mind, that this is something that always can happen in any browser, if the user somehow overrides the font-site you specified. There is not much you can do other than keep your layout flexible enough to handle it. For example, in this case don't set the width of the surrounding element in pixels, but in ems so that it is relative to the font-size.
There may be other solutions, such as using other methods of placing elements beside each other, but that would require that you give a more concrete example of what you are trying to achieve, especially explaining you don't want the elements to wrap.
Works just fine on my Chrome 5.
What I could suggest to you is to specify the width on the parent div in "em" instead.. Though it seems that your particular version of chrome had a bug, which has already been fixed :)
Another solution is to set nowrap, as proposed by #Kyle and instead of setting static width - set the min-width. This way the div will expand, instead of having the children wrap to the second line ^_^
try using the max-width attribute!
Related
http://jsfiddle.net/sBKk4/
I'm using Twitter Bootstrap and have built the page and everything looks correct in Chrome. But the bottom div which the code is provided above, when viewed in Safari is not center aligned.
--UPDATE--
Ok, I think ive narrowed it down to the width css property with is different from Chrome to Safari for some reason?
Ive wrapped the whole thing in a div called paraWrapper.
http://jsfiddle.net/sBKk4/
The above code will display fine in Chrome but be out of place on Safari..
If I change the width however to something like 720px then it'll look fine in Safari but be out of place in Chrome..
So I guess my question at this point is. Does anyone know why this difference would be?
I guess I can get around this by using CSS hacks but if I can fix my code for a more permanent fix that that would be great!
when you are using rows, you should use this:
<div class="row">
<div class="span4">...</div>
<div class="span8">...</div>
</div>
remember to use a div with class row, and in there divs with spanX classes, where this Xs of all spans sums 12
and don't use the center attribute. Bootstrap makes that for you. Look at the code from this examples
If you having a compatibly issue, be sure to specify your margin and padding of your div's, even if it's 0.
padding: 0;
margin: 0;
I'm trying to make a HTML "showcase". I am thinking of using elements like this:
<div id="index-showcase-tabs">
<div id="index-showcase-tabslide">
<div class="index-showcase-tab" id="showcase-tab-1">Item1</div>
<div class="index-showcase-tab" id="showcase-tab-2">Item2</div>
...
<div class="index-showcase-tab" id="showcase-tab-N">ItemN</div>
</div>
</div>
The showcase items are floated left, and I don't know their precise width, nor the number of them.
Problem is: if the combined width of the items is bigger than the container (index-showcase-tabs), I don't want them to break line (which they do by default). I want them in one line, and I want to hide the overflow and then let the user scroll them with javascript (not by scrollbar...).
How would I do that?
PS: There's not much css for the items yet. I only gave the slider a specific heigth:
#index-showcase-tabslide
{
height: 34px;
}
Edit: Here you can see my problem.
Edit2: explaining more with a fiddle: http://jsfiddle.net/TbSfj/19/
For this, you cannot use float: left. Instead use display: inline - this will have the same effect for what you want to accomplish, and it will not be constrained to the parent div in the DOM model.
check out this sexy control:
http://jsfiddle.net/SoonDead/U6QdQ/20/
this way made for my project, but I think it does what you want.
The tricks are:
Because you use a lot of characters that can "linebreak" and even forcefully disable linebreaks have different results in 1-2 browsers, I would recommend against it.
Instead make the overflowing width wide enough to hold all the elements easily, so if javascript is disabled it will not look ugly.
(I know that you are fine with jquery, so I use it within the example, also the outerWidth property in simple js has bugs in webkit (tends to be 0 in some cases).)
So you need to sum up the elements' outerWidth() and set the content holder's width, so you can use scrollLeft, and not overscroll.
There is no other trick, just a scrollTo function because calculating positions are not that trivial if you are new to jquery and you might want to use that.
Sorry, I don't have the exact code with me, but hopefully this works with the example I provide.
Why is it that in IE, some nested divs pop out and sit in the wrong place (example, 200px down from where it should be).
<div style="width:1024px;height:103px;background-color:green;">
<div style="float:left;width:300px;height:103px;"><img src="LOGO URL"/>
</div>
<div style="float:right;width:180px;height:103px;">
</div>
</div>
Does anyone understand what I mean? I'm pretty sure it has nothing to do with double margins. Should I still bother making website compatible with IE7 and 6?
I'm trying to learn html the proper way. I want to be able to ensure my code is always compatible with all browsers and accessible to the disabled. Is there somewhere you would recommend that I can learn the "correct" practices? I understand most HTML, but compatibility can have issues.
Does it work the same in a modern browser? Parent elements are never to expand to contain floated elements. To do what you want, you either need to float the parent or give it an 'overflow:auto' CSS property. But fixing the height of the parent div to 103px will still restrict things.
Your IE problem is most likely because float:right element is appeared after it's siblings. (see number 3 below).
Speaking about how to learn HTML and CSS best practices, I would recommend playing around with CSS Zen garden to see how different amazing designs are built using a "static" html.
Looking at the HTML I see following issues:
Specifying static width and height is not a good idea
float right element should appear before any other sibling (otherwise IE can not render it properly) - (this is most likely the issue).
Having float:left for the other element is not necessary
adding a clear:both in the end of all siblings will ensure that parent will expand in height (without the need to specify height)
so I would change your HTML to this:
<div>
<div style="float:right;"></div>
<div><img src="LOGO URL"/></div>
<div style="clear:both"></div>
</div>
I have a div called #background. I have most of my content in it and I want it to resize when I add more content. As far as I know the way to do this is to assign it no height?
I have done this in my layout.css file.
As far as I can see, my #background doesnt close until after the last bit of content which is what I want, but it's not working. It seems to be just stopping after my #special offers div, I#m not sure why this is?
Colm
I didn't find any background div but a backdrop one..
I guess this is the one you are talking about. You should assign "overflow: auto;" to it.
Also make sure none of its content elements are not floated, and if there are (or better yet in any case) just put a <div style="clear:both;"></div> just before you end the #background div.
When I specify a height in the style for any element inside of this, IE makes the entire thing 100% width, rather than keeping it "autosized" for width.
Other browsers display it fine, but not IE. How do I fix this?
<div style="position:absolute;top:50px;left:50px;background:green;">
<div>
<div>test</div>
<div style="height: 20px;">this makes it 100% width in IE. why?</div>
</div>
</div>
Thanks!
Here's something that may work for you. It's a little hacky, but if you're trying to find a good width for some text, this is the only way besides javascript that I know of. We're basically forcing the width by not allowing the line to break. You can put in <br/>s if you need line breaks.
<div style="position:absolute;top:50px;left:50px;background:green;width:0px">
<div>
<div>test</div>
<div style="height:50px; white-space:nowrap">This is normally sized in IE6</div>
</div>
</div>
On second thought, don't check out the link. It's old and doesn't work as advertised.
Old answer:
http://snippets.dzone.com/posts/show/216
I believe that non-absolutely positioned DIVs automatically expand to fill their container horizontally. Since you haven't specified any container size for this div, it expands to fill the whole page.
I find it odd that Firefox doesn't expand the div... I'm not sure which of them actually has it "right".
At a guess, I would say it's something to do with the hasLayout bug in IE6. My suggestions:
1. Give the containing div (the one with the absolute positioning) a set width.
2. Post an example of what you are trying to achieve. We might be able to suggest a more all-browser friendly way of doing what you want.