Question posted in 
I’m currently creating a website which is created by three main divs on one page. In-between each div, I have a faint hr to help visually ‘split them up’.
Between my first and second divs, the hr displays fine.
Between the second and third is my problem – the hr displays underneath the second div. I have a feeling it is to do with the relative positioning of the container of my second div, but that is needed for me to position images within in.
I have tried display:block and wrapping the second div inside another container amongst other things, but nothing has yet worked.
I could try using div with a background/border rather than hr, but i’m not sure if this is the right way to approach it (i’m still learning my way around things).
Below is my code for the ‘second div’ and the hr I am trying to position.
<!-- PORTFOLIO -->
<div id="portfoliocont">
<div class="smallthumb" id="thumb1">
<a href="media/pamabest/pamabesttitle-large.jpg" class="overlay" data-lightbox="image-1" data-title="Pamabest" class="show">
<a href="media/pamabest/app-login.jpg" class="overlay" data-lightbox="image-1" data-title="Log in with your own account">
<a href="media/pamabest/tutorial.jpg" class="overlay" data-lightbox="image-1" data-title="Message your friends">
<a href="media/pamabest/app-profile.jpg" class="overlay" data-lightbox="image-1" data-title="Create your own profile">
<a href="media/pamabest/app-messages.jpg" class="overlay" data-lightbox="image-1" data-title="Message your friends">
<a href="media/pamabest/karaoke--menu.jpg" class="overlay" data-lightbox="image-1" data-title="Have a laugh">
<a href="media/pamabest/lists-viewlist.jpg" class="overlay" data-lightbox="image-1" data-title="Be prepared">
<a href="media/pamabest/mycar.jpg" class="overlay" data-lightbox="image-1" data-title="See the stats">
<a href="media/pamabest/weather.jpg" class="overlay" data-lightbox="image-1" data-title="Pack wisely">
<a href="media/pamabest/ticket5pariswhitestarstextured.jpg" class="overlay" data-lightbox="image-1" data-title="Front of 'Pamabest: Paris' ticket">
<a href="media/pamabest/ticketbackwhitestarstextured.jpg" class="overlay" data-lightbox="image-1" data-title="Back of 'Pamabest: Paris' ticket">
<a href="media/pamabest/travelticket2withbannertextured.jpg" class="overlay" data-lightbox="image-1" data-title="Front of 'Pamabest: Travel Pass' ticket">
<a href="media/pamabest/travelticket2backtextured.jpg" class="overlay" data-lightbox="image-1" data-title="Front of 'Pamabest: Travel Pass' ticket">
<img src="images/smallthumb/pamabest-small.jpg" alt="Imaginary music festival, Pamabest"/ title="Pamabest companion app">
<h1>"Pamabest" is a European, multi-cultural music festival aimed at 18-30 year olds.<br>A companion app would be used to help festival goers navigate the park and enhance their overall experiance.</h1></a>
<p>Pamabest music festival</p>
</div>
<div class="smallthumb" id="thumb2">
<a href="media/pisforpsychohd.mov" class="overlay">
<img src="images/smallthumb/psycho-small.jpg" alt="2 Minute video recreating a scene from the move, P is for Psycho" title="P is for Psycho video"/>
<h1>Filmed within a group, the video is a recreation of the 'bathroom scene' from the movie. <br>All editing was made in Premier Pro.</h1></a>
<p>P is for Pscyho</p>
</div>
<div class="smallthumb" id="thumb3">
<a href="media/silverlake/build/index.html" class="overlay" target="_blank">
<img src="images/smallthumb/silverlake-small.jpg" alt="Silverlake Website" title="Silverlake theme park website"/>
<h1>Silverlake theme park is based in the heart of Yorkshire, boasting a zoo and other child-friendly features. <br> The website was made with HTML5 and CSS3, graphical assests were made in Photoshop and Illustrator.</h1></a>
<p>Silverlake themepark</p>
</div>
<div class="blankthumb" id="thumb4"></div>
<div class="blankthumb" id="thumb5"></div>
<div class="blankthumb" id="thumb6"></div>
</div>
<hr>
And my CSS
hr {
margin: 40px 0px;
border: none;
height: 1px;
color: #ececec; /* old IE */
background-color: #ececec; /* Modern Browsers */
}
/* PORTFOLIO
--------------------------*/
#portfoliocont {
position: relative;
margin-bottom: 40px;
display: block;
}
.smallthumb, .blankthumb {
display: inline-block;
position: absolute;
}
.smallthumb a {
text-decoration: none;
}
.smallthumb img {
-webkit-box-shadow: 0px 0px 3px 1px rgba(0,0,0,0.23);
-moz-box-shadow: 0px 0px 3px 1px rgba(0,0,0,0.23);
box-shadow: 0px 0px 3px 1px rgba(0,0,0,0.23);
}
.blankthumb {
background: #f2f2f2;
width: 296px;
height: 174px;
}
#thumb1 {
left: 0px;
top: 0px;
}
#thumb2 {
left: 335px;
top: 0px;
}
#thumb3 {
right: 0px;
top: 0px;
}
#thumb4 {
left: 335px;
top: 250px;
}
#thumb5 {
right: 0px;
top: 250px;
}
#thumb6 {
left: 0px;
top: 250px;
}
#portfoliocont p {
padding-top: 10px;
color: #808080;
font-weight: 400;
}
.overlay h1 {
position: absolute;
/*display: inline-block;*/
height: 164px;
width: 276px;
bottom: 0;
top: 0;
color: white;
background-color: #806d9e;
opacity: 0;
font: 1em "Helvetica Neue";
text-align: left;
padding: 10px 10px 0px 10px;
line-height: 1.4em;
transition: transform 0.3s, opacity 0.3s;
-ms-transition: -ms-transform 0.3s, opacity 0.3s;
-webkit-transition: -webkit-transform 0.3s, opacity 0.3s;
}
.overlay h1 br{
display: block;
line-height: 2em;
}
.overlay:hover h1{
opacity: 1;
}
#thumb1 a.show {
display: block;
}
#thumb1 a {
display: hidden;
}
Thanks
2
Answers
Your problem here is all the thumbs with
position: absolute;When the browser renders an element with
position: absolute;it doesn’t take any space.In your case, the
#portfoliocont“has nothing inside”.. What I mean is that anything inside thatdivoccupies any space. Therefore, it’s height is zero.Following your zero-height div, the browser continues to render the
<hr />tag.I strongly recommend not to position your thumbs absolutely. You have many other options, such as:
Here is a simple example of using
inline-blockfor the thumbs: https://jsfiddle.net/Lfhctqkg/Defining div height, solved this little problem for me. An easier way, at least for a student on a simple task.