Html Question posted in
Some basic documentation can be found here.

Html – How to prevent a div container from moving while minimize the tab

I have been creating a blog website, but there is an issue. You can see in my code there is a sidebar (red colored), it’s a div container. The problem is when I minimize the chrome tab, the sidebar is overlapping the main content.

You can find code here – https://jsfiddle.net/d4vr01sq/1/

I tried all methods but didn’t solve the issue.

body {
  margin: 0px;
}

#logo {
  width: 100px;
  height: 100px;
  background: red;
  font-size: 64px;
  text-align: center;
  line-height: 100px;
  border-radius: 50px;
  float: left;
  /**-webkit-border-radius: 30px;**/
}

a {
  text-decoration: none;
  color: black;
}

a:hover {
  text-decoration: underline;
}

ul {
  list-style: none;
}

header {
  background: lightskyblue;
  padding: 20px 0;
}

nav {
  display: table;
  height: 100px;
}

nav ul {
  display: table-cell;
  padding: 0 0 0 50px;
  vertical-align: middle;
}

nav ul li {
  float: left;
  padding: 20px;
}

.content {
  width: 980px;
  margin: 0 auto;
}

.clearfix {
  clear: both;
}

#main .articles .inner {
  padding: 20px;
}

#main .articles h2 {
  margin: 0 0 20px;
}

#main {
  background: #ebebeb;
  padding: 40px 0;
}

#main .articles {
  float: left;
  width: 786px;
  background: white;
}

#main .articles .excerpt {
  float: right;
  width: 356px;
}

#main .sidebar {
  float: right;
  width: 260px;
  min-height: 100px;
}

#main .articles .bottom .comments {
  float: right;
}

.sidebar {
  position: absolute;
  top: 40px;
  right: 319px;
  background-color: red;
}

#main {
  position: relative;
}

#main .articles .bottom {
  border-top: 1px solid #999;
  color: #999;
  padding: 20px 0;
  float: left;
  width: 100%;
}

#main .articles .bottom>div {
  float: left;
  padding: 0 20px;
}


/*.bottom {
    display: flex;
    gap: 70px;
}*/
<meta name="viewport" content="width=devive-width, initial-scale=1.0">
<link type="text/css" rel="stylesheet" href="css/blog.css">
<div id="wrapper">
  <header>
    <div class="content">
      <a href="#">
        <div id="logo">SB</div>
      </a>
      <nav>
        <ul>
          <li>
            <a href="blog.html">Home</a>
          </li>
          <li>
            <a href="blog.html">Football</a>
          </li>
          <li>
            <a href="blog.html">Hockey</a>
          </li>
          <li>
            <a href="blog.html">Contact</a>
          </li>
        </ul>
      </nav>
      <div class="clearfix"></div>
    </div>
  </header>
  <div id="main">
    <div class="content">
      <div class="articles">
        <article>
          <div class="inner">
            <a href="post.html">
              <img src="img/jeffrey-f-lin-MslmIpjnCBQ-unsplash.jpg" width="50%" alt="">
            </a>
            <div class="excerpt">
              <h2>
                <a href="post.html">Home team has become the champion</a>
              </h2>
              Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has
              survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with
              desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
            </div>
            <div class="clearfix"></div>
          </div>
          <div class="bottom">
            <div class="date">27.07.2016</div>
            <div class="author">Imtiyaz Shah</div>
            <div class="count">Read 123</div>
            <div class="comments">5 comments</div>
          </div>
        </article>
        <article>
          <div class="inner">
            <a href="post.html">
              <img src="img/jeffrey-f-lin-MslmIpjnCBQ-unsplash.jpg" width="50%" alt="">
            </a>
            <div class="excerpt">
              <h2>
                <a href="post.html">Home team has become the champion</a>
              </h2>
              Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently withcdesktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
            </div>
            <div class="clearfix"></div>
          </div>
          <div class="bottom">
            <div class="date">27.07.2016</div>
            <div class="author">Imtiyaz Shah</div>
            <div class="count">Read 123</div>
            <div class="comments">5 comments</div>
          </div>
        </article>
        <article>
          <div class="inner">
            <a href="post.html">
              <img src="img/jeffrey-f-lin-MslmIpjnCBQ-unsplash.jpg" width="50%" alt="">
            </a>
            <div class="excerpt">
              <h2>
                <a href="post.html">Home team has become the champion</a>
              </h2>
              Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
            </div>
            <div class="clearfix"></div>
          </div>
          <div class="bottom">
            <div class="date">27.07.2016</div>
            <div class="author">Imtiyaz Shah</div>
            <div class="count">Read 123</div>
            <div class="comments">5 comments</div>
          </div>
        </article>
      </div>
      <div class="clearfix"></div>
      <div class="sidebar"></div>
      <div class="clearfix"></div>
    </div>
  </div>
</div>
</div>
Tags:

3

