I am familiar with HTML/CSS but am not advanced by any means.
I am having difficulty styling my form element.
I want to add padding around my form however whenever I do this is only pads the top and the left
The other issue is that when I re-size the window really small the form tag seems to protrude out of the
I would like to know what the proper way to do this is.
Also, if you could look over my simple code and let me know if there is a better/more standard way to do what I am trying to do here.
* {
box-sizing: border-box;
font-size: 15px;
margin: 0;
}
body {
padding: 5%;
}
section {
height: 100%;
float: left;
position: relative;
}
div {} .left-section {
width: 25%;
}
.right-section {
width: 75%;
}
.body-left {
background-color: #000000;
height: 93%;
}
.body-right {
background-color: #DCDCDC;
height: 86%;
}
.header {
background-color: #808080;
height: 7%;
}
.footer {
background-color: #808080;
height: 7%;
width: 100%;
position: absolute;
padding: 5px;
}
form {
position: absolute;
height: 100%;
width: 100%;
display: block;
}
input {
background-color: #808080;
border-style: solid;
border-width: small;
border-color: #555555;
border-radius: 5px;
position: absolute;
padding: 10px;
left: 0;
height: 80%;
width: 90%;
top: 50%;
transform: translateY(-50%);
}
button {
background-color: #808080;
border-style: solid;
border-width: small;
border-color: #555555;
border-radius: 5px;
height: 80%;
width: 10%;
position: absolute;
color: #555555;
top: 50%;
right: 0;
transform: translateY(-50%);
}
<html>
<head>
<title>whisper</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<section id="left" class="left-section">
<div id="header_left" class="header">
</div>
<div id="body_left" class="body-left">
<ol id="users"></ol>
</div>
</section>
<section id="right" class="right-section">
<div id="header_right" class="header">
</div>
<div id="body_right" class="body-right">
<ol id="messages"></ol>
</div>
<div id="footer" class="footer">
<form id="form_id" action="#">
<input id="user_input" />
<button id="btn_id">send</button>
</form>
</div>
</section>
</body>
</html>
P.S. I have checkout this page but I couldn't find a sufficient answer.
I do not know if this helps but I switched the padding of 5 pixels from the footer class to the form styling.
.footer {
background-color: #808080;
height: 7%;
width: 100%;
position: absolute;
}
form {
position: absolute;
height: 100%;
width: 100%;
display: block;
padding: 5px;
}
Related
This is the first site I've made, and I'm just struggling with a few things. Let me explain the issues.
I have a screen with a resolution of 1366 X 768, which I have designed on, and it looks great there. However, when I move it over to my larger screen(2560X1080), several elements shift around and it looses the design that I intended. How do I set a max resolution? I've tried, but nothing seems to work.
I have a table set up half way down my page, and I can NOT get them to align horizontally. I probably just have too much code, and it's made a mess somehow.
Help appreciated.
body {
margin: 0 auto;
font-family: Arial, Helvetica, sans-serif;
width: 70%;
height: 2000px;
padding-top: 100px;
max-width: 900px;
}
div#wrapper {
max-width: 1000px;
margin: 0 auto;
box-shadow: 0 0 10px #777;
}
.top {
border: solid 1px black;
margin: 0 auto;
width: 100%;
padding: ;
height: 200px;
}
h1 {
color: #cc4f41;
text-decoration: ;
}
div {
display: block;
height: 225px;
}
.headertext {
font-size: 25px;
float: right;
margin-top: 30px;
margin-left: 50px;
}
.japanname {
margin-left: 600px;
margin-top: 30px;
position: absolute;
float: left;
font-size: 30px;
}
.rank {
float: left;
margin-left: 50px;
position: absolute;
margin-top: 115px;
margin-left: 550px;
font-size: 10px;
}
.container {
position: relative;
width: 80%;
}
.logoimage {
height: auto;
margin-left: 2%;
float: left;
padding-left: 100px;
height: 200px;
width: 200px;
display: flex;
flex-direction: row;
}
.overlay {
position: absolute;
bottom: 0;
left: 0;
right: 0;
background-color: ;
overflow: hidden;
width: 30%;
height: 100%;
transform: scale(0);
transition: .3s ease;
}
.container:hover .overlay {
transform: scale(1);
}
.text {
color: #cc4f41;
font-family: permanent marker;
font-size: 20px;
position: absolute;
top: 70%;
left: 50%;
transform: translate(-50%, -50%);
text-align: center;
}
/* basic info box*/
.info {
margin: 0 auto;
max-width: 900px;
padding-top: 17%;
height: 600px;
border-radius: 100%;
background-image: ;
}
.whois {
font-size: 40px;
margin-left: 18%;
margin-top: 5%;
color: #ebd234;
position: absolute;
font-kerning: auto;
line-height: 35px;
font-family: permanent marker;
}
.infopara {
margin-left: 15%;
margin-right: 50%;
margin-top: 170px;
position: absolute;
font-size: 12px;
}
.fullbody {
position: absolute;
float: right;
margin-left: 33%;
max-width: 25%;
}
.hw {
margin-top: 120px;
margin-left: 470px;
height: 30px;
position: absolute;
border: 2px #cc4f41 dotted;
border-radius: 40%;
padding: 20px;
font-size: 14px;
}
.infotable {
position: absolute;
margin-top: 350px;
margin-left: 100px;
padding: 10px;
text-align: center;
table-layout: fixed;
width: 300px;
}
.infotable th {
font-size: 20px;
color: #cc4f41;
border-bottom: 2px solid #cc4f41;
}
/*abilities*/
.abilities {
height: 600px;
margin: 0 auto;
}
.head2 {
font-size: 30px;
margin-left: 70px;
margin-top: 33px;
height: 50px;
}
.glove {
position: absolute;
max-width: 10%;
}
.abhead {
position: absolute;
margin-left: 75px;
font-size: 20px;
font-style: oblique;
}
.twocolumn {
width: 45%;
display: inline-block;
height: 400px;
padding-top: 5%;
padding-left: 25px;
border: 5px solid black;
border-radius: 30%;
}
.dot2 {
position: absolute;
width: 15%;
opacity: 50%;
}
/*disciples*/
.disciple {
background-color: black;
height: 500px;
}
.genos {
position: absolute;
color: white;
margin-top: 5%;
max-width: 35%;
}
.head3 {
font-size: 30px;
margin-left: 80%;
padding-top: 3%;
height: 50px;
color: white;
}
.h3 {
color: white;
position: absolute;
font-size: 40px;
margin-left: 25%;
margin-top: 20%;
font-family: permanent marker;
}
.discp {
color: white;
margin-left: 37%;
padding-top: 36%;
padding-right: 10%;
font-size: 12px;
}
<html>
<head>
<link rel="stylesheet" href="css/style.css">
<title>Saitama</title>
<link href="https://fonts.googleapis.com/css2?family=Permanent+Marker&display=swap" rel="stylesheet">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<!-- top box -->
<div class="top">
<div class="container">
<img src="img/closeupface.png" style="float:left" class="logoimage">
<div class="overlay">
<div class="text">Just a hero for fun</div>
</div>
<div class="headertext" style="float:right">
<h1>Saitama</h1>
</div>
<div class="japanname">サイタマ</div>
<div class="rank">B-Class: Rank 7</div>
</div>
</div>
<!-- basic info box -->
<div class="info">
<div class="whois">WHO IS
<BR> HE?</div>
<div class="infopara" align="center">The main protagonist of the series and the titular One-Punch Man and the most powerful being to exist in the series. Saitama faces a self-imposed existential crisis, as he is now too powerful to gain any thrill from battle.</div>
<table class="infotable">
<tr>
<th>AGE</th>
<th>GENDER</th>
<th>JOB</th>
</tr>
<tr>
<td>25</td>
<td>Male</td>
<td>Hero</td>
</tr>
</table>
<div class="hw" style="float:right">175cm<br>70kg</div>
<img src="img/fullbody.png" style="float:right " class="fullbody">
</div>
<br><br><br>
<!-- abilities -->
<div class="abilities">
<img src="img/glove-01.png" class="glove">
<div class="head2">ABILITIES</div>
<!-- color for background : #ebd234 -->
<div class="twocolumn" style="background-color: #ebd234">
<div class="abhead">Unparalleled Strength</div><br><br><br>
<div class="abhead">Enhanced Leap</div><br><br><br>
<div class="abhead">Shockwave Generation</div><br><br><br>
<div class="abhead">Air Manipulation</div><br><br><br>
<div class="abhead">Non-physical interaction</div><br><br><br>
<div class="abhead">Unparalleled Speed & Reflexes</div><br><br><br>
<div class="abhead">Immeasurable Dexterity</div>
</div>
<div class="twocolumn" style="background-color: #cc4f41">
<div class="abhead">Immeasurable Agility</div><br><br><br>
<div class="abhead">Immense Stamina</div><br><br><br>
<img src="img/face-01.png" class="dot2">
<div class="abhead">Invulnerability</div><br><br><br>
<div class="abhead">Enhanced Lung Capacity</div><br><br><br>
<div class="abhead">Vacuum Adaptation</div><br><br><br>
<div class="abhead">Temperature Immunity</div><br><br><br>
<div class="abhead">Pain Suppression</div><br><br><br>
</div>
</div>
<br><br>
<!-- disciples -->
<div class="disciple">
<div class="head3">DISCIPLES</div>
<img src="img/genos.png" class="genos">
<div class="h3">GENOS</div>
<div class="discp"> The deuteragonist of One-Punch Man. He is a 19-year-old cyborg and the disciple of Saitama. He is always aiming to become more powerful and fights for justice. Under the Hero Association, he is given the name Demon Cyborg and is currently S-Class
Rank 14.</div>
</div>
</body>
</html>
As #MaxiGui suggest always try to use relative units like rem,em,vh,vw if you want to create a responsive website. use px only in the case where you are certain that the height and width is not going to change irrespective of the screen dimension.
You have used fixed value for some margin, height and width try to remove them and then it will work
I've taken up interest in HTML/CSS Coding as of late and have run into a problem very quickly that I cant seem to solve or properly understand based on other answered questions similar to mine.
My positioning is based off pixels when it should be percent?
How to get my elements and pictures to stop rescaling as the browser shrinks, have it simply cut off like in near every website?
How do I choose between Absolute and Relative positioning?
Here's my HTML&CSS:
body {
font-family: "Courier New", Courier, monospace;
background: linear-gradient(to bottom, #1D4350 , #A43931);
background-attachment: scroll;
}
html, body, #wrapper {
min-width: 100%;
min-height: 100%;
}
#content {
height: 1200px;
}
.Octagon {
color: #2aa186;
text-align: center;
line-height: 30%;
margin-top: 25px;
}
.LT {
text-align: center;
color: #3a5454;
line-height: 0%;
font-style: italic;
}
.boi {
cursor: pointer;
margin-right: 30px;
padding: 8px 18px;
border: 1px solid #204156;
border-color: #52AEC9;
color: #52AEC9;
position: absolute;
top: 8px;
right: 16px;
}
.boi:active {
top: 2px;
}
.iob {
cursor: pointer;
margin-left: 30px;
padding: 8px 18px;
border: 1px solid #204156;
border-color: #52AEC9;
color: #52AEC9;
position: absolute;
top: 8px;
}
.boi:active,
.iob:active {
top: 2px;
}
#manyarms {
position: absolute;
margin-top: 30px;
margin-left: 31px;
width: 310px;
height: 250px;
}
#sensible {
position: absolute;
margin-top: 30px;
margin-right: 31px;
width: 310px;
height: 250px;
right: 10px;
}
#verr {
position: absolute;
margin-left: 31px;
margin-top: 285px;
color: #6458b7;
}
#special {
position: absolute;
left: 77.9%;
top: 50%;
color: #6458b7;
}
.boi:hover,
.iob:hover {
text-shadow: 0 0 10px #a193ff;
}
#footer {
padding-left: 95%;
}
<html>
<head>
<title>The Pragmatic Octopus</title>
<meta charset="utf-8"/>
<link rel='stylesheet' href='style.css'/>
<script src='script.js'></script>
</head>
<body>
<div id="wrapper">
<div id="header">
<h1 class="Octagon">The Pragmatic Octopus</h1>
<p class="LT">Lee Townsend</p>
<a href="www.google.com">
<p class="boi">Contact</p>
</a>
<a href="www.google.com">
<p class="iob">Information</p>
</a>
</div>
<div id="content">
<img src="https://s32.postimg.org/406x38nlh/imageedit_1_3827627792 .jpg" alt="mmm~" id="manyarms">
<img src="http://www.wonderslist.com/wp-content/uploads/2014/07/Blue-ringed-octopus.jpg" alt="~mmm" id="sensible">
<p id="verr">Here comes a very special boi!</p>
<p id="special">He loves to pose for photos!</p>
</div>
<div id="footer">
© Hecc
</div>
</div>
</body>
</html>
Either fix my code to what is desired (I'll just see what you did and understand it) or explain what I need do.
Whatever you do, thank you for reading and/or assisting.
You could change min-width: 100%; to min-width: 1000px; in html, body, #wrapper to set the min page width to 1000px. this will make the browser add a scrollbar when the window width is below 1000px.
Only applying min-width: 1000px; to html, body, #wrapper will not work for you since you also used absolute positioning. To fix this add position: relative; to #wrapper.
Why do we need to add position: relative; to #wrapper?
Absolute positioned elements will always position based on the first parent that has position: relative;. If none has this rule, it will just position based on the body. (https://developer.mozilla.org/de/docs/Web/CSS/position)
To learn more about position relative and absolute refer to: https://css-tricks.com/absolute-positioning-inside-relative-positioning/
With those changes being made, your website will stop scaling when the browser window reaces < 1000px in width. Ofc you can change the 1000px to any width you want.
body {
font-family: "Courier New", Courier, monospace;
background: linear-gradient(to bottom, #1D4350 , #A43931);
background-attachment: scroll;
}
html, body, #wrapper {
min-width: 1000px;
min-height: 100%;
}
#wrapper {
position: relative;
/* max-width: 1200px; Edit 1 */
}
#content {
height: 1200px;
}
.Octagon {
color: #2aa186;
text-align: center;
line-height: 30%;
margin-top: 25px;
}
.LT {
text-align: center;
color: #3a5454;
line-height: 0%;
font-style: italic;
}
.boi {
cursor: pointer;
margin-right: 30px;
padding: 8px 18px;
border: 1px solid #204156;
border-color: #52AEC9;
color: #52AEC9;
position: absolute;
top: 8px;
right: 16px;
}
.boi:active {
top: 2px;
}
.iob {
cursor: pointer;
margin-left: 30px;
padding: 8px 18px;
border: 1px solid #204156;
border-color: #52AEC9;
color: #52AEC9;
position: absolute;
top: 8px;
}
.boi:active,
.iob:active {
top: 2px;
}
/* Edit 2 */
#wrapperForTheFirstImage {
position: absolute;
margin-top: 30px;
margin-left: 31px;
width: 310px;
height: 250px;
}
#wrapperForTheSecondImage {
position: absolute;
margin-top: 30px;
margin-right: 31px;
width: 310px;
height: 250px;
right: 10px;
}
/* Removed
#manyarms {
position: absolute;
margin-top: 30px;
margin-left: 31px;
width: 310px;
height: 250px;
}
#sensible {
position: absolute;
margin-top: 30px;
margin-right: 31px;
width: 310px;
height: 250px;
right: 10px;
} */
#verr {
/*position: absolute;
margin-left: 31px;
margin-top: 285px;*/
color: #6458b7;
}
#special {
/*position: absolute;
left: 77.9%;
top: 50%;*/
color: #6458b7;
}
/* Edit 2 END */
.boi:hover,
.iob:hover {
text-shadow: 0 0 10px #a193ff;
}
#footer {
padding-left: 95%;
}
<html>
<head>
<title>The Pragmatic Octopus</title>
<meta charset="utf-8"/>
<link rel='stylesheet' href='style.css'/>
<script src='script.js'></script>
</head>
<body>
<div id="wrapper">
<div id="header">
<h1 class="Octagon">The Pragmatic Octopus</h1>
<p class="LT">Lee Townsend</p>
<a href="www.google.com">
<p class="boi">Contact</p>
</a>
<a href="www.google.com">
<p class="iob">Information</p>
</a>
</div>
<div id="content">
<!-- Edit 2 -->
<div id="wrapperForTheFirstImage">
<img src="https://s32.postimg.org/406x38nlh/imageedit_1_3827627792 .jpg" alt="mmm~">
<p>Here comes a very special boi!</p>
</div>
<div id="wrapperForTheSecondImage">
<img src="http://www.wonderslist.com/wp-content/uploads/2014/07/Blue-ringed-octopus.jpg" alt="~mmm">
<p>He loves to pose for photos!</p>
</div>
<!-- Edit 2 END -->
</div>
<div id="footer">
© Hecc
</div>
</div>
</body>
</html>
Edit 1:
Added max-width to #wrapper to provide an example for (if i understand correctly):
What do I need to do for proper positioning if somebody looks at this
with a higher pixel count screen?
Edit 2:
I think i know what u want now. Consider wrapping your <img> and <p> inside a div and position the div and not the img and the p tag separately.
I just updated the source to provide an example. (and removed the max-width thing)
Please see the below code and screenshot. Can anyone please explain why there are white gaps between the divs and how to remove them? I would like the divs sit next to one another without any margin between them
![
<!DOCTYPE html>
<html>
<head>
<style>
body {
color: #b3b3b3;
font-family: arial;
font-size: 14pt;
}
#containerdiv {
width: 1184px;
height: 626px;
position: absolute;
margin-top: -338px;
margin-left: -552px;
top: 50%;
left: 50%;
}
#centerdiv {
display: inline-block;
width: 1024px;
height: 576px;
background-color: #fff;
}
#lowercenterdiv {
background-color: #ff00ff;
width: 1024px;
height: 50px;
text-align: center;
line-height: 50px;
display: inline-block;
}
#lowerleftdiv {
background-color: #00ff00;
width: 80px;
height: 50px;
line-height: 50px;
position: absolute;
}
#leftdiv {
position: absolute;
background-color: #ff000f;
width: 80px;
height: 576px;
display: inline-block;
line-height: 576px;
}
#rightdiv {
position: absolute;
background-color: #000fff;
width: 80px;
height: 576px;
display: inline-block;
line-height: 576px;
text-align: right;
}
#lowerrightdiv {
position: absolute;
background-color: #fff000;
width: 80px;
height: 50px;
text-align: right;
display: inline-block;
line-height: 50px;
}
.arrowimg img {
vertical-align: middle;
}
</style>
</head>
<body>
<div id="containerdiv">
<div id="leftdiv"><img class="arrowimg" src="leftarrow.png"></div>
<div id="centerdiv">
</div>
<div id="rightdiv"><img class="arrowimg" src="rightarrow.png"></div>
<div id="lowerleftdiv">?</div>
<div id="lowercenterdiv">?</div>
<div id="lowerrightdiv">?</div>
</div>
</body>
</html>
You could try to remove all your position: absolutes, as they make things complicated. What you want is: three boxes next to each other, then three boxes next to each other below it. If you float them to the left, you solve this problem. I have amended your CSS, just copy and paste and you can see the gaps disappear because floating elements don't care about whitespaces. There are other difficulties involved with floating, but it does solve your problem.
I have also removed everything I didn't need to get my point across.
#containerdiv {
width: 1184px;
height: 626px;
position: absolute;
margin-top:-338px;
margin-left:-552px;
top:50%;
left:50%;
}
// I added this to float all the divs inside your container to float
#containerdiv div {
float: left;
}
#centerdiv {
// I removed position: absolute from every box, as well as line-heights, align and display
width: 1024px;
height: 576px;
background-color: #fff;
}
#lowercenterdiv {
background-color: #ff00ff;
width: 1024px;
height: 50px;
text-align:center;
}
#lowerleftdiv {
background-color: #00ff00;
width: 80px;
height: 50px;
}
#leftdiv {
background-color: #ff000f;
width: 80px;
height: 576px;
}
#rightdiv {
background-color: #000fff;
width: 80px;
height: 576px;
}
#lowerrightdiv {
background-color: #fff000;
width: 80px;
height: 50px;
}
Add this to your css:
* {
margin: 0;
padding: 0;
}
This is a weird thing in how html is interpreted. The whitespace between the divs is rendered as a space. There are many ways to solve this, and none of them are very pretty.
One way is like this:
<div id="leftdiv">
<img class="arrowimg" src="leftarrow.png">
</div>
<div id="centerdiv">
</div>
<div id="rightdiv">
<img class="arrowimg" src="rightarrow.png">
</div>
<div id="lowerleftdiv">
?
</div>
<div id="lowercenterdiv">
?
</div>
<div id="lowerrightdiv">
?
</div>
Hope its fix
{
margin: 0;
padding: 0;
border-sizing: border-box;
}
i'm trying to recreate this image in pure html and css, or add a little javascript if nessascary:
and here's what i have so far:
i'm trying to move that small orange box near the center up to match the blue line, but she won't budge
.middletop {
position: absolute;
background-color: #fe9800;
width: 26px;
height: 16px;
left: 471px;
}
and here's the entire code:
layout.html
<html>
<head>
<title>LCARS</title>
<link rel="stylesheet" href="static/style.css"/>
</head>
<body>
<div class="topleft">
</div>
<div class="topleft2">
</div>
<div class="middletop">
</div>
<div class="bottomleft">
</div>
<div class="bottomleft2">
</div>
<div class="bottomleft3">
</div>
<div class="bottomleft4">
</div>
<div class="content">
</div>
<div class="content2">
</div>
</body>
<footer>
</footer>
</html>
style.css
body {
background-color: black;
}
.topleft {
background-color: #c498c4;
width: 126px;
height: 90px;
}
.topleft2 {
margin-top: 5px;
background-color: #9b98fe;
width: 463px;
height: 112px;
border-radius: 0 0 0 70px;
}
.bottomleft {
margin-top: 7px;
background-color: #cc6061;
width: 463px;
height: 91px;
border-radius: 70px 0 0 0;
}
.bottomleft2 {
margin-top: 5px;
background-color: #cc6061;
width: 126px;
height: 137px;
}
.bottomleft3 {
margin-top: 5px;
background-color: #fe9800;
width: 126px;
height: 38px;
}
.bottomleft4 {
margin-top: 5px;
background-color: #ffa873;
width: 126px;
height: 180px;
}
.middletop {
position: absolute;
background-color: #fe9800;
width: 26px;
height: 16px;
left: 471px;
}
.content {
background-color: /*#6D6A6A*/black;
position: absolute;
left: 127px;
top: 239px;
border-radius: 35px;
width: 900px;
height: 700px;
}
.content2 {
background-color: black;
position: absolute;
left: 127px;
top: -2;
border-radius: 0 0 0 35px;
width: 900px;
height: 200px;
}
While I advise having a look into using absolute positioning extensively, if you're already doing it and you're happy with it, you just have to set top and you should be good to go:
.middletop {
position: absolute;
background-color: #fe9800;
width: 26px;
height: 16px;
left: 476px;
top:199px /* <-- this is what I added */
}
Here is a demo.
Try using
position: absolute;
top: /*the amount of px from the top to your wanted location*/;
left: /*the amount of px from the left to your wanted location*/;
z-index:1000; /*<= this is to be above all other elements*/
Use the css top:100px;. And to see it use: z-index:100;
<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
body{
background-color: #f2f2f2;
}
#content{
background-color: white;
border: 1px solid gray;
width: 60%;
height: auto;
display: block;
position: relative;
left: 50%;
margin-left: -30%;
padding: 10px;
z-index: 100;
margin-top: 20px;
}
html, body {
height: auto;
}
#wrap {
min-height: 100%;
}
#main {
overflow:auto;
padding-bottom: 150px;
} /* must be same height as the footer */
#footer {
position: relative;
margin-top: -150px; /* negative value of footer height */
height: 150px;
clear:both;
}
.instructions{
margin-top: 50px;
font-family: serif;
font-size: medium;
width: 50%;
left: 50%;
margin-left: -25%;
position: relative;
margin-bottom: 60px;
}
.repbanner{
background-color: red;
width: 108%;
height: auto;
left: 50%;
margin-left: -54.5%;
margin-top: 40px;
position: relative;
z-index: 200;
border: 1px #a70000 solid;
text-align: center;
color: white;
font-size: smaller;
text-transform: uppercase;
padding-top: 3px;
padding-bottom: 3px;
}
.dembanner{
background-color: blue;
width: 108%;
height: auto;
left: 50%;
margin-left: -54.5%;
margin-top: 40px;
position: relative;
z-index: 200;
border: 1px navy solid;
text-align: center;
color: white;
font-size: smaller;
text-transform: uppercase;
padding-top: 3px;
padding-bottom: 3px;
}
.introbanner{
background-color: white;
width: 108%;
height: auto;
left: 50%;
margin-left: -54.5%;
margin-top: 40px;
position: relative;
z-index: 199;
border: 1px gray solid;
text-align: center;
color: black;
font-size: smaller;
text-transform: uppercase;
margin-bottom: 10px;
}
/*Opera Fix*/
body:before {
content:"";
height:100%;
float:left;
width:0;
margin-top:-32767px;/
}
#animals{
width: 100%;
margin-left: 5px;
margin-right: 5px;
margin-bottom: 5px;
text-align: center;
position: relative;
display: block;
height: auto;
}
.animalmugshot{
width: 150px;
height: 150px;
float: left;
position: relative;
}
img{
position: relative
}
</style>
<!--[if !IE 7]>
<style type="text/css">
#wrap {display:table;height:100%}
</style>
<![endif]-->
</head>
<body>
<div id="wrap">
<div id="main">
<div id="content">
<div class="repbanner">
INTRODUCTION
</div>
<div class="instructions">
Hello and thanks for using the Chrome extension Political Animals. Below are the instructions on how the piece works. Enjoy!
<br/>
<br/>
</div>
<div class="dembanner">
Instructions
</div>
<div class="instructions">
Here's how the project works!
1. Surf the Web. Try any website you would like.
2. You should be redirected to a news site. Do not be alarmed!
3. Enjoy!
</div>
<div class="introbanner">
Meet the Cast
</div>
<div id="animals">
<div class="animalmugshot">
<img src="animalshots/thumbnails/PoliticalAnimal.png" alt="Charlie the CEO"/><br/><p>Charlie the CEO</p>
</div>
<div class="animalmugshot">
<img src="animalshots/thumbnails/PoliticalFox.png" alt="Freddy the Financial Agent"/>
<br/>
<p> Freddy the Financial Agent</p>
</div>
<div class="animalmugshot">
<img src="animalshots/thumbnails/PoliticalGiraffe.png" alt="Geoffry the Graphic Designer"/>
<br/>
<p>Geoffry the
<br/>Graphic Designer</p>
</div>
</div>
</div>
</div>
</div>
<div id="footer">
</div>
</body>
The div " animals" and "animalmugshots" should be in the "wrapper" and "content" but for some reason, the animals spill over the white "content" body part. I am confused as to why? Hopefully someone can help me out!
The element, #animals, was collapsing upon itself as the children element were being floated.
Floated and absolutely positioned elements are taken out of the flow of the document, therefore causing the parent element(s) to collapse with undefined dimensions.
Adding a defined height to the parent element, or overflow:hidden will solve this collapsing issue.
Working example - made the footer black for visibility purposes.
#animals {
width: 100%;
margin-left: 5px;
margin-right: 5px;
margin-bottom: 5px;
text-align: center;
position: relative;
display: block;
height: auto;
overflow: hidden; /* Added this.. */
}
Need to clear your floats in #animals or all divs
div:after //OR
#animals:after {
display: table;
content: '';
clear: both;
}