I'm still relatively new to HTML and understanding everything well, except for how the layout works. I want the text on the left and the image on the right, but for some reason, the float left and right aren't working.
Here is the code I've been using:
HTML:
<!DOCTYPE html>
<html>
<head>
<link rel = "stylesheet" type = "text/css" href = "glitch.css">
<title> Data Bending </title>
</head>
<body>
<header class = "horse" > Glitch Horse </header>
<div class = "textContainer">
<p>
Horses' anatomy enables them to make use of speed to escape predators
and they have a well-developed sense of balance and a strong fight-or-flight
response. Related to this need to flee from predators in the wild is an unusual
trait: horses are able to sleep both standing up and lying down. Female horses,
called mares, carry their young for approximately 11 months, and a young horse,
called a foal, can stand and run shortly following birth. Most domesticated horses
begin training under saddle or in harness between the ages of two and four. They
reach full adult development by age five and have an average lifespan of between 25-30 years.
</p>
<div class = "imageContainer">
<img src="city.png" style = "width: 300px; height:250px" >
</div>
</div>
<input type = "button" name = "button1" value = " View Glitch Horse">
<div class = "padding"></div>
<div class = "padding"> </div>
<div>
</body>
</html>
CSS:
.horse{
background-color: #f3f3f3;
padding-top: 10px;
width: 900px;
text-align: center;
}
.textContainer{
float:left;
width : 75%;
height: 120px;
}
.imageContainer{
float:right;
width:20%;
}
p{
background-color: #fff;
width: 900px;
height: 100px;
float left:
}
.padding{
padding-top: 10px;
padding-bottom: 10px ;
}
`