One div running into another

HTML & CSS
1

I have a 100% width div holding an image for which I don’t want to set a height:for obvious reasons

.heading{
 width:100%;
 position: relative;
 display: block;
}

.heading .slide {
 position: absolute;
 left: 0;
 top: 0;    
}

.heading .slide img {
  max-width: 100;
  height: auto;    
}

But without setting a height or min-height the div below is overlapping the heading. What is the best solution to avoid this?

Edit. It is overlapping in FF and IE. In Chrome it is ok

2

The following line is incorrect because there are no units or percentages:

max-width: 100;

Try giving max-width: a unit and see if it makes a difference,

This error would have been highlighted using the following free validation tests:

http://jigsaw.w3.org/css-validator/

Edit:
Because there are page errors the different browsers have to try and guess what is required.

3

Absolute elements are removed from the flow. Don’t use them when you want to control the flow. Find another method to achieve what you want.

Without seeing the full code and dynamics it’s impossible to give a solution.:slight_smile:

4

Hi Paul. I know, and i try to avoid the absolute positioning If I can. The layout is kind of simple (your display table/table-row/table-cell) method.

I have a wrapper div (display table). within wrapper I have header, navigation (both display: table-row). Below that I need a responsive slideshow.

Below that I have a main div and a footer div, both again display table-row;. I’m realy am struggling to get the slideshow into it all. I found a Javascript slideshow, and allthough that one is working, the behaviour is very unexpected (sometimes with the page switch the images don’t show)

I hope this is all understandable

5

What you are saying makes sense, but without seeing the code that you are working with, there is nothing that we can do but guess.

6

This slider is responsive if that helps.

Most sliders have some sort of allocated height so that they can be mixed in with the flow.

If the images are being placed absolutely you could make the wrapper responsive by applying percentage top padding to create an aspect ratio on to which you absolutely place the images (assuming all have the same aspect ratio). More info here.

7

@ John_Betong. That was a typo, but even after correcting that it still didn’t working.

@ PaulOB & ronpat. You are absolutely right about that it is difficult to see what is wrong without seeing the code. Problem was that I didn’t have the site live as yet.

@ PaulOB That is a brilliant slider and it is working as I had hoped for. I was struggling to get a patern overlay included Using position absolute wasn’t working (Absolute elements are removed from the flow.:slight_smile: ) So I ended up using the captions option instead since I didn’t need captions for the slideshow and it is working great.

Thank you all a lot

8

Did you try copying and pasting your code into the links I supplied in post#2 ?

9

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.