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

Question

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

455 views Asked by cseaaa At 25 June 2015 at 01:02

Pls help me to stop the right div from crashing into the left divs. you can see on this website: http://chelseachendesigns.com/About.html minimize the scrn from the right side and here comes the crashing....

<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%;

Original Q&A

There are 1 answers

**Rob Scott** · Accepted Answer · 2015-06-25 02:42:03

For one, you need to either learn a responsive framework, such as boostrap, or use your own media queries. Also you have tons of un-needed CSS, and your HTML needs a lot of work.

Nonetheless -

When you're using floats, it's a good thing to clear them with an :after psuedo element. This takes away the need for extra empty elements. Also floats should have some width applied to them. The way you were using them was negative margins, which didn't make sense.
Always use box-sizing:border-box;, this is for margins/padding/borders.
Block level elements don't need display:block;, unless you've changed them for some reason.
You had position:static on a lot of elements, which is default. Please research position CSS

This will get you started.

<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%;
    }
}

TechQA.

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

There are 1 answers

Related Questions in CSS

Related Questions in FLOATING

Popular Questions

Popular Tags

Trending Questions