Bill Fisher Bill Fisher - 3 months ago 13
CSS Question

HTML/CSS: Div elements not functioning as intended

I'm new to web development and I was working on a portfolio page for Freecodecamp. The problem I have right now is in regards to

div
elements. At the bottom of my HTML code there is a
div
element (ie
background-color: #00dfff
) that is not functioning the way I intended. No matter what I do in regards to debugging, when I run the code the last
div
element either shows up behind my second
div
element or within my third
div
element. Could someone help me find my error/bug?



<html>
<body>
<div style= "width:250px; height: 50px; margin: 0 auto; background-color:#1DCB9E; color:white;" >
<h1 align="center"> William Fisher</h1>
</div>
<div style= "float:left; width:1000px; height: 320px; margin: 0 auto; margin-top: 20px; margin-left: 50px; background-color:#1DCB69; color:white; "> <img class="pic-one" align="right" src="https://s10.postimg.org/7aewtk3kp/Bill_in_China_One.jpg">
<h2 align="center"> Chinese > English Translator (And an Aspiring Computer Scientist) </h2>
<p style="font-size:22px;"> Hello! My name is William and I am a part-time Chinese to English translator who has worked with companies such as Gengo and Yeeyan. I have a broad range of experience in translating projects such as documentary scripts, brochures, government documents, questionnaires, business correspondence, and academic articles. I am currently a student at UNCA and I am studying Computer Science. I hope to enter the field of Natural Language Processing in the future and apply my knowledge to the development of machine translation applications. </p>
</div>
<div style= "float:right; width:1000px; height: 375px; margin: 0 auto; margin-top: 20px; margin-right: 50px; background-color:#CB1D54; color:white;">
<h2 align="center"> Chinese to English Translation Portfolio </h2>
<div><a href="https://docs.google.com/document/d/1J2noa4KbzNh_fT2uPXd0Qp3Z1eWcuBxzOALuQ7_8j0k/edit?usp=sharing"><img src="https://s9.postimg.org/6ov06a80f/Screenshot_3.png" width="25%" height="25%" style="float:left; margin-right:5px; margin-left: 120px;"></a> </div>
<div><a href="https://docs.google.com/document/d/1IsG6BiUluUpVgaM71V8LaXH_qd3kJmNMnWBVZDIhL1U/edit?usp=sharing"><img src="https://s10.postimg.org/vpn50j48p/Screenshot_4.png" width="25%" height="25%" style="float:left; margin-right: 5px;"></a> </div>
<div><a href="https://docs.google.com/document/d/1__BtIme5S2Yb0r_d1vUiFzr1pdfUv8TFktc-vt-hdg0/edit?usp=sharing"><img src="https://s10.postimg.org/itypbit3d/Screenshot_5.png" width="25%" height="25%" style="float:left; margin-right: 5px;"></a> </div>
<div><a href="https://docs.google.com/document/d/1TWDKbVfO3cG1ifDhBPRbRMoAxcedwIsoGcfAebkVn_I/edit?usp=sharing"><img src="https://s10.postimg.org/e44jb4v21/Screenshot_6.png" width="25%" height="25%" style="float:left; margin-left: 200px; margin-top: 5px; margin-right: 5px;"></a> </div>
<div><a href="https://docs.google.com/document/d/1zDFcgxvxa1382ER-Z7RjU4SPdlpGYRIsG9dXXxWgnFg/edit?usp=sharing"><img src="https://s9.postimg.org/cwrr7srtb/Screenshot_7.png" width="25%" height="25%" style="float:left; margin-left: 100px; margin-top: 5px;"></a> </div>
</div>
<div style="width:100%; height: 200px; background-color: #00dfff"> </div>
</body>
</html>




Answer

Cause you need to clear both side of floating divs before that: like http://codepen.io/bra1N/pen/rrBkxd

<div style="clear: both"></div>
Comments