CODEWITHSUNDEEP
htmlcss
MadeBy Alvaropop
MadeBy Alvaropop

Reputation: 91

How to fix div alignment issue?

I’m working on a website in which at the bottom you can see the three social media accounts it has, but with the following code, this is the output, but I don’t know what’s causing it.

Issue.

As you can clearly see, there is a grey box going over the three boxes, and I don’t know how to fix this.

.container {
  width: 600px;
  height: 190px;
  background-color: #ff7675;
  padding-top: 20px;
  padding-left: 15px;
  padding-right: 15px;
}

#st-box {
  float: left;
  width: 180px;
  height: 160px;
  background-color: white;
  border: solid black;
}

#nd-box {
  float: left;
  width: 180px;
  height: 160px;
  background-color: white;
  border: solid black;
  margin-left: 20px;
}

#rd-box {
  float: right;
  width: 180px;
  height: 160px;
  background-color: white;
  border: solid black;
}
<div class="container">
  <div id="st-box">
    <iframe></iframe>
  </div>

  <div id="nd-box">
    <iframe></iframe>
  </div>

  <div id="rd-box">
    <iframe></iframe>
  </div>

</div>

What can I do?

Upvotes: 0

Views: 137

Answers (3)

Zam Abdul Vahid
Zam Abdul Vahid

Reputation: 2721

The browser adds a default border to iframe. Give border: 0 to the iframe. Check screenshot.

enter image description here

iframe { border: 0; }

Upvotes: 0

Dick Larsson
Dick Larsson

Reputation: 785

You should style your iframes. Here is some code that will help you on your way.

 iframe {
    display: block;
    width: 100%;
    border: 0;
  }

Upvotes: 2

steveniclas
steveniclas

Reputation: 124

The iframes inside your inner divs are causing these strange-looking borders. You can style them with css aswell.

For example, you might want to give them:

border:0;
width:100%;

Upvotes: 1

Related Questions