logo
down
shadow

Container div overlapping child horizontally


Container div overlapping child horizontally

By : Mayu03
Date : November 22 2020, 02:42 PM
help you fix your problem When you set an element's position to absolute you're taking it out of the flow of the page. It will overlap content that is in the flow by definition. You'll need to take the div.sidebar's positioning off and maybe give it float: right
I don't typically use floats so float: right might not do exactly what you need but it will get you closer.
code :


Share : facebook icon twitter icon
Vertically and horizontally centering container and content in container

Vertically and horizontally centering container and content in container


By : Omar Ahmed
Date : March 29 2020, 07:55 AM
I think the issue was by ths following , I am trying to vertically and horizontally center a container, and the content inside using CSS. ,
edit 1
code :
<!-- HTML -->
<div class="table">
    <div class="cell">
        <div class="inner">
            <div class="align">
                <img src="//lorempixel.com/200/300">
            </div>
            <div class="align">
                <img src="//lorempixel.com/200/200">
            </div>
        </div>
    </div>
</div>
/* all css rules prepended by a hash sign (#) are specifically for IE 7 and below */

html, body {
     /* w3c dropped height percentage in some css2 or so version 
      * if you don't know the heights of ALL the parent element up to the root.
      * So give ALL parents a known height
      * CAVE: If mobile browsing is important check, if this does not affect scrolling and zooming
      */
    height: 100%; 
}
.table{
    /* modern browsers support display: table
     * use this for an easy vertical alignment
     */
    height: 100%;
    width: 100%;
    display: table;
    /* check if you want absolute positioning */
    position: absolute;
    /* if you don't want absolute positioning, uncomment the next line and comment the previous line out */
    /* #position: relative */ 
}
.table > .cell {
     /* modern browsers support display: table-cell
     * use this for an easy vertical alignment
     * You don't need table-row
     */     
    display: table-cell;
    vertical-align: middle;
    text-align: center;
    /* this is again for lte IE7 */
    #position: absolute;
    /* 50% is half of the containing element (.table here) */
    #top: 50%;
    #width: 100%;
}
.cell > .inner {
    text-align: left;
    display: inline-block;
    /* triggers hasLayout in IE 6+7 */    
    #zoom: 1;
    /* if IE 6+7 element have hasLayout, display: inline behaves as display: inline-block. Strange, huh?  */
    #display: inline;
    #position: relative;
    /* here the 50% are the half of the .cell element */
    #top: -50%;
}
.cell > .inner > .align {
    vertical-align: middle;
    display: inline-block;
    #zoom: 1;
    #display: inline;
}


.inner {
    border: 1px solid gold;
    padding: 10px;
    white-space: nowrap;
}
child div overlapping rounded (with radius) container when at width of 2%

child div overlapping rounded (with radius) container when at width of 2%


By : Nate Sloan
Date : March 29 2020, 07:55 AM
Hope that helps I have a long rectangle shape container with a radius. , In your CSS:
code :
parent{
    overflow: hidden;
}
<div class="hasBorder hasBorderRadius">
    <div class="hasBorderRadius hasHiddenOverflow">
        <div class="containsContent">
        </div>
    </div>
</div>
How to use overflow-x hidden on container and prevent fixed child div overlapping scrollbars?

How to use overflow-x hidden on container and prevent fixed child div overlapping scrollbars?


By : newb
Date : March 29 2020, 07:55 AM
like below fixes the issue How about putting all your content in a container (Besides header per comments):
code :
<div id="header">
    <img src="https://dl.dropboxusercontent.com/s/wypn5e7n5bgeoic/landscape.png?dl=0" alt="Image Not Available"></img>
</div>
<div id="container">
    <div id="wrapper">
        <div id="content">
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
        </div>
        <div id="footer">FOOTER</div>
    </div>
</div>
body, html {
    height:100%;
    width:100%;
    margin:0;
    padding:0;
}
p {
    margin:0;
    padding: 0 0 1em 0;
}
#wrapper {
    height:100%;
    width:100%;
    overflow-x:hidden;
}
#header {
    height:10%;
    background-color: #ffcc00;
}
#content {
    height:80%;
    background-color: #cc00ff;
    padding-bottom:15%;
}
#footer {
    position:fixed;
    bottom:0;
    left:0;
    height:10%;
    background-color: #dd00ff;
    width:100%;
}
CSS - Div to always match container width, even once the container is scrolled horizontally

