html - Prevent equal height to dynamic width div from overlaping content below -
Anyone know how to overlap the content below, how can I prevent a similar height of dynamic width? In order to expand the content, Div has to be expanded.
@caeth has suggested moving down the div to be given inside the given device, which works: but I am looking for a solution that is not required.
Here is the code:
& lt; Div class = "holder" & gt; & Lt; Div class = "size" & gt; & Lt; / Div & gt; & Lt; Div class = "shape_outer" & gt; & Lt; Div class = "shape_inner" & gt; Content ... & lt; / Div & gt; & Lt; / Div & gt; & Lt; / Div & gt; & Lt; div class = "size_blo" & gt; & Lt; / Div & gt; ...
.holler {display: inline-block; Status: Relative; Width: 50%; } .shape {margin-top: 100%; } .shape_outer {status: absolute; Top: 0; Bottom: 0; Left: 0; Correct: 0; } .shape_inner {background: #ddd; Minimum height: 100%; Width: 100%; } .shape_below {background: # 111; Width: 200px; Height: 200 pixels; } and a JSFiddle:
thanks b.
Try this:
.shape {margin: 20px; } Creating a hidden field around the div what you are doing. I think you can remove size-exterior . / P>
Comments
Post a Comment