I'm working on webpage and divided it into several divs before adding text in it.
but when i put some text in one of that divs, all divs position just collapses.
I've made simple code to show the problem.
html{
height: 100%;
}
body{
height: 100%;
}
#wrapper{
height: 100%;
}
.box{
display: inline-block;
position: relative;
background: black;
}
#box-1{
top: 5%;
left: 5%;
height: 35%;
width: 35%;
}
#box-2{
top: 5%;
left: 10%;
height: 35%;
width: 50%;
}
#box-3{
top: 10%;
left: 5%;
height: 50%;
width: 35%;
}
#box-4{
top: 10%;
left: 10%;
height: 50%;
width: 50%;
}
<!DOCTYPE html>
<html>
<head>
<title>Issue</title>
</head>
<body>
<div id="wrapper">
<div id="box-1" class="box">
</div>
<div id="box-2" class="box">
</div>
<div id="box-3" class="box">
</div>
<div id="box-4" class="box">
</div>
</div>
</body>
</html>
As you can see, it is divided well without problem(at least in my opinion)
But as soon as you add the text in the div, it just collapse and I can't see why.
html{
height: 100%;
}
body{
height: 100%;
}
#wrapper{
height: 100%;
}
.box{
display: inline-block;
position: relative;
background: black;
}
#box-1{
top: 5%;
left: 5%;
height: 35%;
width: 35%;
}
#box-2{
top: 5%;
left: 10%;
height: 35%;
width: 50%;
}
#box-3{
top: 10%;
left: 5%;
height: 50%;
width: 35%;
}
#box-4{
top: 10%;
left: 10%;
height: 50%;
width: 50%;
}
p{
color: white;
}
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<div id="wrapper">
<div id="box-1" class="box">
<p>Hi</p>
</div>
<div id="box-2" class="box">
</div>
<div id="box-3" class="box">
</div>
<div id="box-4" class="box">
</div>
</div>
</body>
</html>
It collapses whether p tag exists or not.
Divs are positioned with %unit and it is relative.
So it should be relevent only to it's parent and brothers in my thought.
Should I reallocate all of them with absolute position?
If you know why, or have solution, please teach me.
thank you!
Put vertical-align: top; to .box by default it has vertical-align: baseline;
.box {
display: inline-block;
vertical-align: top;
position: relative;
background: black;
}
Alternative beside Ismail Farooq's answer
.box {
display: block;
position: relative;
background: black;
float: left;
}
I am using flexbox link is Flexbox here
<html>
<style>
html{
height: 100%;
}
body{
height: 100%;
}
#wrapper{
height: 100vh;
display: flex;
flex-direction: row;
flex-wrap: wrap;
}
.box{
display: flex;
background: black;
margin: 0.5%;
}
#box-1{
height: 50%;
width: 49%;
}
#box-2{
height: 50%;
width: 49%;
}
#box-3{
height: 50%;
width: 49%;
}
#box-4{
height: 50%;
width: 49%;
}
p{
color: white;
}
</style>
<body>
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<div id="wrapper">
<div id="box-1" class="box">
<p>Hi</p>
</div>
<div id="box-2" class="box">
</div>
<div id="box-3" class="box">
</div>
<div id="box-4" class="box">
</div>
</div>
</body>
</html>
</body>
</html>
Related
I am building a website and have come across an issue. The background color does not reach the position I would like it to be. It is only across half the screen instead of the full page. I need it to be a bit higher. I am not sure how to do this.
It is only across half the screen. How do I fix this? If you need more information, feel free to ask.
#aboit {
width: 100%;
height: 200vh;
background-color: lightgrey;
}
#aboit .block3 {
display: inline-block;
width: 225px;
height: 225px;
margin: 5px;
position: relative;
left: 300px;
bottom: 320px;
background-color: #FFE8F2;
}
#aboit .block4 {
display: inline-block;
width: 225px;
height: 225px;
margin: 5px;
position: relative;
left: 300px;
bottom: 320px;
background-color: #FFE8F2;
}
.container {
text-align: center;
}
#aboit .toixte {
position: relative;
bottom: 660px;
right: 300px;
font-size: 20px;
}
#aboit .toitle {
position: relative;
bottom: 660px;
right: 300px;
font-size: 20px;
font-weight: 50px;
}
<section id="aboit">
<div class="container">
<div class="block3"></div>
<div class="block3"></div>
</div>
<div class="container">
<div class="block4"></div>
<div class="block4"></div>
</div>
<div class="container">
<div class="toitle">
<p><b>About Us</b>
<p>
</div>
</div>
<div class="container">
<div class="toixte">
<p>We provide only the best cakes to our <br>customers. Each cake is made with love <br>and care, ensuring that our customers are <br>always taken care of. Our cakes are <br>available for pickup or, delivery applies if <br>you are in a certain area</p>
</div>
</div>
</p>
</p>
</div>
</div>
</section>
remove background-color: lightgrey; from #aboit and style in this way:
#aboit {
position:relative;
}
#aboit::before{
content: '';
position: absolute;
bottom: 0;
left: 0;
right: 0;
height: 60% // you can change to fit
background-color: lightgrey;
}
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
.container {
width: 100%;
max-width: 1170px;
margin: 0 auto;
}
.about {
background: lightgray;
height: 100vh;
}
.all {
display: flex;
justify-content: space-between;
}
.about-description {
text-align: center;
margin: 150px;
}
.blocks {
display: grid;
grid-template-columns: auto auto;
margin-top: 50px;
}
.block {
background-color: #ffe4f1;
width: 225px;
height: 225px;
margin: 10px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="index.css">
</head>
<body>
<section class="about">
<div class="container">
<div class="all">
<div class="about-description">
<h2>About Us</h2>
<p align="center">We provide only the best cakes to our <br>customers. Each cake is made with love <br>and care, ensuring that our customers are <br>always taken care of. Our cakes are <br>available for pickup or, delivery applies if <br>you are in a certain area</p>
</div>
<div class="blocks">
<div class="block"></div>
<div class="block"></div>
<div class="block"></div>
<div class="block"></div>
</div>
</div>
</div>
</section>
</body>
</html>
I'm creating a grid type layout, the contents of which will be centered, like here.
.outer {
width: 100%;
height: 100px;
margin-top: 10px;
margin-bottom: 10px;
position: relative;
background: pink;
text-align: center;
}
.inner {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 100%;
}
<div class="outer">
<div class="inner">
<h1>I'm Centered</h1>
</div>
</div>
I've used text-align: center; but there should be a better way to center the contents vertically too. My issue arises trying to do the same where two of these are next to each other with centered content, like this;
.outer {
width: 50%;
float: left;
position: relative;
background: pink;
}
#media only screen and (max-width: 500px) {
.outer {
width: 100%;
float: left;
position: relative;
background: pink;
}
}
.inner {
position: relative;
}
.inner-position {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 100%;
}
<div class="outer">
<div class="inner">
<div class="inner-position">
<p>I should be centered</p>
</div>
</div>
</div>
<div class="outer">
<div class="inner">
<div class="inner-position">
<p>I should be centered</p>
</div>
</div>
</div>
It's looking even worse in a snippet for some reason but something like this would be desired;
I can get the column layout or I can center content. I need to be able to do both.
EDIT
.container {
width: 100%;
height: 500px;
background: pink;
margin-top: 10px;
margin-bottom: 10px;
}
.col {
width: 50%;
float: left;
position: relative;
}
#media only screen and (max-width: 500px) {
.col {
width: 100%;
float: left;
position: relative;
}
}
.inner {
position: relative;
}
.inner-details {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 100%;
}
<div class="container">
<div class="col">
<div class="inner">
<div class="inner-details">
<h1>Middle 1</h1>
</div>
</div>
</div>
<div class="col">
<div class="inner">
<div class="inner-details">
<h1>Middle 2<h1>
</div>
</div>
</div>
</div>
To center items you can use display: flex on the container div and also use
align-items: center; // vertical
justify-content: center; // horizontal
To achieve the image you attached you don't need so many containers, this can be done simply like in this example:
.container {
width: 100%;
height: 300px;
margin-top: 10px;
margin-bottom: 10px;
display: flex;
flex-wrap: wrap;
}
#media only screen and (max-width: 500px) {
.inner-details {
width: 50%;
float: left;
position: relative;
}
}
.inner-details {
background: pink;
display: flex;
flex-grow: 1;
justify-content: center;
align-items: center;
margin: 10px;
}
<div class="container">
<div class="inner-details">
<h1>Middle 1</h1>
</div>
<div class="inner-details">
<h1>Middle 2</h1>
</div>
</div>
I hope this is your desire output. Please check the code snippets.
* {
box-sizing: border-box;
}
.outer {
width: 50%;
height: 100px;
float: left;
position: relative;
background: pink;
margin: 10px 0;
}
#media only screen and (max-width: 500px) {
.outer {
width: 100%;
}
}
.inner {
position: relative;
width: 100%;
height: 100%;
}
.inner-position {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
<div class="outer">
<div class="inner">
<div class="inner-position">
<p>I should be centered</p>
</div>
</div>
</div>
<div class="outer">
<div class="inner">
<div class="inner-position">
<p>I should be centered</p>
</div>
</div>
</div>
Using the example from the first snippet and wrapping that twice I've managed to get the desired effect, there's still the issue with having to use text-align to align horizontally but this is the closest I can get without using flex or box-sizing: border-box;. If there's a more appropriate way to do this an example would be appreciated.
.wrap {
width: 100%;
display: table;
}
.col {
width: 50%;
float: left;
}
#media only screen and (max-width: 500px) {
.col {
width: 100%;
float: left;
}
}
.outer {a
width: 100%;
height: 100px;
margin-top: 10px;
margin-bottom: 10px;
position: relative;
background: pink;
text-align: center;
}
.inner {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 100%;
}
<div class="wrap">
<div class="col">
<div class="outer">
<div class="inner">
<h1>I'm Centered</h1>
</div>
</div>
</div>
<div class="col">
<div class="outer">
<div class="inner">
<h1>I'm Centered Too</h1>
</div>
</div>
</div>
</div>
I want the divs inside content_container to be stacked vertically below each other and not overlap. Please help.
My HTML code:
<div id=content_container>
<div id=sub_nav>
</div>
<div id=content>
</div>
</div>
My CSS code:
#content_container{
float: left;
width: 100%;
height: 100%;
overflow: auto;
text-align: center;
}
#sub_nav{
position: fixed;
width: 100%;
}
#content{
width: 100%;
}
[1]: https://i.stack.imgur.com/28184.jpg
HTML
<div id=content_container>
<div id=sub_nav>
</div>
<div id=content>
</div>
</div>
CSS
#content_container{
float: left;
width: 100%;
height: 100%;
overflow: auto;
text-align: center;
display: flex;
flex-direction: column;
}
#sub_nav{
position: -webkit-sticky;
position: sticky;
top:0;
width: 100%;
}
#content{
width: 100%;
}
Hope this helps !!
Also, refer to https://css-tricks.com/snippets/css/a-guide-to-flexbox/ for full flexbox reference.
Your problem is the "position: fixed;" for the #sub_nav div.
Remove that and they should stack one on top of the other.
It will be much easily to use flex boxes:
#content_container {
display: flex;
height: 500px;
width: 100%;
}
#sub_nav {
background: red;
width: 200px;
}
#content {
flex: 1;
background: blue;
}
<div id=content_container>
<div id=sub_nav>
</div>
<div id=content>
</div>
</div>
Try This...
#content_container{
width: 100%;
height: 100%;
display: flex;
}
#sub_nav{
width: 50%;
height: 200px;
background-color: red;
}
#content{
width: 50%;
background-color: blue;
height: 200px;
}
<body>
<div id=content_container>
<div id=sub_nav>
</div>
<div id=content>
</div>
</div>
<body>
Much easier to do with flex boxes.
#content_container {
display: flex;
height: 500px;
width: 100%;
}
#sub_nav {
background: white;
width: 100px;
}
#content {
flex: 1;
background: green;
}
<div id=content_container>
<div id=sub_nav>
</div>
<div id=content>
</div>
</div>
position: fixed takes the element out of the flow and make it fixed to the viewport. which leads the next element to overlap.
so you need to let fixed element sub_nav show on top. and content would show by giving it padding on top or move the top start point with relative
element{
position: relative;
top: 20px;
}
Example
#content_container {
float: left;
width: 100%;
height: 100%;
overflow: auto;
text-align: center;
}
#sub_nav {
background-color: yellow;
position: fixed;
width: 100%;
z-index: 1;
}
#content {
background-color: cyan;
width: 100%;
padding-top: 30px;
height: 100px;
}
<div id=content_container>
<div id=sub_nav>sub_nav
</div>
<div id=content>content
</div>
</div>
I want to make a div like this
I used two <div> that contain two <h2> and must replace the top and bottom of the parent <div>.
Here is my code :
.parent {
background: #eae8db;
margin: 20px;
border: 1px solid black;
position: relative;
height: 300px;
}
.top {
background-color:#d6d1b1;
height: 15%;
width: 100%;
position: absolute;
top: -06%;
left: -03.7%;
line-height:100px;
vertical-align:middle;
}
h2{ text-align: center;}
.center {
position: absolute;
margin: auto;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
.bottom{
background-color:#24bfd1;
height: 5%;
width: 100%;
position: absolute;
bottom : 60%;
left: -03.7%;
line-height:100px;
vertical-align:middle;
}
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div class="parent" >
<div class="top">
<h2>E-book</h2>
</div>
<img class="center" src="https://picsum.photos/200">
<div class="bottom">
<h2>Voir</h2>
</div>
</div>
</body>
</html>
Link to JsFiddle
Someone can help me to adapt it please ?
I just made some changes in your CSS, replace it should help :
.parent {
background: #eae8db;
border: 1px solid black;
display: flex;
align-items:center;
justify-content:center;
height: 300px;
position:relative;
}
.top {
background-color:#d6d1b1;
height: 15%;
width: 100%;
position:absolute;
top:0;
display:flex;
justify-content:center;
align-items:center;
}
.bottom{
background-color:#24bfd1;
height: 12%;
width: 100%;
position: absolute;
bottom:0;
display:flex;
align-items:center;
justify-content:center;
}
I created a fiddle based on your DOM:
https://jsfiddle.net/xy0zqsnt/1/
I also tried to reuse your css classes, but I threw out some stuff, which didn't make sense to me. There is still room for improvement, but I hope you are able to recognize the changes in the css.
The main point is the use of display:flex in the .parent css class. Flexbox helps a lot for layout tasks like this, make sure to check it out (e.g.: https://css-tricks.com/snippets/css/a-guide-to-flexbox/ - but there are many resources out there!)
HTML
<div class="parent" >
<div class="top">
<h2>E-book</h2>
</div>
<img class="image" src="https://picsum.photos/200">
<div class="bottom">
<h2>Voir</h2>
</div>
</div>
CSS
h2{ text-align: center;}
.parent {
background: #eae8db;
margin: 20px;
height: 300px;
display: flex;
flex-direction: column;
align-items: center;
}
.top {
background-color:#d6d1b1;
width: 100%;
}
.bottom{
background-color:#24bfd1;
width: 100%;
}
.image{
margin: 1em;
}
Solution: ->
No need to use absolute position for this layout...
Here is the solution: ->
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div class="parent" >
<div class="top">
<h2>E-book</h2>
</div>
<p>
<img class="center" src="https://picsum.photos/200">
</p>
<div class="bottom">
<h2>Voir</h2>
</div>
</div>
</body>
</html>
CSS part->
.parent {
background: #eae8db;
margin: 20px;
}
.top {
background-color:#d6d1b1;
padding: 20px;
}
p{
margin-top: 0;
text-align: center;
padding: 50px 0;
}
h2{ text-align: center;}
.bottom{
background-color:#24bfd1;
padding: 10px;
}
My code is as shown below:
xyz.html
<div class='home-container'>
<div style="width:100%;height:auto;display: flex;flex-direction: row;z-index:400">
<div class="menu-main"></div>
</div>
xyz.css
.home-container {
width: 100vw;
height: 100vh;
overflow-y: scroll;
background: #fcfcfc;
}
.home-container .menu-main {
width: 43%;
height:3000px;
position: absolute;
background-color: red;
left: 300px;
}
But somehow, as soon as I insert position:absolute in menu-main, it looses its scrolling capabilities. So how can I acheive both scrolling and position absolute at the same time?
Add the style property position:relative;in your Parent Div(not in container) like below.
<div style="width:100%;height:auto;display: flex;flex-direction: row;z-index:400;position:relative;">
and also if you want horizontal scrolling also add overflow-x: scroll; in your CSS. Like below...
.home-container {
width: 100vw;
height: 100vh;
overflow-y: scroll;
overflow-x: scroll;
background: #fcfcfc;
}
.home-container .menu-main {
width: 43%;
height:3000px;
position: absolute;
background-color: red;
left: 300px;
}
<div class='home-container'>
<div style="width:100%;height:auto;display: flex;flex-direction: row;z-index:400;position:relative;">
<div class="menu-main"></div>
</div>
</div>
try this add a position:relative; for the parent div.
.home-container {
width: 100vw;
height: 100vh;
overflow-y: scroll;
background: #fcfcfc;
}
.home-container .menu-main {
width: 43%;
height:3000px;
position: absolute;
background-color: red;
left: 300px;
}
<div class='home-container'>
<div style="width:100%;height:auto;display: flex;flex-direction: row;z-index:400;position:relative;">
<div class="menu-main"></div>
</div>
</div>
body { margin: 0px; }
.home-container {
height: 100vh;
background: #fcfcfc;
margin: 0px auto;
}
.home-container .menu-main {
width: 53%;
height: 100vh;
position: relative;
background-color: red;
margin: 0px auto;
}
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<div class='home-container'>
<div>
<div class="menu-main"></div>
</div>
</div>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
body { margin: 0px; }
.home-container {
height: 100vh;
background: #fcfcfc;
margin: 0px auto;
}
.home-container .menu-main {
width: 53%;
height: 100vh;
position: relative;
background-color: red;
margin: 0px auto;
}
</style>
</head>
<body>
<div class='home-container'>
<div>
<div class="menu-main"></div>
</div>`enter code here`
</div>
</body>
</html>