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>
Related
I have a webpage with following structure:
div: (app)
div: (navbar)
div: (wrapper) {position: relative}
div: (intro)
div: (content) {position: absolute}
div: (footer)
where div-content is dynamic that means it should extend if the data inside this div extends from its minimum height.
I am trying to add the footer at the end of the content but since content has absolute position, footer is being placed at the end of Intro.
I am beginner at front-end designing so pardon me if I am missing something basic. Please refer me some reading articles as well related to concepts about positioning divs.
This is my code:
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
.App {
text-align: center;
}
.navbar {
height: 60px;
background-color: #333;
}
.wrapper {;
position: relative;
border: 4px solid yellow;
}
.intro {
height: 450px;
background-color: blue;
background-repeat: no-repeat;
background-position: center;
background-size: cover;
margin: 0 auto;
padding-top: 70px;
/* align-items: center;
justify-content: center;
display: flex;*/
}
.content {
position: absolute;
top: 250px;
width: 94%;
right: 3%;
left: 3%;
background-color: white;
border-radius: 6px;
box-shadow: 0 2px 15px 0 rgba(61,61,61,.15);
max-width: 960px;
margin: auto;
min-height: 800px;
background-color: gray;
}
.footer {
bottom: 0;
width: 100%;
height: 2.5rem; /* Footer height */
background-color: red;
}
</style>
</head>
<body>
<div class="app">
<div class="navbar">Navbar</div>
<div class="wrapper">
<div class="intro">Intro</div>
<div class="content">Content</div>
</div>
<div class="footer">Footer</div>
</div>
</body>
</html>
NOTE: .content is overlapped with .intro intentionally. and that is why i am using position absolute for .content
Remove position: absolute; from .content. This will fix the overlapping with the footer. The width will need to be adjusted accordingly (make width: 100%).
Updated: .contentto span width
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
.App {
text-align: center;
}
.navbar {
height: 60px;
background-color: #333;
}
.wrapper {;
border: 4px solid yellow;
}
.intro {
height: 450px;
background-color: blue;
background-repeat: no-repeat;
background-position: center;
background-size: cover;
margin: 0 auto;
padding-top: 70px;
}
.content {
margin: -250px auto auto;
width: 94%;
background-color: white;
border-radius: 6px;
box-shadow: 0 2px 15px 0 rgba(61,61,61,.15);
max-width: 906px;
min-height: 800px;
background-color: gray;
}
.footer {
width: 100%;
height: 2.5rem; /* Footer height */
background-color: red;
}
</style>
</head>
<body>
<div class="app">
<div class="navbar">Navbar</div>
<div class="wrapper">
<div class="intro">Intro</div>
<div class="content">Content</div>
</div>
<div class="footer">Footer</div>
</div>
</body>
</html>
delete your content min-height. is that what you need?
In our ecommerce project all photos are squares. So some products have a lot of whitespace on top and bottom. I wan't to 'cut' that space without editing the photos (thousands). I almost achieved my goal. But parent DIV stretches to basic 100% of the IMG.
.container {
box-sizing: border-box;
width: 100%;
padding: 0 40px;
}
.main-header {
height: 80px;
width: 100%;
background-color: grey;
}
.product {
display: flex;
flex-flow: row nowrap;
margin-top: 20px;
}
.media {
flex: 1;
background-color: grey;
margin-right: 20px;
}
.landscape {
object-fit: cover;
width: 100%;
height: 60%;
}
.purchase {
width: 160px;
background-color: grey;
}
<div class="container">
<header class="main-header">
</header>
<content class="product">
<div class="media">
<img class="landscape" src="https://cdn.shopify.com/s/files/1/0286/1214/products/Trance-3-Color-B-Neon-Green.jpg">
</div>
<div class="purchase">
</div>
</content>
</div>
You could remove height: 60% from your image (which doesn't affect your image, but the .media's div height, since that div has no height set to it.). Now the container div resizes depending on the image's size (or the content of the other '.purchase' div in the flex-container, if that has more height).
Hope it helps, since I am really just guessing what you are trying to do here.
.container {
box-sizing: border-box;
width: 100%;
padding: 0 40px;
}
.main-header {
height: 80px;
width: 100%;
background-color: grey;
}
.product {
display: flex;
flex-flow: row nowrap;
margin-top: 20px;
}
.media {
flex: 1;
background-color: grey;
margin-right: 20px;
}
.landscape {
object-fit: cover;
width: 100%;
}
.purchase {
width: 160px;
background-color: grey;
}
<div class="container">
<header class="main-header">
</header>
<content class="product">
<div class="media">
<img class="landscape" src="https://cdn.shopify.com/s/files/1/0286/1214/products/Trance-3-Color-B-Neon-Green.jpg">
</div>
<div class="purchase">
</div>
</content>
</div>
Try removing the height:60%; from .landscape and instead set a fixed height for both .media and .landscape in pixels.
.container {
box-sizing: border-box;
width: 100%;
padding: 0 40px;
}
.main-header {
height: 80px;
width: 100%;
background-color: grey;
}
.product {
display: flex;
flex-flow: row nowrap;
margin-top: 20px;
}
.media {
flex: 1;
background-color: grey;
margin-right: 20px;
height: 600px;
width: 100%;
}
.landscape {
object-fit: cover;
width: 100%;
height: 600px;
}
.purchase {
width: 160px;
background-color: grey;
}
<div class="container">
<header class="main-header">
</header>
<content class="product">
<div class="media">
<img class="landscape" src="https://cdn.shopify.com/s/files/1/0286/1214/products/Trance-3-Color-B-Neon-Green.jpg">
</div>
<div class="purchase">
</div>
</content>
</div>
Ok,I've found a solution by using the Javascript. Hope I will find some day pure CSS/HTML solution.
window.onload = resizer;
window.onresize = resizer;
function resizer() {
var div = document.getElementById('media');
div.style.height = (div.offsetWidth / 1.5) + 'px';
};
div {
box-sizing: border-box;
}
.container {
width: 100%;
padding: 0 40px;
}
.main-header {
height: 80px;
width: 100%;
background-color: grey;
}
.product {
display: flex;
flex-flow: row nowrap;
margin-top: 20px;
}
#media {
flex: 1;
overflow: hidden;
margin-right: 20px;
background-color: grey;
}
#media > img {
object-fit: cover;
width: 100%;
height: 100%;
}
.purchase {
width: 360px;
background-color: grey;
}
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="reset.css">
<link rel="stylesheet" type="text/css" href="style.css">
<title>Hello world!</title>
</head>
<body>
<div class="container">
<header class="main-header">
</header>
<content class="product">
<div id="media">
<img src="https://cdn.shopify.com/s/files/1/0286/1214/products/Trance-3-Color-B-Neon-Green.jpg">
</div>
<div class="purchase">
</div>
</content>
</div>
</body>
</html>
I want to create two divs, one under other without JS and with IE8 support.
Each has 100% width.
Each with relative or absolute positioning for nested layout.
Top div have height by content, not fixed (it is important) and bottom div on whole leftover space.
In my example bottom div is too short, how i can stretch it to bottom?
<html>
<head>
<style type="text/css"><!--
* {
padding: 1px;
margin: 0px;
border: solid 1px;
width: 100%;
}
#super {
position: absolute;
height: 100%;
}
#top {
position: relative;
}
#bottom {
position: relative;
top: 0px;
bottom: 0px;
}
--></style>
</head>
<body>
<div id="super">
<div id="top">top</div>
<div id="bottom">bottom</div>
</div>
</body>
</html>
You can use css table properties to create this layout.
HTML:
<div id="super">
<div id="top">
<div class="content">
top
</div>
</div>
<div id="bottom">
<div class="content">
bottom
</div>
</div>
</div>
Necessary CSS:
html,
body {
height: 100%;
}
#super {
height: 100%;
width: 100%;
display: table;
}
#super > div {
display: table-row;
}
#top {
background: green;
}
#bottom {
background: blue;
}
html,
body {
height: 100%;
padding: 0;
margin: 0;
}
#super {
height: 100%;
width: 100%;
display: table;
}
#top {
background: green;
overflow: hidden;
height: 1%;
}
.content {
padding: 10px;
}
#bottom {
background: blue;
}
#super > div {
display: table-row;
}
<div id="super">
<div id="top">
<div class="content">
top
</div>
</div>
<div id="bottom">
<div class="content">
bottom</div>
</div>
</div>
Output Image:
You can use display: table for wrapping container and table-row for top and bottom divs:
* {
padding: 1px;
margin: 0px;
border: solid 1px;
width: 100%;
}
#super {
display: table;
position: absolute;
height: 100vh;
}
#top {
display: table-row;
height: 1px;
position: relative;
background: orange;
}
#bottom {
display: table-row;
position: relative;
top: 0px;
bottom: 0px;
background: teal;
}
<div id="super">
<div id="top">top<br>top text</div>
<div id="bottom">bottom</div>
</div>
Use flex-box
.parent{
display: flex;
flex-direction: column;
min-height: 100vh
}
.child2{
flex: 1;
background: blue;
}
<div class="parent">
<div class="child1"> first child</div>
<div class="child2"> second child</div>
</div>
Demo here
Try this :
#bottom {
position: relative;
top: 0px;
bottom: 0px;
HEIGHT: 800px;
}
I want to make .side-menu element's position fixed, but I have no success with the code below. .side-menu element moves with .child-container content.
Why it doesn't work and how to make it work? :)
HTML:
<div class="pageWrapper">
<div class="container">
<div class="side-menu">
Menu content
</div>
<div class="child-container">
Large Content
</div>
</div>
</div>
CSS:
body, html {
height: 100%;
width: 100%;
margin: 0;
padding: 0;
}
.pageWrapper {
overflow-x: hidden;
min-width: 1200px;
height: 100%;
}
.container {
position: relative;
width: 1170px;
margin: 0 auto;
height: 100%;
}
.side-menu {
position: fixed;
width: 80px;
height: 300px;
}
.child-container {
position: relative;
margin: 40px auto 0 auto;
width: 900px;
}
I have updated the code with the html of the question:
<!DOCTYPE html>
<html>
<head>
<title>test</title>
<style type="text/css">
*
{
margin: 0;
}
.container
{
position: static;
padding: 0px;
width: 1200px;
margin: 0 auto 0 auto;
}
.side-menu
{
position: fixed;
background: red;
width: 200px;
}
.child-container
{
background: orange;
float: left;
width: 1000px;
margin-left: 200px;
}
</style>
<body>
<div class="pageWrapper">
<div class="container">
<div class="side-menu">
Menu content
</div>
<div class="child-container">
Large Content
</div>
</div>
</div>
</body>
</html>
Description:
I am trying to learn to align elements such as divs and headers.
Here's what I have so far > http://jsfiddle.net/QxV6p/
Below are the issues:
The "Main section - in red" is not aligned with the blue header on the right hand side.
I have set the width of the body and the header to the same value of 1000px. And I have set the left div (black) to have a width of 20% and the main div to have a width of 79% (both inside the body) leaving a margin of 10px between the two divs.
I believe I have positioned the div correctly using the "position: relative" feature.
Please suggest what is wrong with the code? Also is there a better way of making the divs (in this case the left/black div and the main/red div) align as if they were inline?
I've tried "display: inline" but for some reason it makes the divs disappear. Any help is appreciated.
Code:
<!DOCTYPE html>
<head>
<style>
header {
max-width: 1000px;
height: 100px;
background: blue;
}
body {
max-width: 1000px;
}
.left {
width: 20%;
height: 2000px;
background: black;
margin-top: 10px;
}
.main {
width: 79%;
height: 2000px;
margin-top: 10px;
background: red;
position: relative;
top: -2010px;
left: 210px;
}
</style>
</head>
<html>
<header>
</header>
<body>
<div class="left"></div>
<div class="main"></div>
</body>
</html>
firstly you need a valid html code
<html>
<body>
<div class="wrapper">
<header>
</header>
<div class="left"></div>
<div class="main"></div>
</div>
</body>
</html>
CSS
header {
max-width: 1000px;
height: 100px;
background: blue;
}
.wrapper {
max-width: 960px;
margin:0 auto;
}
.left, .main {
display:inline-block;
margin-top:10px;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.left {
width: 20%;
height: 2000px;
background: black;
}
.main {
width: 79%;
height: 2000px;
background: red;
margin-left:4px;
}
DEMO
My recommendations:
Avoid positioning using pixels.
Avoid floats for layout.
KISS: if you want your main content to be 80%, set it to 80%. Manually manouvering it into position will take more time and scales poorly.
Demo (I changed some of the sizes for easier viewing in the fiddle)
HTML
<header></header>
<body>
<div class="left"></div><div class="main"></div>
</body>
CSS
header {
height: 100px;
background: blue;
}
.left {
display: inline-block;
width: 20%;
height: 100px;
background: black;
}
.main {
display: inline-block;
width: 80%;
height: 100px;
background: red;
}
use float:left on each element
see it here
<!DOCTYPE html>
<head>
<style>
header {
max-width: 1000px;
margin: 0 auto;
height: 100px;
background: blue;
}
body {
margin:0;
padding:0;
}
.left {
width: 20%;
height: 2000px;
background: black;
margin-top: 10px;
}
.main {
width: 79%;
height: 2000px;
margin-top: 10px;
background: red;
position: relative;
top: -2010px;
left: 210px;
}
.wrapper{
margin:0 auto;
}
.container{
margin: 0 auto;
width: 1200px;
}
</style>
</head>
<html>
<body>
<header>
</header>
<div class="wrapper">
<div class="container">
<div class="left"></div>
<div class="main"></div>
</div>
</div>
</body>
</html>
You can use float:left instead of using "top and left position"
Here is the updated Code:
HTML
<body>
<header></header>
<div class="left"></div>
<div class="main"></div>
</body>
CSS
header {
max-width: 1000px;
height: 100px;
background: blue;
}
body {
max-width: 1000px;
}
.left {
width: 20%;
height: 2000px;
background: black;
margin-top: 10px;
float:left;
}
.main {
width: 78%;
height: 2000px;
margin-top: 10px;
background: red;
float:left;
margin-left:2%;
}
And Working Demo for the same
Hope this helps!!!