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?
Related
I would like to have a layout as follows:
Whereby I have a parent container, and centred inside of that is a breadcrumb. However, I also would like a logo inside of the container which floats to the left of the breadcrumb, but respects the boundaries of the breadcrumb.
I have been playing around with flexbox and can only get it to work with absolutely positioning the logo, which means the breadcrumb does not respect the boundaries of the logo.
I have put together a JSFiddle playground here: https://jsfiddle.net/joyqwpc1/25/.
The difficult thing is, the logo can be a variable width, so setting a margin is not viable for this.
body {
margin: 0;
}
#container {
background: red;
display: flex;
align-items: center;
justify-content: center;
height: 50px;
padding: 0 50px;
}
#logo {
height: 50px;
width: 50px;
background-color: blue;
position: absolute;
left: 0;
}
#breadcrumb {
width: 200px;
height: 20px;
background-color: green;
}
<div id="container">
<div id="logo"></div>
<div id="breadcrumb"></div>
</div>
I've created 2 separate containers for the logo and breadcrumbs and set them a width. Then, I aligned elements inside these containers.
https://jsfiddle.net/dmitriifrlv/vbhxrj1u/39/
<div id="container">
<div class="logoContainer">
<div id="logo">
</div>
</div>
<div class="breadcrumbContainer">
<div id="breadcrumb">
</div>
</div>
</div>
body {
margin: 0;
}
#container {
background: red;
display: flex;
align-items: center;
justify-content: flex-start;
height: 50px;
}
.logoContainer{
width: 10%;
height: 100%;
background: yellow;
}
#logo {
height: 50px;
width: 100%;
background-color: blue;
}
.breadcrumbContainer{
width:90%;
display: flex;
justify-content: center;
}
#breadcrumb {
width: 200px;
max-width: calc(100% - 2rem);
height: 20px;
background-color: green;
}
For clean solution a little bit of JavaScript is needed:
Make sure to click "Run with JS" button: https://jsbin.com/ziziqidole/edit?html,output
<html>
<head>
<script>
function handleResize() {
var crumb = document.getElementById("breadcrumb");
var logoWidth = document.getElementById("logo").offsetWidth;
var calcWidth = (window.innerWidth - crumb.offsetWidth) / 2 - logoWidth;
if (calcWidth < 10) {
calcWidth = 10;
}
crumb.style.marginLeft = calcWidth;
}
</script>
<style media="all">
body {
margin: 0;
}
#container {
background: red;
display: flex;
align-items: center;
height: 50px;
padding-right: 50px;
}
#logo {
height: 50px;
width: 150px;
background-color: blue;
flex-shrink: 0;
}
#breadcrumb {
width: 200px;
height: 20px;
background-color: green;
}
#center {
width: 200px;
height: 20px;
margin: 0 auto;
background-color: khaki;
text-align: center;
}
</style></head
>
<body onresize="handleResize()" onload="handleResize()">
<div id="container">
<div id="logo"></div>
<div id="breadcrumb"></div>
</div>
<div id="center">Page Center</div>
</body>
</html>
Solution without JavaScript. But some hardcoding needed e.g. logo width and crumb width.
https://jsbin.com/juxijowova/edit?html,output
<html>
<head>
<style media="all">
body {
margin: 0;
}
#container {
background: red;
display: flex;
align-items: center;
height: 50px;
padding-right: 50px;
}
#logo {
height: 50px;
width: 150px;
background-color: blue;
flex-shrink: 0;
}
#breadcrumb {
width: 200px;
height: 20px;
background-color: green;
position: absolute;
left: max(260px, 50%); /* logo width + breadcrumb width/2 + margin*/
transform: translate(-50%, 0);
/*margin: 0 auto;
margin-left: 10px;/*use this if want to center on remaining area instead of screen center*/
}
#center {
width: 200px;
height: 20px;
margin: 0 auto;
background-color: khaki;
text-align: center;
}
</style></head
>
<body>
<div id="container">
<div id="logo"></div>
<div id="breadcrumb"></div>
</div>
<div id="center">Page Center</div>
</body>
</html>
This is usually how I lay something like this out: 3 containers, the side 2 will flex to fill space equally because they have the same exact basis (auto basis would break this because the left "Logo" content would be included in the basis for the left container). The middle is sized to the content and stays centered unless it becomes too wide and will start to take up space on the right and become uncentered.
.f-row {
display: flex;
}
.left-box {
flex: 1 1 0.0000001px;
padding: 1em;
border: 1px solid blue;
}
.middle-box {
padding: 1em;
border: 1px solid red;
justify-self: center
}
.right-box {
padding: 1em;
border: 1px solid green;
flex: 1 0 0.0000001px;
}
<div class="f-row">
<div class="left-box">Logo</div>
<div class="middle-box">Breadcrumb</div>
<div class="right-box"></div>
</div>
<br><br>
<div class="f-row">
<div class="left-box">Logo</div>
<div class="middle-box">Breadcrumb > Longer > Space</div>
<div class="right-box"></div>
</div>
<br><br>
<div class="f-row">
<div class="left-box">Logo</div>
<div class="middle-box">Breadcrumb > Longer > Space > Too Much Now It's Taking Up Space From the Right, Uncentered Now</div>
<div class="right-box"></div>
</div>
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>
another newbie question here. Learning CSS. I am trying to do something that I thought would be very simple, but have not managed to find the way to do it, or a suitable answer to the question.
I have a simple project with a header, some content and a footer. The content has a div with a white border and an image inside it. I would like the div to be as wide as the image and no wider. I have provisionally set the width to 430px, but I would like to know the code to set the width to whatever the width of the image is.
Code
html
html,
body {
margin: 0px;
padding: 0px;
height: 100vh;
}
#header {
position: relative;
height: 10%;
width: 100%;
background-color: lightgray;
}
#footer {
position: relative;
height: 10%;
width: 100%;
background-color: lightgray;
}
#container {
height: 80%;
width: 100vw;
background-color: red;
}
#imagewrap {
position: relative;
border: 1px solid white;
width: 430px;
display: block;
margin: 0 auto;
top: 50%;
transform: translateY(-50%);
}
<div id="header"> </div>
<div id="container">
<div id="imagewrap">
<img src="Images/01Folder/Image.jpg" height="100%" id="front" />
</div>
</div>
<div id="footer"> </div>
Add display: inline-block; to your .imagewrap without setting it's width.
.imagewrap {
display: inline-block;
}
If you want a div with an image to be centered, add another div around them with:
.wrapper {
display: flex;
justify-content: center;
align-items: center;
}
But do you really need that div around an image? The border might be added to an image itself without additional div.
If you want a border on the image, add it there
html,
body {
margin: 0px;
padding: 0px;
height: 100vh;
}
#header {
position: relative;
height: 10%;
width: 100%;
background-color: lightgray;
}
#footer {
position: relative;
height: 10%;
width: 100%;
background-color: lightgray;
}
#container {
height: 80%;
width: 100vw;
background-color: red;
}
#imagewrap {
position: relative;
/*border: 1px solid white;
width: 430px;
display: inline-block;
line-height: 0;
margin: 0 auto;*/
top: 50%;
transform: translateY(-50%);
text-align: center; /*center image horizontally*/
}
#imagewrap img {
border: 1px solid white;
}
<div id="header"> </div>
<div id="container">
<div id="imagewrap">
<img src="https://unsplash.it/100/100" height="100%" id="front" />
</div>
</div>
<div id="footer"> </div>
Check out this fidde:
https://jsfiddle.net/56myv9g2/1/
#imagewrap img{
display:block;
}
#imagewrap{
position: relative;
border: 1px solid white;
display: inline-block;
margin: 0 auto;
top: 50%;
transform: translateY(-50%);
}
#container {
height: 80%;
width: 100vw;
text-align:center;
background-color: red;
}
Also, you could just give the border to the image tag all along without the div
If you set display: inline-block, then you need to add text-align: center to container
html,
body {
margin: 0px;
padding: 0px;
height: 100vh;
}
#header {
position: relative;
height: 10%;
width: 100%;
background-color: lightgray;
}
#footer {
position: relative;
height: 10%;
width: 100%;
background-color: lightgray;
}
#container {
text-align: center;
height: 80%;
width: 100vw;
background-color: red;
}
#imagewrap{
position: relative;
border: 1px solid white;
width: 430px;
display: inline-block;
top: 50%;
transform: translateY(-50%);
}
<div id="header"> </div>
<div id="container">
<div id="imagewrap">
<img src="Images/01Folder/Image.jpg" height="100%" id="front" />
</div>
</div>
<div id="footer"> </div>
I want to create a footer where in the upper part there is a semi circle on the center with a logo inside of it. I have my sample code here, but the problem with it is that the logo is bound on the height of the footer div.
html,
body,
.container,
.content {
height: 100%;
}
.container,
.content {
position: relative;
}
.proper-content {
position: absolute;
padding-top: 40px;
/* >= navbar height */
}
.wrapper {
position: absolute;
min-height: 100%;
height: auto !important;
height: 100%;
margin: 0 auto -100px;
/* same as the footer */
}
.push {
height: 100px;
/* same as the footer */
}
.footer-logo {
height: 200px;
width: 100%;
position: absolute;
background-image: url("gaslogo.png");
background-position: 10% 100%;
z-index: 999;
}
.footer-wrapper {
position: relative;
height: 200px;
background-color: red;
}
.halfCircleBottom {
position: relative;
height: 100px;
width: 250px;
border-radius: 0 0 100px 100px;
-moz-border-radius: 0 0 100px 100px;
-webkit-border-radius: 0 0 100px 100px;
background: white;
}
<head>
<link rel="stylesheet" type="text/css" href="test.css">
</head>
<div class="navbar navbar-fixed-top">
<div class="navbar-inner">
<div class="container">
</div>
</div>
</div>
<div class="container">
<div class="content">
<div class="logo"></div>
<div class="wrapper"></div>
<div class="push"></div>
</div>
<div class="footer-logo">dsad</div>
<div class="footer-wrapper">
<footer>
<center>
<div class="halfCircleBottom"></div>
</center>
</footer>
</div>
I used a :before pseudo element with background image for the circle.
.footer {
background: crimson;
height: 100px;
margin-top: 100px;
text-align: center;
}
.footer:before {
content: "";
display: inline-block;
vertical-align: top;
width: 100px;
height: 100px;
background: crimson url("https://i.stack.imgur.com/Fogjj.jpg") center / cover;
border: 10px solid white;
border-radius: 50%;
box-sizing: border-box;
margin-top: -50px;
}
<footer class="footer"></footer>
I accomplished what you need this way:
Changed your HTML a bit:
<div class="footer-wrap">
<div class="halfCircleBottom">
<img src="insert your image with the same width as the parent div"/>
</div>
<footer>
<center>
</center>
</footer>
</div><!--end footer wreap-->
Then added and changed one of your css declarations:
footer {
background: black;
height: 100px;
}
.halfCircleBottom{
position: absolute;
height: 250px;
width: 250px;
border-radius: 50%;
background: white;
left: 50%;
transform: translate(-50%, -72%);
}
Try this
HTML:
<div class="content">content</div>
<div class="footer"></div>
CSS:
.content{
height: 200px;
text-align: center;
background: #fff;
}
.footer{
height: 100px;
background: #cf9f3f;
position: relative;
text-align: center;
}
.footer:before{
content: '';
width: 100px;
text-align: center;
height: 100px;
border-radius: 50%;
background: #cf9f3f;
border: 4px solid #fff;
position: absolute;
left: 0;
right: 0;
margin: -52px auto 0;
}
Example: https://jsfiddle.net/vc4mvwd2/
I have a basic site structure with a header, a footer and a content area.
Almost all of the solutions I could find to center the content of the page uses CSS absolute positioning, with setting the margins of the content div, and having it float in the center of the browser window.
However, this results in the content covering the header and/or the footer when the window's size is reduced.
Instead, I would like the page to scroll when it cannot fit into the window.
Here is a screenshot of the page:
The area with the red border should be vertically centered without covering any of the other elements.
Here is the HTML&CSS I'm using:
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Layout Test</title>
</head>
<body>
<div class="wrapper">
<div class="header">Header Content</div>
<div class="articleContainer">
<div class="articleLeft">
<div class="articleTitle">
<h1 class="articleTitle">Title</h1>
</div>
<div class="articleText">
<p>Lorem ipsum ...</p>
</div>
</div>
<div class="articleRight">
<div class="articleImage"></div>
</div>
<div class="stepper">Stepper</div>
</div>
<div class="push"></div>
</div>
<div class="footer">Footer Content</div>
</body>
</html>
CSS:
#charset "UTF-8";
* {
margin: 0;
}
html, body {
height: 100%;
}
.wrapper {
min-height: 100%;
height: auto !important;
height: 100%;
margin: 0 auto -48px;
}
.header {
text-align: center;
background-color: #7FF152;
height: 48px;
}
.articleContainer {
background-color: #CCFFFF;
margin-right: auto;
margin-left: auto;
width: 700px;
clear: both;
min-height: 240px;
position: relative;
border: medium solid #FF0000;
}
.articleLeft {
float: left;
height: 450px;
width: 330px;
}
.articleTitle {
text-align: center;
margin: 20px;
}
.articleText {
max-height: 350px;
overflow: auto;
}
.articleRight {
float: right;
height: 450px;
width: 330px;
background: url(articleImage.fw.png) no-repeat center center;
}
.stepper {
clear: both;
text-align: center;
background-color: #FFFF00;
}
.footer {
background-color: #CC6633;
text-align: center;
height: 48px;
}
.footer, .push {
height: 48px; /* .push must be the same height as .footer */
}
I have uploaded both to here: http://cl.ly/3f2o1v0U2c0k
This is the jsfiddle: http://jsfiddle.net/gudmN/1/
Thank you for the help.
1) add margin: 0 auto; height: auto; float: left to .articlecontainer.
2) Make the header and footer float: left; width: 100%; height: 48px