0

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%;
cseaaa
  • 25
  • 4

1 Answers1

0

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%;
    }
}
Rob Scott
  • 7,921
  • 5
  • 38
  • 63
  • thanks so much! this works! except the image is still crashing onto the bio when the browser becomes REALLY large. but guess that wont even be a huge problem... – cseaaa Jun 25 '15 at 07:12
  • I didn't do the image for you b/c I didn't know where you wanted it. also why I posted to review your CSS positioning on that link. – Rob Scott Jun 25 '15 at 10:54
  • Hi rob! thanks so much... i was wondering if you would be so kind to take a look at this problem since it's a similar problem. thanks so much!!!! http://stackoverflow.com/questions/31044433/how-to-keep-a-heading-and-a-set-of-sub-navigations-from-crashing-into-each-other – cseaaa Jun 26 '15 at 07:13