CSS - Div to always match container width, even once the container is scrolled horizontally


By : Deyvison
Date : March 29 2020, 07:55 AM
With these it helps Javascript could do the trick :) look at the example below. The red div gets its width from the blue divs scrollwidth.
code :
document.getElementById('red').style.width = document.getElementById('blue').scrollWidth + 'px';
<div style="width:calc( 100% - 200px); height:600px; background-color:blue; overflow-x: auto; overflow-y: hidden;" id="blue">

<div style="width:1000px; height:200px; background-color: green;" id="green"></div>

<div style="height:100px; background-color: red;" id="red"></div>

</div>
Overlapping Two DIVS Horizontally

Overlapping Two DIVS Horizontally


By : Lucas Van de Groes
Date : March 29 2020, 07:55 AM
This might help you As far as I can tell you just need to push the red
down a bit. And since you've positioned it absolutely, it's easily done with top:
Related Posts Related Posts :
  • Center the text in a row of an HTML table
  • SVG in Jekyll not showing in browser, but code is
  • Polymer 1.x: How to data bind to a variable boolean attribute?
  • scrolling an element on top of a fixed element
  • Link to pages/home not rendering the way I expect
  • Using Bootstrap's model, .modal-header and .modal-footer not working
  • How can I SIMPLY Toggle/Hide a Menu from sub-menu in AngularJS
  • Using CSS with Bootstrap framework
  • How do I get a html5 file input to accept only certain file types consistently across browsers?
  • Jumbotron BG image resizeable, wont show up
  • Resize images to fit display:flex divs
  • Three layers transparency
  • HTML side by side divs, while one has fixed width and the second one fits remaining space
  • DIV Stacking & Spacing Using CSS
  • How to make space between menu items in CSS/HTML
  • CSS display:flex equal parts
  • Image Caption Hover Animation in html or/and css
  • How can I create an alignment toward the top left corner?
  • Page is showing two scrollbars
  • Z-index issues - How to bring a child element onto the parent's below element?
  • Ingesting videos via bulk uploading into Azure media services from HTML5
  • border-radius with dropdown menu
  • Is there an HTML entity for an info icon?
  • Style two html form text area/inputs on same page differently
  • Bootstrap 3 Grid Layout not respecting blank "Margin" columns?
  • HTML tag with different attributes
  • CSS Clear depending on odd of even amount of items
  • Center div on wrapping (when it doesn't fit on the line)
  • How to remove blank space around SVG
  • Vertical Align Bootstrap Radio Button Image
  • Bootstrap HTML carriage return
  • CSS Checkbox Styling Behaving Differently on Other Pages
  • How to keep a link disable when it's still on the same page
  • How to set both a background colour and a different text color on the same element
  • How to vertically & horizontally center children elements in a fluid layout set by media queries?
  • Layer responsive images on top of each other with Bootstrap
  • Is there a way to hide html inside curly braces in an ASP.NET MVC Razor html helper?
  • Show variable content in bootstrap tooltip
  • How to reference to WIN32 object under MS Windows 7 64bit in VBScript
  • Center inline-block list
  • Background image isn't showing up. Why?
  • CSS Click after transform
  • CSS Button Animation - How to Accomplish?
  • How to find out which favicon a browser actually uses
  • CSS Media Queries Overriding Each other
  • Cycle2 Carousel not working when it's in a DIV
  • HTML to landscape MS Word
  • Reduce the background simultaneously as site reduction - Bootstrap
  • How to set vertical align of elements that exist into a div tag to center with css?
  • I'm resizing an image while scrolling in my website, but i cant figure how to make an animation for the resizing
  • How to style up a hr tag
  • vertical scrolling blocked by Hammer.js
  • Site layout breaks on mobile view
  • I'm missing something in my Head to make the site responsive
  • Fluid/fixed design with sidebar composed of two items
  • Squeeze a div between two other divs when window resizes
  • Short form for expression <label>
  • Align :before with text both with same height
  • Handlebars not populating data after first space in input field
  • CSS3 sprite animation for different size
  • shadow
    Privacy Policy - Terms - Contact Us © animezone.co