Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

CSS

Posted by Blake Jackovitch
Blake Jackovitch
6,688 Points

border <div> problem?

I have very simple layout for a site I am currently signing but when i move position:relative <div> in between two other videos i have input it breaks the border?

6 Answers

Kevin Korte
Kevin Korte
28,149 Points
Kevin Korte
Kevin Korte
28,149 Points

Its hard to tell for me without seeing the html and css that is in play.

Blake Jackovitch
Blake Jackovitch
6,688 Points
Blake Jackovitch
Blake Jackovitch
6,688 Points

i can post it if you would like to see it. nothing not serious

<!DOCTYPE html>
    <html>      
            <head>
                <link type="text/css" rel="stylesheet" href="style.css"/>           
                <title>Beats|Trap|Music</title>
            </head>
        <body>
            <div class="outbox">
                <div id="dance">

                        <h1>TVRNVP</h1>

                                <div class="genre">Trap</div>
                                <div class="genre">Rap</div>
                                <div class="genre">Electro</div>
                                <div class="genre">Moohmbahton</div>
                </div>
                        <h3 id="welcome">The source for bangers all day</h3>

                    <div id="wrapper">

                        <h3 id="vidinfo">A$ap Ferg-"WORK"</h3>
                        <iframe id="ferg-work" width="560" height="315" src="http://www.youtube.com/embed/Es0sDqWnAZY" frameborder="0" allowfullscreen></iframe><br><br><br><br>

                        <h3 id="vidonfo1">Munchi - Sandungueo (Plurgatti Boyz Trap Remix)</h3>

                        <iframe id="pugatti" width="560" height="315" src="http://www.youtube.com/embed/nvX8eas9gng" frameborder="0" allowfullscreen></iframe>

                </div>
            </div>  
        </body>
    </html>
Blake Jackovitch
Blake Jackovitch
6,688 Points
Blake Jackovitch
Blake Jackovitch
6,688 Points 
*{background-color:#fff
}
#dance{
    font-family:"Ancient Geek";
    text-align:center;
    font-size:50px;


}
#wrapper{
    border:5px solid #000;
    padding-left:40px;
    margin-top:60px;
    position:static;
    padding-bottom:5000px;
    margin-right:180px;
    margin-left:180px;
}
#vidinfo1{
    margin-top:450px;
    text-align:center;
}
}
.genre{
    display:inline-block;
    font-family:"Ancient Geek";
}
#welcome{
    font-family:"Ancient Geek";
    position:relative;
    text-align:center;
}
#p1{
    border:solid 1px #000;
    position:relative;
    display:inline;
}
.outbox{
    border:5px solid #000;
}
#ferg-work{
    float:right;
    padding-right:260px;
    display:inline;
    position:relative;

}
#vidinfo{
    font-family:"Ancient Geek";
    text-align:center;
    position:relative;

}
#vidonfo1{
    font-family:"Ancient Geek";
    text-align:center;
    position:relative;
    top:240px;
    bottom:400px;
    left:400px;


}
#pugatti{
        float:right;
    position:relative;
    top:100px;
    padding-right:260px;
}
Kevin Korte
Kevin Korte
28,149 Points
Kevin Korte
Kevin Korte
28,149 Points

So it's the wrapper border that breaks when you give your vidinfo id's a position of relative?

Blake Jackovitch
Blake Jackovitch
6,688 Points
Blake Jackovitch
Blake Jackovitch
6,688 Points

actually it was both that were braking but i believe the issue may have been fixed by #vidonfo1 a inline display

James Barnett
James Barnett
39,199 Points
James Barnett
James Barnett
39,199 Points

Blake Jackovitch - I'd suggest you make a codepen so we can see the bigger picture.