CODEWITHSUNDEEP
htmlcss
factordog
factordog

Reputation: 597

Prevent divs from moving over one another

I have my contact page with three icons that are placed horizontally next to one another. The problem comes in when you resize the browser to about phone size (480px around so) the divs start to flow over one another and the images stack on top and is really not something I want to happen. I want them to either go below one another or scale accordingly.

HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">    
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>Home</title>
        <!--===================================================css links===================================================!-->
        <link href='http://fonts.googleapis.com/css?family=Raleway:600,500,400,200' rel='stylesheet' type='text/css'>
        <link href='http://fonts.googleapis.com/css?family=Roboto:400,700,900,100,300' rel='stylesheet' type='text/css'>
        <link href="css/default_style.css" rel="stylesheet" type="text/css" />
        <link href="css/contact_style.css" rel="stylesheet" type="text/css" />
    </head>   
    <body>
        <!--===================================================Header===================================================!-->
        <div class="wrapper">
            <div class="headerwrap">
                <div class="social">    <a href="www.facebook.com"><img class="move" src="images/deviant.png"></a>
    <a href="www.facebook.com"><img class="move" src="images/yt.png"/></a>
 <a href="www.facebook.com"><img class="move" src="images/fb.png"/></a>
                </div>
                <!--close social!-->
                <div class="header">
                    <div class="logo">
                        <img src="images/logo.png" />
                    </div>
                    <!--close logo-->
                </div>
                <!--close header!-->
                <div class="menu">
                    <ul class="menutxt">
                        <li><a href="index.html">HOME</a>
                        </li>
                        <li><a href="about.html">PORTFOLIO</a>
                        </li>
                        <li><a href="manga.html">CONTACT</a>
                        </li>
                    </ul>
                </div>
                <!--close menu!-->
            </div>
            <!--close headerwrap!-->
            <!--===================================================Contact===================================================!-->
            <div class="toptxt">
                <div id="test2">
                    <p class="menutxt">Get in touch...</p>
                </div>
            </div>
            <div class="detailwrap">
                <div class="contactspace"></div>
                <!--close contactspace!-->
                <div class="contact">
                    <img class="move2" class="hover" src="images/me2.png">
                    <p class="text">Luke Babich</p>
                </div>
                <!--close contact!-->
                <div class="contact">
                    <img class="move2" class="hover" src="images/phone.png">
                    <p class="text">+27 72 836 0954</p>
                </div>
                <!--close contact!-->
                <div class="contact">
                    <img class="move2" class="hover" src="images/mail.png">
                    <p class="text">[email protected]</p>
                </div>
                <!--close contact!-->
                <div class="contactspace"></div>
                <!--close contactspace!-->
            </div>
            <!--close detailwrap!-->
            <!--===================================================Footer===================================================!-->
            <div class="footerwrap2">
                <p class="foottxt">Designed and developed by Luke Babich- All Rights Reserved ©2015</p>
            </div>
            <!--close footerwrap!-->
        </div>
        <!--close wrapper!-->
    </body>
</html>

CSS:

