CODEWITHSUNDEEP
htmlcsslayout
Damian
Damian

Reputation: 29

Cannot get my two divs to float side by side

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

Answers (4)

Tariq B.
Tariq B.

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

Bhumi Patel
Bhumi Patel

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

Dražen
Dražen

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

neophyte
neophyte

Reputation: 6624

You don't need to use float on both the div just use--

 .imageContainer{

   float:right;
   width:20%;
  }

Upvotes: 0

Related Questions