I want to make a website with div one below the another .How do i set the height of the responsive page .There is no content inside div .I want to make solid border rectangle .This is for practise purpose.
html,
body {
width: 100%;
min-height: 100%;
margin: 0px;
padding: 0px;
-webkit-text-size-adjust: none;
font-size: 62.5%;
background: #906aaf
}
.header {
width: 100%;
height: 10%;
background-color: #7e599e;
position: fixed;
z-index: 1;
top: 0
}
.one {
width: 50%;
height: 30%;
border: 10px solid black;
margin-left: auto;
margin-right: auto;
height: auto;
width: auto;
}
.two {
width: 50%;
height: 30%;
border: 10px solid black;
}
.three {
width: 50%;
height: 30%;
border: 10px solid black;
}
.four {
width: 50%;
height: 30%;
border: 10px solid black;
}
.five {
width: 50%;
height: 30%;
border: 10px solid black;
}
<div class="header"></div>
<div class="one"></div>
<div class="two"></div>
<div class="three"></div>
<div class="four"></div>
<div class="five"></div>
If I understand your question correctly and you want to position the first div in the html to show on the web page AFTER those that come next in the html -
You can use css3 flexbox. Apply the display:flex on the body and then use order on the body's children to order them.
So in your example, add this to your css -
body {
display: flex;
flex-direction: column; //(Flexbox defaults to row, apply this to change back to column)
}
.one {
order: 5;
}
.two {
order: 1;
} ...
Have a look at this for more info.
use pixel instead of %
html,
body {
width: 100%;
min-height:800px;
margin: 0px;
padding: 0px;
-webkit-text-size-adjust: none;
font-size: 62.5%;
background: #906aaf
}
.header {
width: 100%;
height: 80px;
background-color: #7e599e;
position: fixed;
z-index: 1;
top: 0
}
.one {
width: 50%;
height: 240px;
border: 10px solid black;
margin-left: auto;
margin-right: auto;
height: auto;
width: auto;
}
.two {
width: 50%;
height: 240px;
border: 10px solid black;
}
.three {
width: 50%;
height: 240px;
border: 10px solid black;
}
.four {
width: 50%;
height: 240px;
border: 10px solid black;
}
.five {
width: 50%;
height: 240px;
border: 10px solid black;
}
<div class="header"></div>
<div class="one"></div>
<div class="two"></div>
<div class="three"></div>
<div class="four"></div>
<div class="five"></div>
Related
I have a Canvas and want to add a Div/Button in the bottom right-hand corner relative to Canvas. My current code looks as follows:
#container {
margin-top: 5px;
width: 96%;
margin: auto;
background-color: blue;
height: 300px;
}
#viewer {
width: 40%;
background-color: red;
height: 100%;
}
#button {
height: 40px;
width: 40px;
background-color: green;
position: absolute;
bottom: 0;
right: 0;
}
canvas {
border: 3px solid black;
width: 100%;
height: 100%;
}
<div id="container">
<div id="viewer">
<canvas></canvas>
<div id="button" onclick="myFunction();"></div>
</div>
</div>
But so far I couldn't manage to find a proper solution for this. It would be great if someone could help me with this.
Is this what you are looking for?
I recommand you checking out this article: CSS Layout - The position Property
#container{
margin-top: 5px;
width: 96%;
margin: auto;
background-color: blue;
height: 300px;
}
#viewer{
width: 40%;
background-color: red;
height: 100%;
position:relative;
}
#button{
height: 40px;
width: 40px;
background-color: green;
position: absolute;
bottom: 0;
right: 0;
}
canvas{
border: 3px solid black;
width: 100%;
height: 100%;
}
<div id="container">
<div id="viewer">
<canvas></canvas>
<div id="button" onclick="myFunction();"></div>
</div>
</div>
I think Temani was right — this puts the button at the bottom right of the canvas, is this not what you wanted?
#container{
margin-top: 5px;
width: 96%;
margin: auto;
background-color: blue;
height: 300px;
}
#viewer{
width: 40%;
background-color: red;
height: 100%;
position: relative;
}
#button{
height: 40px;
width: 40px;
background-color: green;
position: absolute;
bottom: 0;
right: 0;
}
canvas{
border: 3px solid black;
width: 100%;
height: 100%;
}
<div id="container">
<div id="viewer">
<canvas></canvas>
<div id="button" onclick="myFunction();"></div>
</div>
</div>
Like Temani Afif said.
position:relative
on #viewer worked for me.
I have 4 divs, outer, inner, title, and content. I want to place inner div inside the outer, and title and content - inside the inner div, one on top of the other. I positioned outer and inner divs relative and the other 2 - absolute.
inner div fits right inside thew outer, but title and content overflow the inner div.
How can I fix my CSS here?
#outer {
width: 90%;
margin: 20px auto;
border: 2px solid red;
height: 500px;
position: relative;
}
#inner {
width: 100%;
border: 1px solid green;
height: 300px;
position: relative;
}
#inner .title {
width: 100%;
height: 63px;
padding-left: 1%;
padding-top: 5px;
border-radius: 2px;
float: left;
border: 1px solid blue;
background-color: lightblue;
position: absolute;
top: 0;
}
#inner .content {
padding: 2em 2em;
width: 100%;
height: 100%;
margin: 0 auto;
background: #FFF;
height: auto;
display: block;
float: left;
border: 2px solid orange;
position: absolute;
top: 20%;
}
<div id="outer">
<div id="inner">
<div class="title"></div>
<div class="content"></div>
</div>
</div>
#outer {
width: 90%;
margin: 20px auto;
border: 2px solid red;
height: 500px;
position: relative;
}
#inner {
max-width: 100%;
border: 1px solid green;
height: 300px;
position: relative;
padding: 0 5px;
}
#inner .title {
width: 100%;
height: 63px;
padding-top: 5px;
border-radius: 2px;
border: 1px solid blue;
background-color: lightblue;
}
#inner .content {
width: 100%;
height: 63px;
background: #FFF;
display: block;
border: 1px solid orange;
}
<div id="outer">
<div id="inner">
<div class="title"></div>
<div class="content"></div>
</div>
</div>
to prevent the title and content from overflow each other just assign a relative position to them and assign the absolute position to its parent . just like that
#outer {
width: 90%;
margin: 20px auto;
border: 2px solid red;
height: 500px;
position: relative;
}
#inner {
width: 90%;
border: 1px solid green;
height: 300px;
position: absolute;
}
#inner .title {
width: 100%;
height: 63px;
padding-left: 1%;
padding-top: 5px;
border-radius: 2px;
float: left;
border: 1px solid blue;
background-color: lightblue;
position: relative;
top: 0;
}
#inner .content {
padding: 2em 2em;
width: 100%;
height: 100%;
margin: 0 auto;
background: #FFF;
height: auto;
display: block;
float: left;
border: 2px solid orange;
position: relative;
top: 20%;
}
<div id="outer">
<div id="inner">
<div class="title"></div>
<div class="content"></div>
</div>
</div>
I'm trying to make a rectangular div that's 95% the width of the viewport and 20% high. But I want another rectangular div inside of that, that is vertically and horizontally centered with a slight2px margin.
.Outer {
border: 1px solid #ccc;
max-width: 95vw;
max-height: 20vh;
width: 95vw;
height: 20vh;
margin: auto;
display: block;
}
.Inner {
border: 1px solid hotpink;
width: 95%;
height: 95%;
margin: auto;
}
It depends upon requirements. But according to question, here is the answer. Please take a look and let me know in case of any issue
.Outer {
width: 95vw;
height: 20vh;
border: 1px solid #ccc;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.Inner {
border: 1px solid hotpink;
position: absolute;
top: 10px;
right: 10px;
bottom: 10px;
left: 10px;
}
<div class="Outer">
<div class="Inner"></div>
</div>
Tried to use relative measuring units just in case you are dealing with a responsive design. The .outer box is display: table and the Inner is display: table-cell. They sit perfectly together and the 2px margin your requested is provided by a 2px padding from .Outer
html {
box-sizing: border-box;
font: 500 16px/1.428'Consolas';
height: 100vh;
width: 100vw;
}
*,
*:before,
*:after {
box-sizing: inherit;
margin: 0;
padding: 0;
}
body {
position: relative;
font-size: 1rem;
line-height: 1;
height: 100%;
width: 100%;
}
.Outer {
position: absolute;
top: 20%;
left: 3%;
outline: 1px solid #ccc;
max-width: 95vw;
max-height: 20vh;
width: 95vw;
height: 20vh;
margin: auto;
display: table;
padding: 2px;
}
.Inner {
border: 1px solid hotpink;
width: 95%;
height: 95%;
margin: auto;
display: table-cell;
}
<section class="Outer">
<section class="Inner"></section>
</section>
I'm not 100% this is what your looking for because this has Magic Numbers, but here is a JSFiddle of what I came up with using your provided code.
#Outer {
border: 1px solid #ccc;
max-width: 95vw;
max-height: 20vh;
width: 95vw;
height: 20vh;
margin: auto;
display: block;
position: relative;
}
#Inner {
border: 1px solid hotpink;
width: 95%;
height: 50%;
position: aboslute;
margin-top: 5vh;
margin-left: 2.5vw;
}
<div id=Outer>
<div id=Inner>
</div>
</div>
JSFiddle
Hopefully this helps and you could mess around with it to use percentages on the viewpoints instead of magic numbers.
When I want to center a div vertically, I have a couple classes that help me to do it.
.outer {
border: 1px solid #ccc;
max-width: 95vw;
max-height: 20vh;
width: 95vw;
height: 20vh;
margin: auto;
display: block;
}
.inner {
border: 1px solid hotpink;
width: 95%;
height: 90%;
margin: auto;
}
.valign-wrap {
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
}
.valign-wrap .valign {
display: block;
}
<div class="outer valign-wrap">
<div class="inner valign center"></div>
</div>
JSFiddle
I always recommend add these classes to your projects, they are very useful. Good luck!
i have this main_window div which is 800px wide, and 550 px height, then there is two divs that should be next to it, troubleshooting_area and timeline div, those two make up for the 550 in height but need to be floating to the right of the main window
the two divs below should be next to the main window, how can i achieve that??
here is a demo http://jsfiddle.net/S8RC3/3/
<div class="appview_fullscreen app_ama">
<center><strong>Auto Mechanics Alliance</strong> </br>
<i>let us come together and become one</i>
</center>
<div class="main_area">
<div class="tabs_area">
</div>
<div class="main_window">
</div>
<div class="troubleshoot_area">
</div>
<div class="timeline">
</div>
</div>
</div>
body
{
width: 100%;
height: 100%;
margin: 0px;
}
.appview_fullscreen
{
width: 1005px;
background-color: black;
color: white;
font-size: 20px;
margin: 0px;
padding: 2px;
}
.main_area
{
border: 2px solid green;
padding: 2px;
margin: 0px;
}
.tabs_area
{
border: 1px solid green;
height: 20px;
}
.main_window
{
min-height: 550px;
border: 1px solid green;
width: 800px;
margin: 2px 1px 1px 1px;
}
.troubleshoot_area
{
border: 1px dotted green;
height: 200px;
width: 200px;
}
.timeline
{
border: 1px solid green;
height: 350px;
width: 200px;
}
In your case, I would simply add:
position: absolute;
top: 76px;
left: 808px;
to your .timeline and .troubleshoot-area classes.
You can see an updated fiddle here: http://jsfiddle.net/S8RC3/4/
Try these ways.
CSS
body
{
width: 99%;
height: 100%;
margin: 0px;
}
.appview_fullscreen
{
width: 1005px;
background-color: black;
color: white;
font-size: 20px;
margin: 0px;
padding: 2px;
}
.main_area
{
border: 2px solid green;
padding: 2px;
margin: 0px;
}
.tabs_area
{
border: 1px solid green;
height: 20px;
}
.main_window
{
min-height: 550px;
border: 1px solid green;
width: 800px;
margin: 2px 1px 1px 1px;
display:inline-block;
}
.troubleshoot_area
{
border: 1px dotted green;
height: 200px;
width: 200px;
position: absolute;
top: 76px;
left: 808px;
}
.timeline
{
border: 1px solid green;
height: 350px;
width: 200px;
float:right;
position: absolute;
top: 76px;
left: 808px;
}
DEMO Fiddle
I need help to fix the next layout, because:
It doesnt look right for IE
The footer doesnt stay at bottom when #columns content grows up
I need to make the #column container 100% min-height with small content
Thanks in advance!
This is my code:
<style>
* {
margin: 0;
padding: 0;
}
body, html {
background: silver;
height: 100%;
}
#header {
min-width: 1000px;
width: 100%;
height: 40px;
background: red;
}
#columns {
width: 1000px;
background: white;
margin: 0 auto;
padding-bottom: 40px;
border: 1px solid black;
}
#footer {
position: absolute;
bottom: 0;
min-width: 1000px;
width: 100%;
height: 40px;
background: black;
}
<body>
<div id="header"></div>
<div id="columns"></div>
<div id="footer"></div>
</body>
Try this (edited) :
JSFiddle: http://jsfiddle.net/NeCc3/14/
* {
margin: 0;
padding: 0;
}
body, html {
background: silver;
height:100%
}
#header {
width: 100%;
height: 40px;
background: red;
}
#columns{
min-height:100%;
width: 1000px;
background: white;
margin: 0 auto;
padding-bottom: 40px;
border: 1px solid black;
}
#footer {
width: 100%;
height: 40px;
background: black;
}