I have Div1 with 3 children Divs Div1Child1, Div1Child2, Div1Child3, and then I create one more div Div2. Div2 is overflowing on Div1.
How to prevent this?
My code-
<div id="idDivContents">
<div id="idDivBanner"></div>
<div id="idDivPoster"></div>
<div id="idDivProducts"></div>
</div>
<div id="idDivFooter"></div>
Here idDivFooter is overflowing on idDivContents.
But I need idDivFooter below idDivContents.
I got the issue. Since I can't delete this question, I am answering it here-
The problem was with the height of the parent Div. If the height of the parent Div is equal to the sum of the height of the child divs then the Footer div won't overflow.
Related
For demo purposes imagine the following structure:
<div class="wrapper">
<div class="box"></div>
</div>
the div with class="wrapper" has a fixed width of let's say 200px;
the inner div with class="box" has a 50% width of its parent.
I want to create a effect with translateX for the inner div to slide and leave when it reaches the border of the parent div.
I have this plunker which is not working. Plunker
How can I prevent it from going beyond its parent width?
Add overflow: hidden to the parent element (.wrapper).
The layout is quite simple.
<div id="div1">
<div id="div1-child">
</div>
</div>
<div id="div2">
<div id="div2-child">
</div>
</div>
Both childs float right and 100% height of their parents. But the first child is a bit lower, so the second div is pushed left to get the free room for the first. I need div2-child to overlap div1-child. But if I set different z-index to div1 and div2, div1-child just being overlapped by div2 still affecting on div2-child.
I need this to be explained.
Here is the fiddle.
If you give position relative to parent than you have to play second child dive with position absolute.
if you are agree with position absolute with second div child than your working demo is below
jsfiddle.net/2Js5B/2/
I'm trying to solve a scrollbar problem.
I had the problem that I wanted to have three divs aligned vertically and that the middle one will have the space left of the footer and the header
This post helped me with this part: Middle div with 100% in CSS?
The things is that I need that the content div (the middle div) show a scrollbar when the content overflows the middle div space.
Now I have this: http://jsfiddle.net/rv4XS/31/
<body>
<div id="wrap">
<div id="container">
<div id="header">header
</div>
<div id="content">data<br/>
data<br/>data<br/>data<br/>data<br/>data<br/>data<br/>data<br/>data<br/>data<br/>
</div>
</div>
</div>
<div id="footer">footer
</div>
</body>
Thanks for the help.
EDIT 1: Only firefox and chrome, No IE.
EDIT 2: Maybe I'm not explaining well my question: I have a header that has variable height based on the content it has, the footer has a fixed height. Now, knowing that the header has a variable height and that the footer has a fixed height, how can I make a middle div (content div) that takes all the space left by the footer and the header?
If the header increases its height a lot ... what will happen is that the middle div will not be visible but only the header and the footer. of course the idea is that if the middle div has some data inside and it is cropped, it has to show the scrollbar.
You can give #content as below :
Note : cannot give % as you gave.Then It Occupied whole height and width which the content has.
Correct One
#content {
width:100%;
height:100px;
overflow: auto;
}
I have updated JSFIDDLER
How do you Horizontally center align a DIV that is absolutely positioned in another DIV ?
HTML
<div style="width:250px;height:250px;background:red;position:relative;">
<div style="width:100px;height:100px;background:blue;position:absolute;"></div>
</div>
Thank You
My answer works only if the background of the inner div has no background color. As your example does, I add a third div. The second one is for the centering, the third one is for the coloring.
<div style="width:250px;height:250px;background:red;position:relative;">
<div style="width:100px;height:100px;position:absolute;padding-left:50%;margin-left:-50px">
<div style="background:blue;padding:0px;"></div>
</div>
</div>
The important thing to notice here is: padding-left:50%;margin-left:-50px;. -50px being half of you div's width.
<div style="width:250px;height:250px;background:red;position:relative;">
<div style="width:100px;height:100px;background:blue;position:absolute; margin: auto;"></div>
</div>
the margin auto should center your div both horizontally and vertically
If you know the sizes of each div and you plan to continue to use position:absolute;, you just set the top and left coordinates. So something like this in the inner div
top:75px; left:75px;
http://jsfiddle.net/jasongennaro/zQjaU/
*May be off a few px. You may need to adjust.
i have a sidebar having many nested divs to place my rounded corrners.but when i tried to set the content's div height equal to 90% its not expanding.what is the issue.my html,body have 100% height.my div nest is some what like this.
<body>
<div class="main"> //it contains header n content div,its height is 90%
<div class="header"></div> //its height is 10% of main div
<div class="content"> //its height is 90% of main div
<div class="vertical_navigation"> //its height is 99% of content div
<div><div><div><div> //thses divs are for rounded corner image concept
<div> </div> //this div contains the data.now its height is 80% but its not expanding?h
//i cant use min-height,its not working too.how to give height referenced to //vertical navi div??
</div></div></div></div>
</div>
</div>
</div>
<footer></footer>
</body>
have you considered applying rounded corners with just css and not worrying about the ieretards not having them?
When having so much nested div, it's good you consider the measurement in width and height of the DIV if the container div is lesser that the ones inside it, it won't stretch,because that way, the browser can't detect how far the div is meant to stretch. to resolve this use make proper use of CSS.