samedi 5 avril 2014

CSS - positionnement absolu (avec le conteneur de la position relative) avec une image ou rien sous lui affecte autres divs - Stack Overflow


I don't really even know what my problem is anymore, but I'll try to explain it as best as I can.


Basically what I have is a two column layout. On the left is the content, which at present only contains a h1 and filler text. On the right is the sidebar which should have a div in it (userinfobox).


The header text of the box is supposed to be outside the box a bit so I have the userinfobox position: relative and the header text position: absolute Then, under that inside the box, there is a 150x150 image and then some more text below that.


Here's the HTML:


<!-- Main Content -->
<div id="contentwrapper" role="presentation">
    <div id="content" role="main">
        <h1>Header</h1>
        Content <a href="#">link</a>
    </div> <!-- content div -->

    <!-- Sidebar -->
    <div id="sidebar" role="complementary">
        <div id="userinfobox">
            <p id="header">User Info</p>
           <div id="userinfo">
           <div id="avatar"><img src="" id="tag" alt="tag" /></div>
            <p class="username">Username #</p>
            <p id="icons">Icons</p>
            <p id="membersonline"><a href="membersonline.php">Online Members (#)</a></p></div>
        </div> <!-- userinfo div -->
</div> <!-- userinfobox div -->
    </div> <!-- sidebar div -->
</div> <!-- contentwrapper div -->

And then the CSS


    /* Main Content */

     #contentwrapper {
        min-height: 400px;
        height: 100%;
        position: relative;
        display: table;
        font-size: 1em;
    }

    #content {
        width: 669px;
        height: 100%;
        padding: 20px;
        position: relative;
        display: table-cell;
        background-color: #F7F8F7;
        text-align: left;   
    }

    #content h1 {
        margin-bottom: 20px;
        font-size: 2.75em;
        line-height: 1em;
    }

    /* Sidebar */

    #sidebar {
        width: 234px;
        height: 100%;
        padding: 20px;
        position: relative;
        color: #0D130D;
        background-color: #FDEBCF;
        display: table-cell;
        text-align: center;
 }
 #sidebar p#header {
    position: absolute;
    top: -10px;
    font-size: 1.5em;
    line-height: 1em;
    text-align: left;
    overflow: hidden;
}

#sidebar p {
    max-width: 214px;
    margin: 0 auto;
    text-align: center;
    overflow: hidden;
}

/* Logged In Sidebar */

#userinfobox {
    width: 214px;
    max-width: 214px;
    padding: 10px;
    position: relative;
    background-color: #F7F8F7;
}

#avatar, #tag, #userinfo {
    margin: 0 auto;
    position: relative;
    display: block;
    outline: 1px solid #000;
    overflow: hidden;
}

#avatar, #tag {
    width: 150px!important;
    height: 150px!important;
}

That should be working, I don't see any reason why it wouldn't be; actually it is working, the sidebar anyway is doing what it's supposed to. But sometimes it pushes down the content (currently the h1 and two words of text), almost to where the bottom of the 150x150 image would be.


I'll attempt to list the conditions that cause it to do this:


It does not work when:



  • the avatar div is completely empty and the header is position: absolute


  • the image has a src and the header is position: absolute



But, it does works when (seemingly regardless of absolute positioning of the header):



  • the src of the image is empty


  • there is no image, just text, in the avatar div (ie. just text in the entire userinfo div)


  • the userinfo div is completely empty



I just don't understand how it's affecting something in a completely different div. Every place I've tried to search about this just talked about how absolutely positioned elements inside a relatively positioned element won't affect anything outside and how to use them. Also, this is a fixed width setup, so it's not like the width is changing at all; it is also not based on percent.




Since your #content div is using display:table-cell;, you must also apply vertical-align:top; to prevent your content from centering:


http://jsfiddle.net/R8zAw/3/


#content {
  width: 669px;
  height: 100%;
  padding: 20px;
  padding-top: 0;
  position: relative;
  display: table-cell;
  background-color: #F7F8F7;
  text-align: left;
  border-bottom-left-radius: 5px;
  vertical-align: top; /* add this */
}


