Div content overlapping each other

Question

This problem is related to how i can show div with absolute position regarding the div, Not the page.

I have div#Div_Report, Which has multiple page div#page1, div#page2,..., And each page div has content with same css.

My problem is if i give absolute position to page's div.Div_ClientName, Then div#page2 data is overlapping to div#page1. I know this can easily fix by relative position, But due to some reason i cant use relative position. So how we can set page content with in page div with absolute position?

Here is my HTML:-

    <div id="Div_Report">
        <div id="page1">
            <div class="Div_ClientName">Childrens Network - Hendry Glades</div>
        </div>
        <div id="page2">
            <div class="Div_ClientName">Childrens Network - Hendry Glades</div>
        </div>
    </div>

CSS:-

.Div_ClientName{
    top:180px;
}
.Div_ClientName{
    position:absolute;
}
.Div_ClientName{
       left: 175px;
}
#page2{
    margin-top:200px
}

Fiddle Link

It's not clear to me as to why you want to set the position of the pages at all -- can you explain? — Pavan Ravipati, Jul 27 '15 at 04:50
once you choosed absolute, you are responsible for the position. you need to calculate the position on your on. + I dont understand what you really want the behaviour to be — yossico, Jul 27 '15 at 04:53
Actually it's a dynamic website, All div's are created dynamically, and css also defined by users. Sorry, But it's too complicated. And i want to set page content regard's to the page div not to the page with absolute position.. — Renu Thakur, Jul 27 '15 at 04:54
Ya, Thats why we are choosing absolute position. But as you can see i am defining inner div position, So it should be with in parent div. @yossico — Renu Thakur, Jul 27 '15 at 04:57
http://mywiki.wooledge.org/XyProblem Please mention what you are trying to do in a broader sense. Also add your simple solution with `relative` positioning so that we can understand what you are trying to do. — sabithpocker, Jul 27 '15 at 05:05
the css in your fiddle makes no sense, why do you have the same class being referenced 3 times? — marblewraith, Jul 27 '15 at 05:06
Sorry, Got solution from here http://stackoverflow.com/questions/10487292/position-absolute-but-relative-to-parent You can check here what i want http://jsfiddle.net/6g7fdtpj/1/ — Renu Thakur, Jul 27 '15 at 05:08
@RenuThakur The position of `absolute` positioned div need not be relative to its immediate parent , so it can't be guaranteed to be within the immediate parent div. Instead, for an absolutely positioned node the position will be relative to its nearest parent div which is either `absolute`, `fixed` or `relative` (ie. not `static`). Also Make sure you give explicit `height` to the absolutely positioned `div`. — sabithpocker, Jul 27 '15 at 05:10
@sabithpocker Sorry, Not able to understand, Can you please explain it? — Renu Thakur, Jul 27 '15 at 05:14
If you give `.Div_ClientName` `absolute` positioning, it won't be positioned relative to `#page1` even when its the immediate parent(as it is `static` by default). Instead browser will search through the parents until it finds one parent which is either `absolute`, `relative` or `fixed` and places the `div` @180/175 from origin(top,left) of that node. If browser finds no parent that is `positioned` it will be positioned relative to `body` — sabithpocker, Jul 27 '15 at 05:22
@MatthewRath Because these css attribute is created dynamically. Some of the CSS is coming first or some coming later in my data string. — Renu Thakur, Jul 27 '15 at 05:55

score 2 · Accepted Answer · answered Jul 27 '15 at 05:09

2

Try this CSS:

#page1, #page2 {
    position:relative;
    float:left;
}

... it isn’t, by any means, a nice solution ... but it solves the problem with things overlapping.

answered Jul 27 '15 at 05:09

Ole Sauffaus

534
3
13

Thanks, Sorry but you are late. Got from here http://stackoverflow.com/questions/10487292/position-absolute-but-relative-to-parent. I tried this and it's working solution. Thanks for the help... – Renu Thakur Jul 27 '15 at 05:11

Div content overlapping each other

1 Answers1

Linked