@charset "utf-8";
/*---------------------------- Content ----------------------------*/
.toptxt{
    margin-top:70px;
    width:100%;
}
/*.contactwrap{
    width:100%;                 change back if cant figure it out
    margin-top:60px;
}*/ 
.detailwrap{
    top:70px; /*remove if needed*/
    position:relative;
    width:100%;
}
/* clearfix */
.detailwrap:after {
    content: "";
    display: table;
    clear: both;
}
.contact{
    position:relative;
    width: 15%;
    float: left;
    margin: 0 1% 2% 0;
}
.contactspace{
    float:left;
    width: 25%;
    margin: 0 1% 1% 0;   
}
.contact img{
    width:90px;
    display: block;
    margin:0 auto;
}
.contact .text {
    position:relative;
    top:-15px;
    text-align:center;
    visibility:hidden;
}
.contact:hover .text {
    animation: fadein 2s;
    visibility:visible;
}
img.move2 {
    bottom:0px;
    transition: transform 1s cubic-bezier(0.2, 1, 0.44, 1.2);
}
img.move2:hover {
    -moz-transform: translate(-2px, -2px);
    -ms-transform: translate(-2px, -2px);
    -o-transform: translate(-2px, -2px);
    -webkit-transform: translate(-2px, -2px);
    transform: translate(0px, -10px)    
}
/*---------------------------- Content ----------------------------*/
.contentwrap{   
    margin-top:500px;
    width:100%;
    z-index:500;
    background:#171717;
}
.textwrap{
    position:relative;
    width:100%;
    -moz-box-shadow: 0px -10px 20px 0px #000;
    -webkit-box-shadow: 0px -10px 20px 0px #000;
    box-shadow: 0px -10px 10px 0px #000;
}
/* clearfix */
.textwrap:after {
    content: "";
    display: table;
    clear: both;
}
.content,
.divider,
.content2,
.contentspace {
    text-align:center;
    float: left;
}
.divider{
    width: 24%;
    float: left;
    margin: 0 1% 1% 0;
}
.divider img{
    display: block;
    margin-top:50px;
    margin-left: auto;
    margin-right: auto;
}
.content,
.content2 {
    width: 15%;
    float: left;
    margin: 0 1% 1% 0;
}
.content img{
    width:15%;
}
.contentspace{
    width: 20%;
    margin: 0 1% 1% 0;   
}
.headertxt{
    font-family: 'Roboto', sans-serif;
    font-weight:600;
    font-size:1.5vw;
}
/*---------------------------- Footer ----------------------------*/
.footerwrap2{
    position:relative;
    top:70px; /*remove if needed*/
    width:100%;
    z-index:501;
    -moz-box-shadow: 0px -10px 20px 0px #000;
    -webkit-box-shadow: 0px -10px 20px 0px #000;
    box-shadow: 0px -10px 10px 0px #000;
}
/*---------------------------- Textfader ----------------------------*/
#test2 p {
    animation: fadein 5s;
    -moz-animation: fadein 5s; /* Firefox */
    -webkit-animation: fadein 5s; /* Safari and Chrome */
    -o-animation: fadein 5s; /* Opera */
    transition: opacity 5s;
}
@keyframes fadein {
    from {
        opacity:0;
    }
    to {
        opacity:1;
    }
}
@-moz-keyframes fadein { /* Firefox */
    from {
        opacity:0;
    }
    to {
        opacity:1;
    }
}
@-webkit-keyframes fadein { /* Safari and Chrome */
    from {
        opacity:0;
    }
    to {
        opacity:1;
    }
}
@-o-keyframes fadein { /* Opera */
    from {
        opacity:0;
    }
    to {
        opacity: 1;
    }
}

I'm not sure if the problem comes in that my divs are all the same class.contact (not sure if that should affect the position of the overflowing divs)

Upvotes: 0

Views: 85

Answers (2)

AndHeiberg
AndHeiberg

Reputation: 1029

I would remove the .contactspace all together and instead center the .contact and add a min-width.

.detailwrap{
    top:70px;
    position:relative;
    width:100%;
    text-align: center; /* center align .contacts */
}

.contact {
    display: inline-block; /* make it possible to use text-align */
    position:relative;
    width: 15%;
    min-width: 115px; /* avoid 15% being making the contacts less than 115px */
    margin: 0 1% 2% 0;
}

Demo: http://jsfiddle.net/hf04x562/

Upvotes: 2

Lansana Camara
Lansana Camara

Reputation: 9873

You should try using display: block; float: left; margin: auto Reason being is that you're positioning needlessly in my opinion, and the way you position (relatively) is causing things to be pushed when you don't want them to because it positions relative to it's current position, which isn't very responsive unless you make it so.

Upvotes: 0

Related Questions