I don't really even know what my problem is anymore, but I'll try to explain it as best as I can.


Basically what I have is a two column layout. On the left is the content, which at present only contains a h1 and filler text. On the right is the sidebar which should have a div in it (userinfobox).


The header text of the box is supposed to be outside the box a bit so I have the userinfobox position: relative and the header text position: absolute Then, under that inside the box, there is a 150x150 image and then some more text below that.


Here's the HTML:


<!-- Main Content -->
<div id="contentwrapper" role="presentation">
    <div id="content" role="main">
        <h1>Header</h1>
        Content <a href="#">link</a>
    </div> <!-- content div -->

    <!-- Sidebar -->
    <div id="sidebar" role="complementary">
        <div id="userinfobox">
            <p id="header">User Info</p>
           <div id="userinfo">
           <div id="avatar"><img src="" id="tag" alt="tag" /></div>
            <p class="username">Username #</p>
            <p id="icons">Icons</p>
            <p id="membersonline"><a href="membersonline.php">Online Members (#)</a></p></div>
        </div> <!-- userinfo div -->
</div> <!-- userinfobox div -->
    </div> <!-- sidebar div -->
</div> <!-- contentwrapper div -->

And then the CSS


    /* Main Content */

     #contentwrapper {
        min-height: 400px;
        height: 100%;
        position: relative;
        display: table;
        font-size: 1em;
    }

    #content {
        width: 669px;
        height: 100%;
        padding: 20px;
        position: relative;
        display: table-cell;
        background-color: #F7F8F7;
        text-align: left;   
    }

    #content h1 {
        margin-bottom: 20px;
        font-size: 2.75em;
        line-height: 1em;
    }

    /* Sidebar */

    #sidebar {
        width: 234px;
        height: 100%;
        padding: 20px;
        position: relative;
        color: #0D130D;
        background-color: #FDEBCF;
        display: table-cell;
        text-align: center;
 }
 #sidebar p#header {
    position: absolute;
    top: -10px;
    font-size: 1.5em;
    line-height: 1em;
    text-align: left;
    overflow: hidden;
}

#sidebar p {
    max-width: 214px;
    margin: 0 auto;
    text-align: center;
    overflow: hidden;
}

/* Logged In Sidebar */

#userinfobox {
    width: 214px;
    max-width: 214px;
    padding: 10px;
    position: relative;
    background-color: #F7F8F7;
}

#avatar, #tag, #userinfo {
    margin: 0 auto;
    position: relative;
    display: block;
    outline: 1px solid #000;
    overflow: hidden;
}

#avatar, #tag {
    width: 150px!important;
    height: 150px!important;
}

That should be working, I don't see any reason why it wouldn't be; actually it is working, the sidebar anyway is doing what it's supposed to. But sometimes it pushes down the content (currently the h1 and two words of text), almost to where the bottom of the 150x150 image would be.


I'll attempt to list the conditions that cause it to do this:


It does not work when:



  • the avatar div is completely empty and the header is position: absolute


  • the image has a src and the header is position: absolute



But, it does works when (seemingly regardless of absolute positioning of the header):



  • the src of the image is empty


  • there is no image, just text, in the avatar div (ie. just text in the entire userinfo div)


  • the userinfo div is completely empty



I just don't understand how it's affecting something in a completely different div. Every place I've tried to search about this just talked about how absolutely positioned elements inside a relatively positioned element won't affect anything outside and how to use them. Also, this is a fixed width setup, so it's not like the width is changing at all; it is also not based on percent.



Since your #content div is using display:table-cell;, you must also apply vertical-align:top; to prevent your content from centering:


http://jsfiddle.net/R8zAw/3/


#content {
  width: 669px;
  height: 100%;
  padding: 20px;
  padding-top: 0;
  position: relative;
  display: table-cell;
  background-color: #F7F8F7;
  text-align: left;
  border-bottom-left-radius: 5px;
  vertical-align: top; /* add this */
}

0 commentaires:

Enregistrer un commentaire