How to properly implement margin-left for an iframe within CSS?

user_12757058 0
Viewed 91

I'm trying to seperate these two iframes using margin-left. However, they're continuing to stick together. I've tried to implement margin-left in the row1 id as well the float-childer class in my snippet below, however had no success.

.float-childer {
  float: left;
}
#row1 {
  margin-top: 10px;
  margin-left: 10px;
}
<!doctype html>
<html lang="en">
<body>
    <div id="row1">
        <div class="float-childer">
            <iframe width="150%" height="70" scrolling="no" frameborder="no" allow="autoplay" src="https://w.soundcloud.com/player/?url=https%3A//api.soundcloud.com/tracks/759501001&color=%23ff5500&auto_play=false&hide_related=false&show_comments=true&show_user=true&show_reposts=false&show_teaser=true&visual=true"></iframe>
            <div style="font-size: 10px; color: #cccccc;line-break: anywhere;word-break: normal;overflow: hidden;white-space: nowrap;text-overflow: ellipsis; font-family: Interstate,Lucida Grande,Lucida Sans Unicode,Lucida Sans,Garuda,Verdana,Tahoma,sans-serif;font-weight: 100;">
                <a href="https://soundcloud.com/guapodraco" title="DracoFromLS" target="_blank" style="color: orange; text-decoration: none;">DracoFromLS</a> · <a href="https://soundcloud.com/guapodraco/guapo-draco-king-of-los-santos" title="Draco - King Of Los Santos"
                target="_blank" style="color: orange; text-decoration: none;">Draco - King Of Los Santos</a>
            </div>
        </div>
        <div class="float-childer">
            <iframe width="150%" height="70" scrolling="no" frameborder="no" allow="autoplay" src="https://w.soundcloud.com/player/?url=https%3A//api.soundcloud.com/tracks/891262120&color=%23ff5500&auto_play=false&hide_related=false&show_comments=true&show_user=true&show_reposts=false&show_teaser=true&visual=true"></iframe>
            <div style="font-size: 10px; color: #cccccc;line-break: anywhere;word-break: normal;overflow: hidden;white-space: nowrap;text-overflow: ellipsis; font-family: Interstate,Lucida Grande,Lucida Sans Unicode,Lucida Sans,Garuda,Verdana,Tahoma,sans-serif;font-weight: 100;">
                <a href="https://soundcloud.com/guapodraco" title="DracoFromLS" target="_blank" style="color: orange; text-decoration: none;">DracoFromLS</a> · <a href="https://soundcloud.com/guapodraco/draco-fredo" title="DRACO - Fredo" target="_blank"
                style="color: orange; text-decoration: none;">DRACO - Fredo</a>
            </div>
        </div>
    </div>
</body>
</html>

css html
2 Answers

Hope this is what you are looking for.

