I've been running into a presentation issue with Internet Explorer. The following simple block of code renders as I would expect it to in Safari, FireFox, Chrome, and Opera. However it results in a noticeable space between the left and right floated DIV elements in both IE6 and IE7.
My question is: Is there a more correct way to achieve a float such that the same CSS works in both IE and the other browsers I've mentioned? If not, what is the best approach for getting rid of the space in Internet Explorer?
Thanks, Matt
<style>
.left {
width:100px;
float:left;
border: solid black 1px;
}
.right {
width: 100px;
margin-left:100 px;
border: solid red 1px;
}
</style>
<div class="left">
a
</div>
<div class="right">
b
</div>
Since this is a community wiki. I thought I'd post the working code with the solution proposed below by Plan B.
<style>
.left {
width:100px;
border: solid black 1px;
float:left;
}
.right {
width:100px;
border: solid red 1px;
float:left;
}
.clear {
clear:both;
}
</style>
<div class="left">
a
</div>
<div class="right">
b
</div>
<div class="clear"></div>
c
Float them both left, add the following after both divs:
<div class="clear"></div>
.clear { clear: both; }
That or use padding instead of margins.
.body {
padding:0px;
margin:0px;
}
It is the double margin float bug. Described well here:
http://www.positioniseverything.net/explorer/doubled-margin.html
Try adding display: inline to floated divs. I believe this is an IE bug of adding more margins to floated elements. display: inline worked for me in the past. Hope this helps.
Related
This is driving me crazy. I've got a div floated to the right inside of another div, like so:
<div id='container'>
<div id='status'></div>
Current Membership: <%= #distribution_list.total %>
</div>
I've got the following css rules:
div#container {
float:right;
margin-right:3px;
}
div#container div#status {
float:right;
border:#aaa solid 1px;
border-radius:12px;
width:12px;
height:12px;
margin:-1px 0px 0px 5px;
background:#ff0000;
}
div#container div#status.good {
background:#5bd64a;
}
I don't mind the border-radius not functioning properly in IE7. What I do mind, is that when this is displayed in IE7 the text "Current Membership: total" is on the next line. The only way I've gotten this to work is by specifying a width for container, which I would prefer not to do. Anyone know of a way to get this to work?
When I test (emulated) in IE7, the text shows up on the same line, but just on the left edge of the screen. I added the following for layout, but it otherwise looks similar in layout to me:
div#container {
float:right;
margin-right:3px;
text-align: right;
}
Okay, so, on my website, I have three panels: cont1, cont2, and cont3. The following are their CSS definitions:
#cont1 { width:35%; position:fixed; background:#2583FE; right:0px; overflow:hidden; float:right; border:1px solid #0961D3; border-left:0px solid black; height:100%;}
#cont2 { height:69%; width:100%; overflow:auto;}
#cont3 { min-height:75px; width:100%; position:relative; display:block;}
Now, if I implement it in the following way, only a vertical scrollbar appears and I can scroll my content as I wish:
<div id="cont1">
<div id="cont3">First element</div>
<div id="cont3">Second element</div>
<div id="cont3">Third Element</div>
<!--And so on-->
</div>
However, if I implement it in this way (the way that I ultimately want it to work), horizontal scrollbars appear in cont2 for no apparent reason:
<div id="cont1">
<div id="cont2">
<div id="cont3">First element</div>
<div id="cont3">Second element</div>
<div id="cont3">Third Element</div>
<!--And so on-->
</div>
</div>
Usually, I would just put overflow-x:hidden, but I'm trying to make my site as cross platform as possible and I know overflow-x is a CSS3 property (not supported in IE8 or below). Could anyone offer insight as to what might be happening? Thank you!
.cont{
height: 30px;/**/
border-color: black;
/*position: relative;*/
position: fixed;
margin-left: 0px;
margin-right: 0px;
padding-left: 0px;
padding-right: 0px;
width: 100%;
border: none;
}
To begin, you must use the #id once, there can be only one #id. Uses .classes if you want to put several.
Then I do not understand I do not have this problem on jsFiddle, I wonder if this is the edge that is used in #cont1 that you created this bar.
You have a page to show us the problem live?
I'm trying to add a background that is split in 3 parts. 5% gray on the left, white, 5% gray on the right...
SO I created a gradient with CSS, which is partially okay in Chrome but in IE it doesn't work at all...
How would you create the effect I'm looking for?
Here is the website.
CSS Gradients can cause havoc due to their lack luster support accross platforms. You would most likely want to do the div method mentiond by #Louis in the comments to your question. Something like this could work:
<body>
<div class="left"></div>
<div class="center"></div>
<div class="right"></div>
<style>
.left, .right{
width:5%;
background:gray;
height:100%;
float:left;
margin:0;
}
.center{
width:90%;
background:white;
height:100%;
float:left;
margin:0;
}
</style>
</body>
Css gradient:
<div class="container"></div>
css is too long so look in this fiddle.
This one works in IE 9.
Another option:
<div class="container">
<div class="white"></div>
</div>
<style>
body { background: blue;}
.container {
height: 50px;
background: gray;
}
.white {
height: 50px;
background: white;
margin: 0 5%;
}
</style>
Fiddle
this website will help you to create css gradient
http://gradients.glrzad.com/
also try to run this in IE
there is support for the gradient in latest IE but i think not for old ones.
other solution is that make a photoshoped image of your own design and use this as your background image.
I've been searching for hours but I can't find a way to place 2 div's next to each other.
The below example works fine when the div's are smaller then the screen but when they are bigger then the screen they are below each other.
Also I would like the same classes for 2 pages:
1 page they both fit on the screen and I'd like to display them next to each other (not one on the left and one on the right)
the other page together they are bigger then the screen. (Sideways scrolling is no problem)
Take this example:
<style>
.wrapper
{
border:1px solid Red;
display: inline-block;
}
.left
{
float:left;
color: Green;
border:1px solid Green;
}
.right
{
float:right;
color: Blue;
border:1px solid Blue;
}
</style>
<div class="wrapper">
<div class="left">
ASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDF
</div>
<div class="right">
ASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDF
</div>
<div class="clear" />
</div>
In the actual design ASDF is replaced by a big <table>.
As I said above I've been searching for hours but can find a solution so I'm sorry if this has been asked before.
The wrapper div isn't necessary for the two to be lined up, but if you have it for other reasons (like a border, background, etc.), then it does not need to be set to inline-block.
Nothing technically needs to float. inline-block has the same effect and is more appropriate. Having said that, one float is needed to make things as fluid as possible and will be mentioned in a second.
Something that makes this and other css magic involving inline-block tricky and error-prone is that the element is treated in some ways like an inline element and in other ways like a block. This is not cross-browser consistent. Generally, this means that it can have block-level styling (like border, and width), and inline-level styling. Generally people just think of it as blocks that fall horizontally, "in a line". But inline element properties from a wrapper div such as font-size and white-space come in to effect as well (which is just annoying).
Having said all of that, here is the bare-bones recipe for side-by-side block elements that exceed the browser window and are inside of a block-level wrapper:
The inner blocks need to be set to inline-block.
The outer wrapper needs to have white-space set to nowrap, just as if you wanted a long line of text to expand horizontally beyond the browser window.
The outer wrapper needs to be set to float: left; clear: both;, because otherwise the wrapper's width will not go past the window width. The alternative is to set the width of the wrapper, but if you don't know how far it will expand, the float will force the wrapper to automatically shrink or grow to the width of it's contents. The clear:both prevents the floating from affecting any surrounding elements.
So for the following HTML:
<div class="wrapper">
<div class="left">ASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDF</div>
<div class="right">ASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDF</div>
</div>
You would need the following CSS as a bare minimum:
.wrapper {
white-space: nowrap;
float:left;
clear: both;
}
.left, .right{
display: inline-block;
}
And then, for your example, you would add:
.wrapper {
border: 1px solid red;
}
.left
{
color: Green;
border:1px solid Green;
}
.right
{
color: Blue;
border:1px solid Blue;
}
Demo: http://jsfiddle.net/crazytonyi/jTknm/
This is one approach that could be used, coupling white-space: nowrap in the parent .wrapper element with display: inline-block in the child .left and .right elements:
.wrapper
{
/* other stuff */
white-space: nowrap;
}
.left
{
display: inline-block;
/* other stuff */
}
.right
{
display: inline-block;
/* other stuff */
}
JS Fiddle demo.
You can do this without floating by setting the inner divs to display: inline-block and letting the outer div have white-space: nowrap:
<div class="wrapper">
<div class="left">left</div><div class="right">right</div>
</div>
.wrapper { border: 1px red solid; white-space: nowrap }
.wrapper div { display: inline-block; width: 70% } /* 2*70% = 140% of .wrapper */
See it in action.
Be careful to not leave any whitespace between closing the first and opening the second div, because that will manifest as visible space in the render.
Erm, you need to use float:left for both them to begin with. Then force overflow:show for the wrapper or perhaps use the newer CSS 3 property overflow-x:scroll. Let me know if it still doesn't work.
Okay I have tested for you. The reason why this is not working is because you haven't specified fixed widths and some other stuff. Here is the working code:
<style>
.wrapper
{
border:1px solid Red;
width:100%;
overflow-x:scroll;
}
.left
{
float:left;
width:500px;
color: Green;
border:1px solid Green;
}
.right
{
float:left;
width:500px;
color: Blue;
border:1px solid Blue;
}
</style>
<body>
<div class="wrapper">
<div class="left">
ASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDF
</div>
<div class="right">
ASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDF
</div>
<div class="clear" />
</div>
Then if you want to specify widths, either use Javascript to determine them on page load or use CSS.
Your divs need widths, try:
<div id="left"><p>Some content here...</p></div>
<div id="right"><p>Some content here...</p></div>
<style>
#left, #right { float:left; color: Green; border:1px solid Green; width:49%; }
#left { margin-right:1%; }
</style>
If you run the simple HTML page found at:
http://ss.bigwavesoftware.net/2.htm
in IE8 and FireFox 3.5.8, the DIV's display differently. In IE they behave as block elements and FireFox they behave as inline elements. I need them to behave as inline in both browsers. Can someone suggest a workaround to make them display inline in IE8 as well as FireFox?
<html>
<body>
<div style="display: inline; float: none; width:100px; height:100px; border:1px solid red;">Left Box
</div>
<div style="display: inline; float: right; width:100px; height:100px; border:1px solid green;">Right Box
</div>
</body>
</html>
Reverse the order of your divs and it will work. That is put the first one second and the second one first in the markup.
<html>
<body>
<div style="display: inline; float: right; width:100px; height:100px; border:1px solid green;">Right Box
</div>
<div style="display: inline; float: none; width:100px; height:100px; border:1px solid red;">Left Box
</div>
</body>
</html>
Add a doctype at the very start of your document. It's being rendered in quirks mode. E.g.
<!doctype html>
<html>
... etc.
Oh, and what exactly do you mean by "behave as inline"? Do you simply mean you want them to appear side-by-side, or do you actually want the width and height to be ignored (as Tom pointed out)? Because you won't be able to do the latter for floated elements. The display: inline is useless on floats (except to fix IE6 bugs), because "inline" floats automatically turn into block.
You can't set height and width on inline elements. If you want the boxes to be laid out as they are in Firefox, remove the display: inline and float the left-hand box.
use float: left instead of float: none in the first div (the one on the left).
<html>
<body>
<div style="display: inline; float: left; width:100px; height:100px; border:1px solid red;">Left Box
</div>
<div style="display: inline; float: right; width:100px; height:100px; border:1px solid green;">Right Box
</div>
</body>
</html>