Answers


  1. 0

    A better approach is to remove the position: absolute from the .sidebar,

    then use float: right to position the sidebar properly within the container.

    Also, add margin-right to .articles to ensure they leave space for the sidebar.

    Then use media query to make sure the articles and the sidebar stack vertically on smaller screens.

    And I also added some padding and margin for better spacing

    This is an updated snippet, you can check it out of fiddle again

        body {
      margin: 0px;
    }
    
    a {
      text-decoration: none;
      color: black;
    }
    
    a:hover {
      text-decoration: underline;
    }
    
    ul {
      list-style: none;
    }
    
    .clearfix {
      clear: both;
    }
    
    
    #logo {
      width: 100px;
      height: 100px;
      background: red;
      font-size: 64px;
      text-align: center;
      line-height: 100px;
      border-radius: 50px;
      float: left;
    }
    
    
    header {
      background: lightskyblue;
      padding: 20px 0;
    }
    
    nav {
      display: table;
      height: 100px;
    }
    
    nav ul {
      display: table-cell;
      padding: 0 0 0 50px;
      vertical-align: middle;
    }
    
    nav ul li {
      float: left;
      padding: 20px;
    }
    
    
    .content {
      width: 980px;
      margin: 0 auto;
    }
    
    #main {
      background: #ebebeb;
      padding: 40px 0;
      position: relative;
    }
    
    #main .articles {
      float: left;
      width: 786px;
      background: white;
      margin-right: 280px; /* space for the sidebar */
    }
    
    #main .articles .inner {
      padding: 20px;
    }
    
    #main .articles h2 {
      margin: 0 0 20px;
    }
    
    #main .articles .excerpt {
      float: right;
      width: 356px;
    }
    
    #main .articles .bottom {
      border-top: 1px solid #999;
      color: #999;
      padding: 20px 0;
      float: left;
      width: 100%;
    }
    
    #main .articles .bottom > div {
      float: left;
      padding: 0 20px;
    }
    
    /* Sidebar */
    #main .sidebar {
      float: right;
      width: 260px;
      background-color: red;
      min-height: 100px;
      padding: 20px; /*  this is optional for space */
    }
    
    /*  media query */
    @media (max-width: 768px) {
      #main .articles,
      #main .sidebar {
        float: none;
        width: 100%;
        margin-right: 0;
      }
      #main .sidebar {
        margin-top: 20px;
      }
    }
    <meta name="viewport" content="width=devive-width, initial-scale=1.0">
<link type="text/css" rel="stylesheet" href="css/blog.css">
<div id="wrapper">
  <header>
    <div class="content">
      <a href="#">
        <div id="logo">SB</div>
      </a>
      <nav>
        <ul>
          <li>
            <a href="blog.html">Home</a>
          </li>
          <li>
            <a href="blog.html">Football</a>
          </li>
          <li>
            <a href="blog.html">Hockey</a>
          </li>
          <li>
            <a href="blog.html">Contact</a>
          </li>
        </ul>
      </nav>
      <div class="clearfix"></div>
    </div>
  </header>
  <div id="main">
    <div class="content">
      <div class="articles">
        <article>
          <div class="inner">
            <a href="post.html">
              <img src="img/jeffrey-f-lin-MslmIpjnCBQ-unsplash.jpg" width="50%" alt="">
            </a>
            <div class="excerpt">
              <h2>
                <a href="post.html">Home team has become the champion</a>
              </h2>
              Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has
              survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with
              desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
            </div>
            <div class="clearfix"></div>
          </div>
          <div class="bottom">
            <div class="date">27.07.2016</div>
            <div class="author">Imtiyaz Shah</div>
            <div class="count">Read 123</div>
            <div class="comments">5 comments</div>
          </div>
        </article>
        <article>
          <div class="inner">
            <a href="post.html">
              <img src="img/jeffrey-f-lin-MslmIpjnCBQ-unsplash.jpg" width="50%" alt="">
            </a>
            <div class="excerpt">
              <h2>
                <a href="post.html">Home team has become the champion</a>
              </h2>
              Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently withcdesktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
            </div>
            <div class="clearfix"></div>
          </div>
          <div class="bottom">
            <div class="date">27.07.2016</div>
            <div class="author">Imtiyaz Shah</div>
            <div class="count">Read 123</div>
            <div class="comments">5 comments</div>
          </div>
        </article>
        <article>
          <div class="inner">
            <a href="post.html">
              <img src="img/jeffrey-f-lin-MslmIpjnCBQ-unsplash.jpg" width="50%" alt="">
            </a>
            <div class="excerpt">
              <h2>
                <a href="post.html">Home team has become the champion</a>
              </h2>
              Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
            </div>
            <div class="clearfix"></div>
          </div>
          <div class="bottom">
            <div class="date">27.07.2016</div>
            <div class="author">Imtiyaz Shah</div>
            <div class="count">Read 123</div>
            <div class="comments">5 comments</div>
          </div>
        </article>
      </div>
      <div class="clearfix"></div>
      <div class="sidebar"></div>
      <div class="clearfix"></div>
    </div>
  </div>