.float-childer {
  float: left;
}
#row1 {
  margin-top: 10px;
}
.float-childer2 {
  margin-left: 10px;
}
<!doctype html>
<html lang="en">
<body>
    <div id="row1">
        <div class="float-childer float-childer1">
            <iframe width="100%" height="70" scrolling="no" frameborder="no" allow="autoplay" src="https://w.soundcloud.com/player/?url=https%3A//api.soundcloud.com/tracks/759501001&color=%23ff5500&auto_play=false&hide_related=false&show_comments=true&show_user=true&show_reposts=false&show_teaser=true&visual=true"></iframe>
            <div style="font-size: 10px; color: #cccccc;line-break: anywhere;word-break: normal;overflow: hidden;white-space: nowrap;text-overflow: ellipsis; font-family: Interstate,Lucida Grande,Lucida Sans Unicode,Lucida Sans,Garuda,Verdana,Tahoma,sans-serif;font-weight: 100;">
                <a href="https://soundcloud.com/guapodraco" title="DracoFromLS" target="_blank" style="color: orange; text-decoration: none;">DracoFromLS</a> · <a href="https://soundcloud.com/guapodraco/guapo-draco-king-of-los-santos" title="Draco - King Of Los Santos"
                target="_blank" style="color: orange; text-decoration: none;">Draco - King Of Los Santos</a>
            </div>
        </div>
        <div class="float-childer float-childer2">
            <iframe width="100%" height="70" scrolling="no" frameborder="no" allow="autoplay" src="https://w.soundcloud.com/player/?url=https%3A//api.soundcloud.com/tracks/891262120&color=%23ff5500&auto_play=false&hide_related=false&show_comments=true&show_user=true&show_reposts=false&show_teaser=true&visual=true"></iframe>
            <div style="font-size: 10px; color: #cccccc;line-break: anywhere;word-break: normal;overflow: hidden;white-space: nowrap;text-overflow: ellipsis; font-family: Interstate,Lucida Grande,Lucida Sans Unicode,Lucida Sans,Garuda,Verdana,Tahoma,sans-serif;font-weight: 100;">
                <a href="https://soundcloud.com/guapodraco" title="DracoFromLS" target="_blank" style="color: orange; text-decoration: none;">DracoFromLS</a> · <a href="https://soundcloud.com/guapodraco/draco-fredo" title="DRACO - Fredo" target="_blank"
                style="color: orange; text-decoration: none;">DRACO - Fredo</a>
            </div>
        </div>
    </div>
</body>
</html>

user_79765750

Try using padding in .float-childer and change iframe width:100%;

body{
  margin: 15px;
}
.float-childer {
  float: left;
  padding: 0 15px;
}
#row1 {
  margin: 10px -15px 0;
}

.float-childer iframe{
  width: 100%;
}
<!doctype html>
<html lang="en">
<body>
    <div id="row1">
        <div class="float-childer">
            <iframe width="150%" height="70" scrolling="no" frameborder="no" allow="autoplay" src="https://w.soundcloud.com/player/?url=https%3A//api.soundcloud.com/tracks/759501001&color=%23ff5500&auto_play=false&hide_related=false&show_comments=true&show_user=true&show_reposts=false&show_teaser=true&visual=true"></iframe>
            <div style="font-size: 10px; color: #cccccc;line-break: anywhere;word-break: normal;overflow: hidden;white-space: nowrap;text-overflow: ellipsis; font-family: Interstate,Lucida Grande,Lucida Sans Unicode,Lucida Sans,Garuda,Verdana,Tahoma,sans-serif;font-weight: 100;">
                <a href="https://soundcloud.com/guapodraco" title="DracoFromLS" target="_blank" style="color: orange; text-decoration: none;">DracoFromLS</a> · <a href="https://soundcloud.com/guapodraco/guapo-draco-king-of-los-santos" title="Draco - King Of Los Santos"
                target="_blank" style="color: orange; text-decoration: none;">Draco - King Of Los Santos</a>
            </div>
        </div>
        <div class="float-childer">
            <iframe width="150%" height="70" scrolling="no" frameborder="no" allow="autoplay" src="https://w.soundcloud.com/player/?url=https%3A//api.soundcloud.com/tracks/891262120&color=%23ff5500&auto_play=false&hide_related=false&show_comments=true&show_user=true&show_reposts=false&show_teaser=true&visual=true"></iframe>
            <div style="font-size: 10px; color: #cccccc;line-break: anywhere;word-break: normal;overflow: hidden;white-space: nowrap;text-overflow: ellipsis; font-family: Interstate,Lucida Grande,Lucida Sans Unicode,Lucida Sans,Garuda,Verdana,Tahoma,sans-serif;font-weight: 100;">
                <a href="https://soundcloud.com/guapodraco" title="DracoFromLS" target="_blank" style="color: orange; text-decoration: none;">DracoFromLS</a> · <a href="https://soundcloud.com/guapodraco/draco-fredo" title="DRACO - Fredo" target="_blank"
                style="color: orange; text-decoration: none;">DRACO - Fredo</a>
            </div>
        </div>
    </div>
</body>
</html>

user_63641900
Related