Reputation: 29
I am still relatively new to html and seem to be understanding everything well except how the layout works. I want to have 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 am 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
and 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 ;
}
`
Upvotes: 0
Views: 370
Reputation: 573
The problem here exists because of the following pieces of code.
p{
width: 900px;
}
and
<img src="city.png" style = "width: 300px; height:250px" >
The floats work perfectly but these two lines of code are overriding the width of the parents and thus the divs textContainer
and imgContainer
cannot wont fit in a row.
Upvotes: 0
Reputation: 589
Try this:
.main-container{width: 100%; float: left;}
.horse{
background-color: #f3f3f3;
padding-top: 10px;
max-width: 900px;
width: 100%;
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 ;
}
<!DOCTYPE html>
<html>
<head>
<link rel = "stylesheet" type = "text/css" href = "glitch.css">
<title> Data Bending </title>
</head>
<body>
<div class="main-container">
<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
and 30 years.</p>
<input type = "button" name = "button1" value = " View Glitch Horse">
</div>
<div class = "imageContainer">
<img src="city.png" style = "width: 300px; height:250px" >
</div>
</div>
</body>
</html>
Upvotes: 0
Reputation: 293
Set their float to a same value (either left or right) and make sure their width is not more than 100%.
.left, .right {
position:relative;
width:20%;
height:100px;
background-color:red;
float:left;
}
.right {
background-color:blue;
width:80%;
}
<div class="parent">
<div class="left"></div>
<div class="right"></div>
</div>
Upvotes: 1
Reputation: 6624
You don't need to use float on both the div just use--
.imageContainer{
float:right;
width:20%;
}
Upvotes: 0