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> C H E L S E A 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%;
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 -
: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.box-sizing:border-box;
, this is for margins/padding/borders.display:block;
, unless you've changed them for some reason.position:static
on a lot of elements, which is default. Please research position CSSThis will get you started.