I have a div with a background image which is aligned bottom right. Then I have another div floated inside that div to the left and to the bottom. In IE6, it looks like the bottom inner div is overlapping and cutting out the middle of the background image which is set to bottom left.
Any ideas what might cause this? Is there a known issue with floats and background images?
Thanks
The solution was to add the CSS property Zoom:1; on the div with the background image. This sorts it out in IE6.
Related
I have a div (banner) with fixed position and a div (content) .When I scroll down the div (content), it will overlap with the div (banner) and caused some wording in div (banner) not able to see. I have tried to put z-index on both div but still have same result. Please see my code at Jsfiddle.
Jsfiddle:https://jsfiddle.net/ckcheah/731sLxks/
you can add background-color to your banner.
like this:background-color: #fff;
actually, you can set your banner top:0 to fixed it in the top of the frame.
I have a large background image that I want to use in a hero element in a site banner.
The bottom of this photo is the crucial part, so I always want it showing. background-position will align a smaller photo to the bottom of a larger element, but when the background photo is larger than the element, it keeps the top of the background-image aligned with the top of the container. I want to keep the bottom of the background-image aligned with the bottom of the container.
An example: here's a background image; I want to make sure the bottom (some mountains) always show up in this jsfiddle.
Remove background-attachment: fixed; from your hero class.
I have a question about margin in CSS. I have a DIV element, which has an image for background. Inside that DIV I have another DIV. I want this DIV inside to be 200px from the top. But, when I do that, the outside DIV also moves down for 200px. Why is that and how to keep the outside DIV on top?
Set padding-top on your outside div.
For an detailed explanation to your problem see here.
There are a lot of questions regarding side-by-side divs. I didn't miss those. But I need something that spans the whole width of the screen. This is the situation:
I need three divs positioned side-by-side. The left, middle, and right divs we'll call them. The middle div holds the header contents of the site and is a fixed width (800px). I want the left and right div to span the rest of the screen width on either side. So..
<-LEFT-> | MIDDLE | <- RIGHT ->
The reason I want to do it this way is because the middle (content holding) div has a backgrond that is a gradient. Let's say the left side of the gradient is white and the right side is black. I need the Left div to be white so it is a continuation and the Right div to be black. This way it looks like one fluid heading that spans the whole width of the screen.
Thanks.
A solution for this problem I once implemented was using 2 div elements, absolutely positioned, with the center div as an overlay. I have a working example here:
jsFiddle solution
This way, it doesn't matter how wide the screen is: The div's span 50% of your screen, and the middle part is behind the centered div.
Note that you might have to use a javascript workaround for the height-issues.
Do you want content in the left or right divs? If not, Simply stick with your one center div, give it a width and position it using margin: 0 auto; in your css. You can then set the background image of the body tag with an image (say 1px by 2400px) that is half white and half black.
If you want that effect just behind your header, then you could create a div the same height as the heading and give it the following css properties:
position: absolute;
width: 100%;
z-index: -1;
that way it should sit behind your container (middle) div.
You should consider having just one centered div and on the body put a background-image of 1px height and large enough width and centered. That image will have the left half white and the right one black.
Hope this helps, Alin
...WWWWW| DIV |BBBBB...
Anyway I don't think it's possible without using a table.
Usually floatting div are size-fixed and center div is fluid.
I have two div's in a container div, one floating left, one floating right.
I have a php function for a search engine that spits out results, into the left div. what I need to do is have
the right div repeat the background based on the height of the varied results on the left div. I have no idea how to go about this, any ideas?
Right now it looks like this:
left div content right div background
left div content right div background
left div content right div background
left div content
left div content
what I need it to do is base it's repeat-y off of the content in the left div so it looks like this
left div content right div background
left div content right div background
left div content right div background
left div content right div background
left div content right div background
left div content right div background
EDIT:
The only solution I can think of right now is to spit out a blank line in the right div for every link in the left div, i'd like to avoid that, which is why i'm asking for a different solution.
EDIT 2:
Thought of another way via javascript, to just detect the height after the div is loaded into the page, and reassign the height of the left to the right. something i'd like to avoid but hey what can ya do.
As a pure css solution you can use faux columns. Basically it implies using background repeat on the parent to mask the div height. It's an ugly hack, but works surprisingly well for most scenarios.
Or you can use javascript:
var box1 = document.getElementById('left-div');
var box2 = document.getElementById('right-div');
var height = box1.offsetHeight;
if(box1.offsetHeight < box2.offsetHeight) height = box2.offsetHeight;
box1.style.height = box2.style.height = String(height) + 'px';
set the right div height as same as left div.