Try to search your question here, if you can't find : Ask Any Question Now ?

Problem getting 2 images to float beside each other using width calc in CSS

HomeCategory: stackoverflowProblem getting 2 images to float beside each other using width calc in CSS
Avatarcraig asked 3 months ago

I am managed to get 2 images to float beside each other in container1 but in container2 the layout is the same but reversed. For some reason, I can’t get the second image (image4) to float beside (image3). Can anyone show me where I’m going wrong? Also, any constructive criticism on my code or how I can write it better would be greatly appreciated. Thanks in advance.

/———————————/
/———–container1————/

.container1

{

  max-width: 90%;

  margin-left: 6%;

  margin-top: 8rem;

}

.image1 img

{

  float: left;

  width: calc(30% - 10px);

}

.image2 img

{

  float: left;

  margin-left: 5%;

  width: calc(65% - 10px);

}

.text1

{

  background-color: #F6F8FA;

  float: left;

  height: 25.5rem;

  margin-left: 5%;

  text-align: center;

  width: calc(65% - 10px);

}

.text1 h3

{

  color: #777;

  font-family: Raleway;

  font-size: 20px;

  text-transform: uppercase;

}

.text1 h2

{

  color: #333;

  font-family: Raleway;

  font-size: 39px;

  font-weight: 700;

}

.text1 button

{

  border-radius: 10%;

  color: #333;

  font-family: Raleway;

  font-size: 19px;

  font-weight: 700;

  margin-top: 1rem;

}

button:hover

{

  background-color: #16D6D1;

  color: white;

}

/——————————/
/———–container2———/

.container2
{

  clear: both;

  margin-top: 8rem;

  max-width: 90%;

  margin-left: 6%;

}

.image3 img

{

  width: calc(65% - 10px);

}

.text2
{

  background-color: #F6F8FA;

  height: 25.5rem;

  margin-top: -1.6rem;

  text-align: center;

  width: calc(65% - 10px);

}

.text2 h3
{

  color: #777;

  font-family: Raleway;

  font-size: 20px;

  padding-top: 3rem;

  text-transform: uppercase;

}

.text2 h2

{

  color: #333;

  font-family: Raleway;

  font-size: 39px;

}

.text2 button

{

  border-radius: 10%;

  color: #333;

  font-family: Raleway;

  font-size: 19px;

  font-weight: 700;

  margin-top: 1rem;

}

.image4 img

{

  float: left;

  width: calc(30% - 10px);

}

1 Answers
Best Answer
AvatarJyoti answered 3 months ago
Your Answer

12 + 10 =

Popular Tags

WP Facebook Auto Publish Powered By : XYZScripts.com