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>
Related
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>
I have 3 div elements, one is the parent and other two are children:
<div id="table">
<div id="first"> dinesh </div>
<div id="second"> pathak </div>
</div>
and their css are:
#table {
display: table;
width: 200px;
height: 200px;
margin: 0;
border: 5px solid blue;
padding: 5px;
}
#first {
display: table-cell;
border: 3px solid red;
margin: 2px;
width: 50px;
height: 200px;
overflow: hidden;
}
#second {
display: table-cell;
border: 3px solid red;
margin: 2px;
width: 50px;
height: 200px;
overflow: hidden;
}
I am giving the #table div the height of element height #first, and #second has the height that is greater than its parent. But I want that the inner div to be visible only if their parent height and the rest are hidden. But the parent is taking the height of its children.
Overflow:hidden only works on block-level elements, hence it not working with display: table. To fix this, you can use position: absolute on your inner elements and position: relative on the parent div.
Hope this helps!
#table {
display: table;
width: 200px;
height: 100px;
margin: 0;
border: 5px solid blue;
padding: 5px;
position: relative;
overflow: hidden;
}
#first {
display: table-cell;
border: 3px solid red;
margin: 2px;
width: 50px;
height: 300px;
position: absolute;
top: 0;
left: 15%;
}
#second {
display: table-cell;
border: 3px solid red;
margin: 2px;
width: 50px;
height: 300px;
position: absolute;
top: 0;
left: 55%;
}
<div id="table">
<div id="first"> dinesh </div>
<div id="second"> pathak </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've got a AND logic gate being created with a set of divs. I would like them to scale with the size of the outer most .gate div. I would like it to be 100% the width and height of the .gate div.
I've got things almost working, the AND gate is 2 pixels taller and with width is a bit wonky. The width I think has to do with the padding on the .outer div but I'm not sure of a better way to do it.
jsfiddle
HTML
<div class="gate">
<div class="outer">
<div class="inner">
<div class="andInA"></div>
<div class="andInB"></div>
<div class="andOutA"></div>
<div class="andLeft"></div>
<div class="andRight"></div>
</div>
</div>
</div>
CSS
.gate {
position: relative;
width: 150px;
height: 100px;
background-color: #ccc;
}
.outer {
position: relative;
padding: 0 30% 0 0;
height: 100%;
}
.inner {
position: relative;
margin: 0 20% 0 20%;
width: 100%;
height: 100%;
}
.gate .andLeft {
position: absolute;
left: 0px;
height: 100%;
width: 45%;
border-top: 1px solid black;
border-bottom: 1px solid black;
border-left: 1px solid black;
border-right: 0px solid black;
}
.gate .andRight {
position: absolute;
right: 0px;
height: 100%;
width: 75%;
border-top: 1px solid black;
border-bottom: 1px solid black;
border-left: 0px solid black;
border-right: 1px solid black;
border-radius: 0% 100% 100% 0%;
}
.andInA {
position: absolute;
top: 25%;
margin-left: -20%;
width: 20%;
height: 1px;
border-top: 1px solid black;
}
.andInB {
position: absolute;
top: 75%;
margin-left: -20%;
width: 20%;
height: 1px;
border-bottom: 1px solid black;
}
.andOutA {
position: absolute;
top: 50%;
right: 0px;
margin-right: -20%;
width: 20%;
height: 1px;
border-top: 1px solid black;
}
Use the box-sizing property:
* {
box-sizing: border-box;
-moz-box-sizing: border-box;
}
http://jsfiddle.net/eNT2d/3/
Decrease your inner height and increase your inner widh by 2%.
.inner {
position: relative;
margin: 0 20% 0 20%;
width: 102%;
height: 98%;
}