如何在减小浏览器大小时停止到右侧的文章 div 而不会崩溃到左侧 div？

Question

请帮我阻止右边的 div 撞到左边的 div。你可以在这个网站上看到：http://chelseachendesigns.com/About.html 从右侧最小化 scrn，然后崩溃....

<body>
<div id="wrapper">
  <header id="top">
    <h1> &nbsp;C H E L S E A &nbsp; C H E N </h1>
  </header>
</div>
<article id="bio">
    xxx
</article>
<div id="resume">
  xxx
 </div>



#bio {
    font-family: gruppo;
    font-style: normal;
    font-weight: 400;
    color: rgba(50,50,50,1.00);
    position: static;
    display: block;
    margin-top: 1%;
    font-size: 100%;
    text-align: left;
    margin-left: 5%;
    float: left;
    margin-right: 62%;
    overflow-x: hidden;
    overflow-y: hidden;
    clear: none;
}
body {
}
#flotus img {
    margin-left: 5%;
    left: auto;
    visibility: inherit;
    display: block;
    margin-top: -15%;
    position: static;
    float: left;
    width: 30%;
    height: auto;
}
#flotus {
    position: static;
    margin-top: -9px;
    float: none;
}
#resume {
    position: static;
    float: none;
    font-family: gruppo;
    font-style: normal;
    font-weight: 400;
    white-space: pre;
    display: block;
    margin-left: 58%;
    overflow-x: hidden;
    overflow-y: hidden;
    font-size: 100%;
    margin-right: 5%;
    margin-top: 0%;

Answer 1

首先，您需要学习响应式框架，例如 boostrap，或者使用您自己的媒体查询。此外，您还有大量不需要的 CSS，您的 HTML 需要大量工作。

尽管如此-

当您使用浮点数时，最好用 :after 伪元素。这消除了额外空的需要元素。浮动也应该应用一些宽度。方式您使用的是负边距，这没有意义。
始终使用box-sizing:border-box;，这是为了 margins/padding/borders.
块级元素不需要 display:block;，除非你出于某种原因更改了它们。
您在很多元素上设置了 position:static，这是默认设置。请研究 position CSS

这会让你入门。

<div id="wrapper">
    <article id="bio" class="font-style"></article>
    <div id="resume" class="font-style"></div>
</div>

* {
    box-sizing: border-box;
}

#wrapper:after {
    clear: both;
    display: table;
    content: "";
}

.font-style {
    font-family: gruppo;
    font-style: normal;
    font-weight: 400;
}

#bio {

    color: rgba(50,50,50,1.00);
    margin-top: 1%;
    text-align: left;
    float: left;
    width: 40%;
    padding: 2%;
}
#resume {
    float: left;
    width: 50%;
    text-align: right;
    white-space: pre;
    font-size: 100%;
    margin-right: 5%;
    margin-top: 0%;
}

@media (max-width:768px) {  /* or some other cut off width */
    #bio,
    #resume {
        float: none;
        width: 100%;
    }
}

如何在减小浏览器大小时停止到右侧的文章 div 而不会崩溃到左侧 div？

How to Stop to the article div on the right side from crashing into the left divs when decreasing the browser size?

css

floating