CODEWITHSUNDEEP
htmlcss
Rajan Chauhan
Rajan Chauhan

Reputation: 1375

Divs overlapping over each other

I created this page and I wish to see the #showcase containing #banner on top while the div #main consisting of Table to be below the just touching the banner not to go down of the #banner.

Fiddle

CSS:

#bcontainer{display:block;
position:absolute;
width:100%;
}
#showcase{
margin-top: 0;
position:absolute;
float:left;
clear:both;
height:200px;
width:100%;
valign:middle;
}
.image { 
position: relative;  
width:100%;
height:100%;
z-index:-4;
}
#bannerText { 
position: absolute; 
top: 50px;
float:right;  
width:100%; 
color:cyan;
}
#Text{
float:right;
margin-right:20px;
font-size:20px;}

#banner{
height:100%;
width:100%;
}
#main{
width:100%;
clear:both;
display:block;
position:relative;
valign:middle;

}
.fb-follow{
float:right;}
footer{
display:inline-block;
background:#141823;
}

HTML:

<body><div id="bcontainer">
<div id="showcase"><div class="image"><img id="banner" alt=""  

src="file:///C:\Users\Raj\Desktop\Shashwat\images\mrx.jpg">
    <div id="bannerText"><span id="Text">Singing Sensation of Doon :Shashwat    `J Pandit</span></div>
</div>
    </div>
    <div id="main" >
            <table>
            <thead><tr><th colspan="2">My Youtube Videos<th><tr></thead>
            <tbody>
                <tr><td><iframe width="420" height="315"
src="https://www.youtube.com/watch?v=I4mfvaazBxQ">

</iframe></td><td><iframe width="420" height="315"
src="https://www.youtube.com/watch?v=qjTgYgFDDFM">
</iframe></td></tr>
                    <tr><td><iframe width="420" height="315"
src="https://www.youtube.com/watch?v=tEMy0L5_a-Y">
</iframe></td><td><iframe width="420" height="315"
src="https://www.youtube.com/watch?v=6mNoiI_7pE4">
</iframe></td></tr>
                    <tr><td><iframe width="420" height="315"
src="https://www.youtube.com/watch?v=9l_kRa4fwPY">
</iframe></td><td><iframe width="420" height="315"
src="https://www.youtube.com/watch?v=7qtNr3DqVqE">
</iframe></td></tr>
                </tbody>
            </table>                
    </div>
    </body>

Upvotes: 0

Views: 73

Answers (1)

German Cabarcas
German Cabarcas

Reputation: 21

basically your problem arises due to the excessive use of positioning properties when actually you have very little need for it, so a refactoring of your html/css is needed so for css:

#showcase {
    height:200px;
    width:100%;
    background: url("file:///C:\Users\Raj\Desktop\Shashwat\images\mrx.jpg");
}
#Text {
    margin-top: 50px;
    text-align:right;
    margin-right:20px;
    font-size:20px;
    color: cyan;
}
#main {
    width: 900px;
    margin: 0 auto;
}
.fb-follow {
    float:right;
}
footer {
    display:inline-block;
    background:#141823;
}

In your html you can replace everything before your table with the following code, as you see it's more terse than the original:

<div id="showcase">
    <h1 id="Text">
        Singing Sensation of Doon : Shashwat J Pandit
    </h1>
</div>

Here it's the updated fiddle

Regarding the table that you use to showcase the videos using CSS columns would be a cleaner approach.

Upvotes: 1

Related Questions