CODEWITHSUNDEEP
htmlcss
Christian Soto
Christian Soto

Reputation: 45

How do I center two floating elements next to each other?

I have 2 div blocks with images inside them and I have them correctly aligned with each other, but i have them aligned to the left. I tried aligning them to the center but then they end up on top of each other. Should I create a block around them and center that maybe?

page

body {
  background-color: #C8C8C8;
  background-image: images/rottenlargebg.png;
}
h1 {
  text-shadow: 2px 3px gray;
  margin-left: auto;
  margin-right: auto;
  width: 200px;
}
img.width {
  width: 100%;
}
img.tLeft {
  float: left;
  padding-right: 3em;
}
img.tRight {
  float: right;
}
.div1 {
  width: 50%;
  border-top-left-radius: 20px;
  overflow: hidden;
  background-image: url(images/rottenlargebg.png);
  background-repeat: repeat-x;
  float: left;
}
.div2 {
  display: block;
  overflow: hidden;
  border-top-right-radius: 20px;
  float: left;
}
.div3 {
  width: 50%;
  border: 1px solid red;
  overflow: hidden;
  border-top-right-radius: 20px;
  float: left;
}
strong {
  font-size: 70px;
  color: red;
}
<!DOCTYPE html>
<html>

<head>
  <title>TMNT - Rancid Tomatoes</title>
  <link rel="stylesheet" href="movie.css">

  <meta charset="utf-8" />
</head>

<body>
  <div>
    <img class="width" src="images/rancidbanner.png" alt="Rancid Tomatoes">
  </div>

  <h1>TMNT (2015)</h1>

  <!---block one--->
  <div class="div1">
    <img class="tLeft" src="images/rottenlarge.png" alt="Rotten" /> <strong>33%</strong>
  </div>

  <!--block two-->
  <div class="div2">
    <img class="tRight" src="images/overview.png" alt="general overview" />
  </div>

</html>

Upvotes: 1

Views: 2170

Answers (2)

snow
snow

Reputation: 475

You can use flexboxes to center two elements next to each other. place the two divs inside a container. add the property display:flex and justify-content:center to the container

for example: jsFiddle

Side note: add flex:1 to each div inside to maintain equal height.

Upvotes: 2

Wim Mertens
Wim Mertens

Reputation: 1790

Change float to display: inline-block and set text-align: center to outer container.

Upvotes: 1

Related Questions