In my site, I have two divs - right and left. Both are contained within a wrapper div. Here is my code:
#wrapper{
width:1000px;
height:750px;
margin:auto;
}
#left{
width:500px;
height:750px;
float:left;
position:relative;
}
#right{
width:500px;
height:750px;
float:right;
position:relative;
}
In Chrome, no problem.
In Firefox, no problem.
In Safari, no problem.
In Opera, no problem
In IE, the #right div is in the same location horizontally, but vertically it's below the #left div.
I've tried a few different techniques to remedy this. Setting the wrapper line height to 0, setting the right display to inline, reducing the size of the right and left divs (I thought maybe there was a margin/padding issue). I've run out of ideas now, can anybody offer any help of the issue?
In All Browsers (except IE):
In IE:
There's nothing wrong with the CSS you've posted. It will work in all browsers as expected (I've decreased the widths in my example).
What's happening is that you've got an element in one of your columns that's forcing the width of either #left or #right to be greater than 500px. The easiest way to fix this is to start removing elements until the float drop disappears. Then you can figure out if there's a solution for the offending element (i.e. set its width or set overflow: hidden or scroll).
Try using float:left for both the #right and #left divs. You could also probably take out the position: relative as well.
put both left and right divs as float:left
Related
Here is the code
<style>
.test{
position:absolute;
width:100px;
height:100%;
top:50%;
transform:translateY(-50%);
background:blue;
}
</style>
<div class="test"></div>
Here is a picture of what it looks like. I tested this in Chrome and IE and the gap doesn't appear.
The gap remains if I set the height to 100% 100vh or the absolute height in pixels. I am using Firefox 40 so the browser is up to date.
Also, for anyone wondering why you would center a div that has a height of 100% it is so that it will center no matter the orientation of the screen.
EDIT
For all those suggesting setting margin:0 it unfortunately doesn't fix the problem
Clarification of the problem.
Apparently this is rounding error in the rendering engine. Because if you change the height of the window the gap appears and disappears. Chrome seems to show a slight gap but it is almost indistinguishable. To see the problem try changing the frame height in this fiddle http://jsfiddle.net/m4yqoq4w/. I assume this also means there is no easy way to fix the problem.
Add margin:0; to the body
Before: http://jsfiddle.net/m4yqoq4w/
After: http://jsfiddle.net/2umLokj4/
This will fix it:
body{
margin: 0;
}
If you reduce the "top" property value as below, you will never get the gap
top:49%;
I have a fluid width site with a logo centered in the header area. The logo stays in the center regardless of the window size. Works in all browsers except ie9. In ie9 it is stuck on the right. If I could get it stuck on the left that would be an ok compromise but the right will not do. My best guess is that ie9 does not support the css code:
.logo {
width:100%;
position:relative;
}
.logo img {
margin-left:auto;
margin-right:auto;
display:block;
}
Here is the website http://www.cyberdefenselabs.org/
Anyone know a workaround for ie9 that will not affect other browsers or involve drastic recode?
Your .social-header-wrap element contains floating elements that are not properly cleared. Add this style:
.social-header-wrap {overflow:hidden}
The person above is correct - you have floats that are not properly cleared.
But you should sort out your layout before making style changes as you have the same main menu 3 times but with 1 of them hidden and 1 (the first one) with white on white links.
Simply removing the first main menu (the div with the class "social-header-wrap") also solves the problem.
When using
margin:auto;
you should say
margin:0 auto;
Get rid of margin-left and -right and change to margin:0 auto;
Also the containing element needs to be text-align:center which you undo by putting text-align:left in the element you are centering.
Im trying to align multiple Images or DIVs.
i get the content from wordpress.
#wrapper{
width:800px;
}
.image{
width:125px;
height:100px;
float:left;
margin-left:10px;
}
This causes the last image to go to the next line.
i found
#wrapper div:first-child{
margin-left:0px;
}
helps me with the first line but the next lines are "broken" again.
how can i align 6 images in a row with ^n Pictures?
That's indeed a common design problem. I used to fix it by adding 10px to the container, but nowadays I always use a jQuery fix:
$("#wrapper .image:nth-child(6n+1)").find('img').css('margin-left','0');
See jsfiddle here
Or you could do it CSS only, but this will only work in real browsers (not in <=IE8)
.image:nth-child(6n+1) {
margin-left:0px;
}
See jsfiddle here
Sounds like the total width of the images, padding and margin are too wide for your container width. Try increasing the container width to confirm this.
I have a div under a float:right div. For some reason, the top margin cannot be applied to the first div. here is the css
#over{
width:80%;
float:right;
color:#e68200;
}
#under{
clear:both;
background:url(../images/anazitisi.png) no-repeat;
margin:10px auto; /*does not work!!!*/
width:95px;
height:20px;
}
does anyone know what's going on?
Floated things are kind of floated out of the normal layout, so generally don't affect other things that aren't floated like them. Of course the float behaviour in different browsers differs, but that's the general idea.
After the floated div you'd need something (like an empty div) that will clear the float (has style="clear:both;").
However, like I said, browser behaviour will still vary, on where it then decides the margin should be counted from. There are of course workarounds for that. See this page for more on that.
A solution without extra <div>
What you see, is the problem of collapsing vertical margins in CSS3. This problem will be more easily solved with the advent of CSS4. In the mean time, it is not a good idea to add an extra <div>, as easy as it may sound. It is generally better to keep content and presentation strictly separated.
Here is how I solved this issue on my website. The solution exploits the absence of vertical margin collapse inside inline blocks.
#under should contain at least the following items:
#under {
clear: both;
display: inline-block;
width: 100%;
}
try this css snipe, i think this will solve your problem.
#over{
width:80%;
float:right;
color:#e68200;
background-color:#234fdd;
height:auto;
margin-bottom:30px;
}
#under{
clear:both;
background:url(../images/anazitisi.png) no-repeat;
margin:auto;
width:200px;
height:20px;
background-color:#23ffff;
}
Well I have, I think, kind of unusual question. Well I have a web page with starting div with absolute position.
.head_warp
{
width:100%;
display:block;
height:238px;
margin:0 auto;
padding:0;
position:absolute;
text-align:center;
background-image:url(images/demo6_fon.png);
background-position:center;
background-position:top;
background-repeat:repeat-x;
z-index:-9999;
}
and after that I have a container
#container_out
{
width:1024px;
margin:0 auto;
}
The HTML is that way:
<div class="head_warp"></div>
<div id="container_out"></div>
The idea is the content in the "container" to be shown over the "head_warp" and it's ok in any browser I tested with. Chrome, FF, Safari even with IE8 and IE7. But my co worker is with IE8 with windows VISTA and look what is the result
alt text http://www.pechat.mdkbg.com/problem.jpg
What is the problem?
#Puaka I think all browsers are relative to the parent container when specifying a percentage width. In this case it should be relative to the body.
Is your DOCTYPE correct?
If you are absolutely positioning an element, you should be specifying the top/left position which you don't appear to be doing. Also, you specify margin:0 auto; implying there could be a left/right margin. I would have thought this should be simply margin:0;?
Looks like you're missing some information for your absolutely-positioned div:
top: 0;
left: 0;
in IE, 100% width will use its parent width, so you need to put it inside container_out, change your container_out css, maybe add padding-top/margin-top = header_warp height
I just tested it in IE8 on Vista and it displayed fine.
It looks like all that div is doing is displaying a background image for the page. Why not just add the background image to body and get rid of that div?