CODEWITHSUNDEEP
javascripthtmlcss
lucafj2j282j
lucafj2j282j

Reputation: 891

How to get two divs below each other

My div is above the other and I used display:blockand such but that doesn't work. I am using the Vue js framework and I have a link to my fiddle here

I am also using flex but that doesn't solve it either. I thought flex 3 would help but it does not.

The code

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Countdown</title>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.0.1/vue.min.js"></script>

<link rel="stylesheet" href="style.css">
</head>
<body>
<div id="app">
<Countdown date="Februari 24, 2017 17:00"></Countdown>
</div>

<template id="countdown">

<div class="info">
    <p class="title">KNHB</p>
    <p class="description">Sprint 1</p>
</div>

<div class="timer">
    <div class="block">
        <p class="digit">{{ days | two_digits }}</p>
        <p class="text">Days</p>
    </div>
    <div class="block">
        <p class="digit">{{ hours | two_digits }}</p>
        <p class="text">Hours</p>
    </div>
    <div class="block">
        <p class="digit">{{ minutes | two_digits }}</p>
        <p class="text">Minutes</p>
    </div>
    <div class="block">
        <p class="digit">{{ seconds | two_digits }}</p>
        <p class="text">Seconds</p>
    </div>  
</div>

</template>
</script>
<script src="vue.js"></script>
</body>
</html>




@import url(https://fonts.googleapis.com/css?family=Roboto+Condensed:400|Roboto:100);
#app {
align-items: center;
bottom: 0;
background-color: #34495e;
display: flex;
justify-content: center;
left: 0;
position: absolute;
right: 0;
top:0;
}

.info {
width: 50%;
height: 200px;
flex: 3;
}

.timer {
flex-direction: column;
}

.block {
display: flex;
flex-direction: column;
margin: 20px;
float:left;
}

.text {
color: #1abc9c;
font-size: 25px;
font-family: 'Roboto Condensed', serif;
font-weight: 400;
margin-top:10px;
margin-bottom: 10px;
text-align: center;
}

.digit {
color: #ecf0f1;
font-size: 130px;
font-weight: 100;
font-family: 'Roboto', serif;
margin: 10px;
text-align: center;
}

.title {
color: #ecf0f1;
font-size: 100px;
font-family: 'Roboto Condensed', serif;
font-weight: 400;
margin-top:10px;
margin-bottom: 10px;
text-align: center;
}

.description {
color: #ecf0f1;
font-size: 50px;
font-family: 'Roboto Condensed', serif;
font-weight: 40;
margin-top:10px;
margin-bottom: 10px;
text-align: center;
}

Upvotes: 0

Views: 2014

Answers (3)

azs06
azs06

Reputation: 3517

As mentioned in the comment don't use float with flexbox. You also need to set flex-direction on #app. Also I don't think you need to set #app's position into absolute.

What version of vue.js you are using? vue.js 2 doesn't support coerce. 

Vue.component('Countdown', {
        template: '#countdown',

    props: {
        date : {
            type: String,
        },
    },
    data() {
        return {
            now: Math.trunc((new Date()).getTime() / 1000)
        }
    },
    ready() {
        window.setInterval(() => {
            this.now = Math.trunc((new Date()).getTime() / 1000);
        },1000);
    },
    computed: {
		countdownDate(){
return Math.trunc(Date.parse(this.date) / 1000);	
		},
        seconds() {
            return (this.countdownDate - this.now) % 60;
        },
        minutes() {
            return Math.trunc((this.countdownDate - this.now) / 60) % 60;
        },
        hours() {
            return Math.trunc((this.countdownDate - this.now) / 60 / 60) % 24;
        },
        days() {
            return Math.trunc((this.countdownDate - this.now) / 60 / 60 / 24);
        }
    }
})

Vue.filter('two_digits', function (value) {
    if(value.toString().length <= 1)
    {
        return "0"+value.toString();
    }
    return value.toString();
});
new Vue({
    el: '#app',
	
})
@import url(https://fonts.googleapis.com/css?family=Roboto+Condensed:400|Roboto:100);
#app {
    align-items: center;
    flex-direction: column;
    bottom: 0;
    background-color: #34495e;
    display: flex;
    justify-content: center;
}

.info {
	height: 200px;
}

.timer {
	display: flex;
  flex-wrap: wrap;
  justify-content: center;
}

.block {
    display: flex;
    flex-direction: column;
    margin: 20px;
}

.text {
    color: #1abc9c;
    font-size: 25px;
    font-family: 'Roboto Condensed', serif;
    font-weight: 400;
    margin-top:10px;
    margin-bottom: 10px;
    text-align: center;
}

.digit {
    color: #ecf0f1;
    font-size: 130px;
    font-weight: 100;
    font-family: 'Roboto', serif;
    margin: 10px;
    text-align: center;
}

.title {
	color: #ecf0f1;
    font-size: 100px;
    font-family: 'Roboto Condensed', serif;
    font-weight: 400;
    margin-top:10px;
    margin-bottom: 10px;
    text-align: center;
}

.description {
	color: #ecf0f1;
    font-size: 50px;
    font-family: 'Roboto Condensed', serif;
    font-weight: 40;
    margin-top:10px;
    margin-bottom: 10px;
    text-align: center;
}
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
<div id="app">
    <Countdown date="Februari 24, 2017 17:00"></Countdown>
</div>

<template id="countdown">
<section>
  <div class="info">
        <p class="title">KNHB</p>
        <p class="description">Sprint 1</p>
    </div>

    <div class="timer">
        <div class="block">
            <p class="digit">{{ days | two_digits }}</p>
            <p class="text">Days</p>
        </div>
        <div class="block">
            <p class="digit">{{ hours | two_digits }}</p>
            <p class="text">Hours</p>
        </div>
        <div class="block">
            <p class="digit">{{ minutes | two_digits }}</p>
            <p class="text">Minutes</p>
        </div>
        <div class="block">
            <p class="digit">{{ seconds | two_digits }}</p>
            <p class="text">Seconds</p>
        </div>  
    </div>	
</section> 
</template>	
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.0.3/vue.js"></script>		
</body>
</html>

I also made few other css related changes, please check and let me know if this the desired outcome you want.

Upvotes: 1

Fred Rocha
Fred Rocha

Reputation: 440

The default behaviour of divs is to stack on top of each other. If you remove all styles and use pure html, you should be good.

#first {
  border: 1px solid red;
}

#second {
  border: 1px solid green;
}
<div id="first">DIV 1</div>
<div id="second">DIV 2</div>

Is this what you intended?

Upvotes: 0

pan.goth
pan.goth

Reputation: 1485

Add flex-direction: column to #app.

Updated JSFiddle

And this is the fiddle after a little cleaning (removed unnecessary styles from .block and added flex styles to .timer):

Cleaned JSFiddle

Upvotes: 0

Related Questions