How to fix div alignment issue?

Question

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.

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?

If you inspect the elements, you can clearly see that these are three borders from your ``. You don’t remove the border and you don’t set a specific size to the ``, therefore the default style is used which is a rather large, bordered ``. You could, e.g. [remove the border from these `<iframe>`s](https://stackoverflow.com/a/8437926/4642212). What is the desired result? — Sebastian Simon, Dec 21 '20 at 19:00
@user4642212 I'm not understanding you very well. Should I set a size to the iframes? — MadeBy Alvaropop, Dec 21 '20 at 19:02

score 2 · Accepted Answer · answered Dec 21 '20 at 19:03

2

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

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

answered Dec 21 '20 at 19:03

Dick Larsson

487
3
5

Thank you! That bit of CSS makes the weird grey box go away! Thank you! – MadeBy Alvaropop Dec 21 '20 at 19:04

score 1 · Answer 2 · answered Dec 21 '20 at 19:02

1

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%;

answered Dec 21 '20 at 19:02

steveniclas

102
2
13

Another user also sent that in a bit earlier, but thank you as well. Do you happen to know how I could put titles above the boxes? – MadeBy Alvaropop Dec 21 '20 at 19:14
Actually, my answer was like a minute earlier - but never mind ;) You could add titles in the inner divs, just above your iframes. – steveniclas Dec 22 '20 at 11:48

score 0 · Answer 3 · answered Dec 21 '20 at 19:10

0

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

iframe { border: 0; }

answered Dec 21 '20 at 19:10

Zam Abdul Vahid

2,389
3
18
25

Another user also sent that in, but thank you too. Another issue I'm finding myself with is that when putting content inside the iframe, it shows too small, but if I enlargen the iframe, the distribution gets messed up. Do you happen to know how I could fix this? – MadeBy Alvaropop Dec 21 '20 at 19:16
Can you update the code snippet so that I can have a look and debug. – Zam Abdul Vahid Dec 21 '20 at 19:26
Oh, I found a way around it. I used image hyperlinks, but thanks anyway! – MadeBy Alvaropop Dec 21 '20 at 20:40

How to fix div alignment issue?

3 Answers3