</div>
</div>
    Login or Signup to reply.
  2. 0

    In your code, first, remove the float property and use the max-width instead of the custom width because your content size is more than the container here, so when you minimize the tab, the content goes to the outside container.

    Remove the position of the sidebar div and manage both the sidebar and content div using a Flexbox. You can manage the gap between the two divs and manage them vertically as per your requirement. Both divs are set to row-wise. Also, when you need to manage both divs column-wise, just add the flex-wrap: wrap or flex-direction: column property in mobile view.

    Below is the code to fulfill your requirements.

    body {
    margin: 0px;
}

#logo {
    width: 100px;
    height: 100px;
    background: red;
    font-size: 64px;
    text-align: center;
    line-height: 100px;
    border-radius: 50px;
    float: left;
    /**-webkit-border-radius: 30px;**/
}

a {
    text-decoration: none;
    color: black;
}

a:hover {
    text-decoration: underline;
}

ul {
    list-style: none;
}

* {
    box-sizing: border-box;
}

header {
    background: lightskyblue;
    padding: 20px 0;
}

nav {
    display: table;
    height: 100px;
}

nav ul {
    display: table-cell;
    padding: 0 0 0 50px;
    vertical-align: middle;
}

nav ul li {
    float: left;
    padding: 20px;
}

.content {
    width: 100%;
    max-width: 1020px;
    margin: 0 auto;
    padding: 0 20px;
}

.clearfix {
    clear: both;
}

#main .articles .inner {
    padding: 20px;
}

#main .articles h2 {
    margin: 0 0 20px;
}

#main {
    background: #ebebeb;
    padding: 40px 0;
}

#main .articles {
    width: 100%;
    max-width: 786px;
    background: white;
}

#main .articles .excerpt {
    float: right;
    width: 356px;
}

#main .sidebar {
    width: 100%;
    max-width: 260px;
    min-height: 100px;
}

#main .articles .bottom .comments {
    float: right;
}

.sidebar {
    background-color: red;
}

#main {
    position: relative;
}

#main .articles .bottom {
    border-top: 1px solid #999;
    color: #999;
    padding: 20px 0;
    float: left;
    width: 100%;
}

#main .articles .bottom>div {
    float: left;
    padding: 0 20px;
}

.main-content {
    display: flex;
    column-gap: 20px;
    align-items: flex-start;
}
    <div id="wrapper">
    <header>
        <div class="content">
            <a href="#">
                <div id="logo">SB</div>
            </a>
            <nav>
                <ul>
                    <li>
                        <a href="blog.html">Home</a>
                    </li>
                    <li>
                        <a href="blog.html">Football</a>
                    </li>
                    <li>
                        <a href="blog.html">Hockey</a>
                    </li>
                    <li>
                        <a href="blog.html">Contact</a>
                    </li>
                </ul>
            </nav>
            <div class="clearfix"></div>
        </div>
    </header>
    <div id="main">
        <div class="content main-content">
            <div class="articles">
                <article>
                    <div class="inner">
                        <a href="post.html">
                            <img src="img/jeffrey-f-lin-MslmIpjnCBQ-unsplash.jpg" width="50%" alt="">
                        </a>
                        <div class="excerpt">
                            <h2>
                                <a href="post.html">Home team has become the champion</a>
                            </h2>
                            Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has
                            survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with
                            desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
                        </div>
                        <div class="clearfix"></div>
                    </div>
                    <div class="bottom">
                        <div class="date">27.07.2016</div>
                        <div class="author">Imtiyaz Shah</div>
                        <div class="count">Read 123</div>
                        <div class="comments">5 comments</div>
                    </div>
                </article>
                <article>
                    <div class="inner">
                        <a href="post.html">
                            <img src="img/jeffrey-f-lin-MslmIpjnCBQ-unsplash.jpg" width="50%" alt="">
                        </a>
                        <div class="excerpt">
                            <h2>
                                <a href="post.html">Home team has become the champion</a>
                            </h2>
                            Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently withcdesktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
                        </div>
                        <div class="clearfix"></div>
                    </div>
                    <div class="bottom">
                        <div class="date">27.07.2016</div>
                        <div class="author">Imtiyaz Shah</div>
                        <div class="count">Read 123</div>
                        <div class="comments">5 comments</div>
                    </div>
                </article>
                <article>
                    <div class="inner">
                        <a href="post.html">
                            <img src="img/jeffrey-f-lin-MslmIpjnCBQ-unsplash.jpg" width="50%" alt="">
                        </a>
                        <div class="excerpt">
                            <h2>
                                <a href="post.html">Home team has become the champion</a>
                            </h2>
                            Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
                        </div>
                        <div class="clearfix"></div>
                    </div>
                    <div class="bottom">
                        <div class="date">27.07.2016</div>
                        <div class="author">Imtiyaz Shah</div>
                        <div class="count">Read 123</div>
                        <div class="comments">5 comments</div>
                    </div>
                </article>
            </div>
            <div class="sidebar"></div>
        </div>
    </div>
</div>
    Login or Signup to reply.
  3. 0

    You can resolve this issue by using CSS techniques like z-index for Overlap Issues. Ensure the sidebar does not overlap the main content by managing the z-index.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search