I have a HTML
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Прижатый к низу футер</title>
<style type="text/css">
* {
margin: 0px;
padding: 0px;
}
html, body {
height: 100%;
background-color: #DDE4EA;
}
.container {
max-width: 1250px;
margin: 0 auto;
}
.page {
min-height: 100%;
height: auto !important;
height: 100%;
}
.wrap {
padding-bottom: 77px;
background-color: #000;
color: White;
}
.footer {
height: 77px;
margin-top: -77px;
background-color: #E11;
color: White;
}
</style>
</head>
<body>
<!--<div class="container">-->
<div class="page">
<div class="wrap">
Content
</div>
</div>
<div class="footer">
Footer
</div>
<!--</div>-->
</body>
</html>
In this case, footer is working as I need (top image), and when I uncomment div "container", footer isn't works (bottom image)
See attached screenshot:
That's happening because you are applying the .container class without height: 100%; in the CSS, and footer is now contained with .container.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Прижатый к низу футер</title>
<style type="text/css">
* {
margin: 0px;
padding: 0px;
}
html, body {
height: 100%;
background-color: #DDE4EA;
}
.container {
max-width:100%;
margin: 0 auto;
height:100%;
}
.page {
min-height: 100%;
height: auto !important;
height: 100%;
}
.wrap {
padding-bottom: 77px;
background-color: #000;
color: White;
}
.footer {
height: 77px;
margin-top: -77px;
background-color: #E11;
color: White;
}
</style>
</head>
<body>
<div class="container">
<div class="page">
<div class="wrap">
Content
</div>
</div>
<div class="footer">
Footer
</div>
</div>
Related
Please help to remove a gap below the slanted div on a mobile version. Look at the image below what i've got and what i need.
Image of a gap on a mobile device
Test page: http://stupen.design/slanted/slanted.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta content="width=device-width, initial-scale=1" name="viewport">
<title>Slanted test</title>
<style>
body {
margin: 0;
padding: 0;
-ms-overflow-style: none;
}
body::-webkit-scrollbar {
display: none;
}
.title {
font-size: 12vh;
margin-top: 10%;
margin-left: 10%;
position: absolute;
z-index: 10;
}
.section1 {
height: 100vh;
background-color: red;
}
.section2 {
height: 100vh;
background-color: blue;
}
.section3 {
height: 100vh;
background-color: green;
}
.slanted {
height: 100%;
width: 100%;
background-color: white;
transform: skew(0deg, -9deg);
transform-origin: 0% 100%;
position: absolute;
z-index: 5;
}
</style>
</head>
<body>
<div class="section1">
<h1 class="title">First slide</h1>
</div>
<div class="section2">
<h1 class="title">Second slide</h1>
<div class="slanted">
</div>
</div>
<div class="section3">
<h1 class="title">Third slide</h1>
</div>
</body>
</html>
Done! Me stupid. Just change .slanted's height percents to vh.
I am new with HTML web design and all the languages involving it (php, JavaScript, CSS, etc.)
I would like some help to make my HTML layout look as follows:
I have the following code, but I don't know how to modify it to make it look as I want.
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
* {
box-sizing: border-box;
}
body {
width: 100%;
float: left;
}
.class1{
width: 100%;
float: left;
height: 100%;
}
.class2{
width: 100%;
float: right;
height: 100%;
}
.class3 {
width: 100%;
float: right;
height: 100%;
}
p {
padding-top: 25px;
text-align: center;
}
</style>
</head>
<body>
<div class="class1" style="background-color:#9BCB3B;">
<p>left</p>
</div>
<div class="class2" style="background-color:#1AB99E;">
<p>Top right</p>
</div>
<div class="class3" style="background-color:#F36F25;">
<p>Buttom right</p>
</div>
</body>
</html>
Would really appreciate the help.
Please see the code snippet for the details of the change. Basically, all 3 <div> are using float: left with width: 50%. In <body> scope, add height: 100vh; to set the height of body.
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
* {
box-sizing: border-box;
}
body {
width: 100%;
height: 100vh;
}
.class1 {
width: 50%;
float: left;
height: 100%;
}
.class2,
.class3 {
width: 50%;
float: left;
height: 50%;
}
p {
padding-top: 25px;
text-align: center;
}
</style>
</head>
<body>
<div class="class1" style="background-color:#9BCB3B;">
<p>left</p>
</div>
<div class="class2" style="background-color:#1AB99E;">
<p>Top right</p>
</div>
<div class="class3" style="background-color:#F36F25;">
<p>Buttom right</p>
</div>
</body>
</html>
I would suggest using grid or flex to have such a layout, its better than having float based layout, but keep in mind to check browser compatibility
* {
box-sizing: border-box;
}
body {
display: grid;
grid-template-areas:
"left top"
"left bottom";
height: 100vh;
width: 100%;
}
.class1{
grid-area: left;
}
.class2{
grid-area: top;
}
.class3 {
grid-area: bottom;
}
p {
padding-top: 25px;
text-align: center;
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<div class="class1" style="background-color:#9BCB3B;">
<p>left</p>
</div>
<div class="class2" style="background-color:#1AB99E;">
<p>Top right</p>
</div>
<div class="class3" style="background-color:#F36F25;">
<p>Buttom right</p>
</div>
</body>
</html>
How do you auto-resize a large image so that it will fit into a smaller width flex container whilst maintaining its width:height ratio?
Also, the solution must not relate on vw / vh, so that on a page there can be more in addition to this component.
Here's how it should look like:
Here's my code:
body {
margin: 0;
}
.wrapper {
display: flex;
flex-direction: column;
height: 100vh;
}
.header {
flex: 0 0 100px;
background-color: cornflowerblue;
}
.content {
text-align: center;
}
.image {
width: 100%;
height: 100%;
}
.footer {
flex: 0 0 100px;
background-color: cornflowerblue;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Images Are Weird</title>
</head>
<body>
<div class="wrapper">
<div class="header"></div>
<div class="content">
<img class="image" src="https://villagesquare.me/wp-content/uploads/2018/07/Facebook-Square.png" alt="square placeholder" />
</div>
<div class="footer"></div>
</div>
</body>
</html>
The solutions I found here do not help
How do I auto-resize an image to fit a 'div' container? (not flex context)
Resize images to fit display:flex divs (fixed size for the image, I need dynamic size)
Just change the image class width to less than 100% like 50% 60% or 70;
body {
margin: 0;
}
.wrapper {
display: flex;
flex-direction: column;
height: 100vh;
}
.header {
flex: 0 0 100px;
background-color: cornflowerblue;
}
.content {
text-align: center;
}
.image {
width: 50%;
height: 100%;
}
.footer {
flex: 0 0 100px;
background-color: cornflowerblue;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Images Are Weird</title>
</head>
<body>
<div class="wrapper">
<div class="header"></div>
<div class="content">
<img class="image" src="https://villagesquare.me/wp-content/uploads/2018/07/Facebook-Square.png" alt="square placeholder" />
</div>
<div class="footer"></div>
</div>
</body>
</html>
You can also do it by calculating .content width and minus as much as you need.like below...
.content {
width:calc(100% - 100px);
margin:0 auto;
}
body {
margin: 0;
}
.wrapper {
display: flex;
flex-direction: column;
height: 100vh;
}
.header {
flex: 0 0 100px;
background-color: cornflowerblue;
}
.content {
width:calc(100% - 100px);
margin:0 auto;
}
.image {
width: 100%;
height: 100%;
}
.footer {
flex: 0 0 100px;
background-color: cornflowerblue;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Images Are Weird</title>
</head>
<body>
<div class="wrapper">
<div class="header"></div>
<div class="content">
<img class="image" src="https://villagesquare.me/wp-content/uploads/2018/07/Facebook-Square.png" alt="square placeholder" />
</div>
<div class="footer"></div>
</div>
</body>
</html>
I have a header with an image and an "hamburger" icon for a mobile navigation menu. What I am simply trying to do it display my logo at approx 75% of the available screen with the menu icon to the far right.
I have a master div container and then within it i have 2 divs which has the logo in the left div and menu icon in the right. For some reason I cannot get the menu to stay on the right in the same div container. Any suggestions?
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<style>
#container {
width: 100%;
max-width: 100%;
border: 0px;
margin: 0px;
padding: 10px;
background-color: blue;
}
#logoContainer {
width: 75%;
max-width: 75%;
border: 0px;
margin: 0px;
background-color: blue;
}
#logo {
width: auto;
max-width: 90%;
min-width: 90%;
}
#menu {
float: right;
}
#mobileMenu {
width: 100%;
background-color: green;
color: white;
display: none;
}
</style>
</head>
<body>
<div id="container">
<div id="logoContainer">
<img id="logo" src="content/logo.png"/>
</div>
<div id="menu">
<button type="button"><span>Menu</span></button>
</div>
</div>
<div id="mobileMenu">some content</div>
</body>
</html>
give specific width to both #logoContainer and #menu with display:inline-block;
#logoContainer{
width:75%;
display:inline-block;
}
#menu{
width:25%;
display:inline-block;
text-align: right;
}
#menu button{
margin-right:10px
}
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<style>
#container {
width: 100%;
max-width: 100%;
border: 0px;
margin: 0px;
padding: 10px;
background-color: blue;
}
#logoContainer {
width: 75%;
max-width: 75%;
border: 0px;
margin: 0px;
background-color: blue;
}
#logo {
width: auto;
max-width: 90%;
min-width: 90%;
}
#menu{
float: right;
}
#mobileMenu {
width: 100%;
background-color: green;
color: white;
display: none;
}
</style>
</head>
<body>
<div id="container">
<div id="logoContainer">
<img id="logo" src="content/logo.png" />
</div>
<div id="menu">
<button type="button">
<span>
Menu
</span>
</button>
</div>
</div>
<div id="mobileMenu">
some content
</div>
</body>
</html>
How about using media queries to make the logo appear. With my example, I've set the display on #logo to "none" . With my media query, whenever the page reaches a min-width of 800px it will display the #logo element.
<div id="container">
<div id="logoContainer">
<img id="logo" src="content/logo.png" />
</div>
<div id="menu">
<button type="button">
<span>
Menu
</span>
</button>
</div>
</div>
<div id="mobileMenu">
some content
#container {
width: 100%;
max-width: 100%;
border: 0px;
margin: 0px;
padding: 10px;
background-color: blue;
}
#logoContainer {
width: 75%;
max-width: 75%;
border: 0px;
margin: 0px;
background-color: blue;
}
#logo {
display:none;
width: auto;
max-width: 90%;
}
#menu{
float: right;
}
#mobileMenu {
width: 100%;
background-color: green;
color: black;
display: none;
}
#media (min-width:800px){
#logo{display:block;}
}
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<style>
body{
margin: 0px;
}
#container {
box-sizing: border-box;
width: 100%;
max-width: 100%;
border: 0px;
margin: 0px;
padding: 10px;
background-color: red;
}
#logoContainer {
float: left;
width: 75%;
max-width: 75%;
border: 0px;
margin: 0px;
background-color: blue;
}
#logo{
max-width: 75%;
border: 0px;
margin: 0px;
}
#menu{
height: 10px;
width: 25%;
float: right;
background: yellow;
}
#mybtn{
float: right;
}
#mobileMenu {
display: inline;
background-color: green;
color: white;
}
</style>
</head>
<body>
<div id="container">
<div id="menu">
<button type="button" id="mybtn">
<span>
Menu
</span>
</button>
<div id="mobileMenu">
some content
</div>
</div>
<div id="logoContainer">
<img id="logo" src="content/logo.png" />
</div>
</div>
</body>
</html>
So this is what I'm trying to create. I have it in code, and it looks kinda of ok. But the div footers won't match.
Layout draft
My code:
body {
font: 100%/1.4 Verdana, Arial, Helvetica, sans-serif;
background: #42413C;
margin: 0;
padding: 0;
color: #000;
}
.container {
width: 100%;
height: 100%
background: #FFF;
margin: 0 auto;
}
.content ul, .content ol {
padding: 0 15px 15px 40px;
}
.footer {
padding: 10px 0;
background: #CCC49F;
position: relative;
}
.header {
width: 100%;
height: 100px;
background: #ADB96E;
}
.sidebar1 {
width: 20%;
height: 1000px;
float: left;
background: #EADCAE;
padding-bottom: 10px;
}
.sidebar2 {
width: 10%;
height: 950px;
float: left;
background: #EADCAE;
padding-bottom: 10px;
}
.content {
float:left;
padding: 10px 0;
width: 70%;
height: 950px;
float: left;
background: #CF3
}
.Hybrid {
float:left;
padding: 10px 0;
width: 10%;
height: 50px;
float: left;
background: #CCC49F
}
.menu {
float:left;
padding: 10px 0;
width: 70%;
height: 50px;
float: left;
background: #CCC49F
}
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Untitled Document</title>
</head>
<body>
<div class="container">
<div class="header">HEADER<!-- end .header --></div>
<div class="sidebar1">SIDEbar<!-- end .sidebar1 --></div>
<div class="Hybrid">Hybrid</div>
<div class="menu">Menu</div>
<div class="sidebar2">SCHEEF<!-- end .sidebar1 --></div>
<div class="content">content</div>
<div class="footer">Footer<!-- end .footer --></div>
<!-- end .container --></div>
</body>
</html>
Just don't seem to find the thing I did wrong. I think it's just something stupid I just don't see.
In my opinion your markup is wrong to get the layout from your picture.
Check this: https://jsfiddle.net/yotz6r4h/2/
html
<div class="header">header</div>
<div class="main">
<div class="sidebar1">
sidebar1
</div>
<div class="wrapper">
<div class="menu">
menu
</div>
<div class="sidebar2">
sidebar2
</div>
<div class="content">
content
</div>
</div>
</div>
<div class="footer">footer</div>
css
.header {
width: 100%;
height: 100px;
background: #ADB96E;
}
.main:after {
content: "";
display: table;
clear: both;
}
.sidebar1 {
width: 20%;
height: 1000px;
float: left;
background: #EADCAE;
padding-bottom: 10px;
}
.wrapper {
width: 80%;
float: left;
height: 1000px;
padding-bottom: 10px;
}
.menu {
padding: 10px 0;
height: 50px;
background: #CCC49F;
}
.sidebar2 {
width: 10%;
height: 930px;
float: left;
background: #aaa;
padding-bottom: 10px;
}
.content {
width: 90%;
float: left;
background: #CF3;
height: 940px;
}
.footer {
padding: 10px 0;
background: #CCC49F;
}
Nested Flexbox can do that.
* {
box-sizing: border-box;
}
html,
body {
height: 100%;
margin: 0;
}
body {
min-height: 100%;
}
.wrapper {
height: 100%;
margin: auto;
display: flex;
flex-direction: column;
}
header,
footer {
height: 75px;
background: #c0ffee;
}
.inner-wrap-one {
flex: 1;
display: flex;
}
.sidebar-1 {
background: #663399;
color: white;
flex: 0 0 10%;
}
.inner-wrap-two {
flex: 1;
background: plum;
display: flex;
flex-direction: column;
}
nav {
height: 75px;
background: #bada55;
}
main {
display: flex;
flex: 1;
}
.sidebar-2 {
background: green;
flex: 0 0 10%;
color: white;
}
.content {
flex: 1;
display: flex;
justify-content: center;
align-items: center;
background: grey;
color: white;
}
<div class="wrapper">
<header>HEADER</header>
<div class="inner-wrap-one">
<aside class="sidebar-1">SIDEBAR 1</aside>
<div class="inner-wrap-two">
<nav>NAVIGATION</nav>
<main>
<aside class="sidebar-2">SIDEBAR 2</aside>
<div class="content">CONTENT</div>
</main>
</div>
</div>
<footer>FOOTER</footer>
</div>
Codepen Demo
i think your problem in floating, but you can try the following css code its work fine.
body{
margin: 0px
}
.header{
background: #fff222;
height: 100px;
}
.sidebar1 {
width: 20%;
background: #000;
color: #fff;
height: 550px;
display: inline-block;
float: left;
}
.Hybrid{
width: 20%;
float:left;
background: green;
display: inline-block;
height: 50px;
}
.menu {
background: #222fff;
color: #fff;
display: inline-block;
width: 60%;
height: 50px
}
.content{
background: #5efff0;
height:500px;
float:left;
width:60%
}
.sidebar2{
background: #ff22aa;
display:inline-block;
float:left;
width: 20%;
height:500px;
}
.footer{
width: 100%;
height: 100px;
background: #111fff;
float: left;
}
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Untitled Document</title>
</head>
<body>
<div class="container">
<div class="header">HEADER<!-- end .header --></div>
<div class="sidebar1">SIDEbar<!-- end .sidebar1 --></div>
<div class="Hybrid">Hybrid</div>
<div class="menu">Menu</div>
<div class="sidebar2">SCHEEF<!-- end .sidebar1 --></div>
<div class="content">content</div>
<div class="footer">Footer<!-- end .footer --></div>
<!-- end .container --></div>
</body>
</html>
Others have already give answers that fix your original problem. I just wanted to quickly show you how your markup could benefit from using HTML5. First, your DOCTYPE and head would look like this:
<!DOCTYPE html> <!-- isn't that easy to remember? -->
<html> <!-- no additional attribute required -->
<head>
<meta charset="UTF-8"> <!-- nice and simple -->
<title>SCHEEF</title>
</head>
<!-- ... -->
Second, you could replace some of those generic div containers with more semantic elements:
<!-- ... -->
<body>
<header>Header</header>
<aside id="sidebar1">Sidebar1</aside>
<main>
<nav>Menu</nav>
<aside id="sidebar2">Sidebar2</aside>
<div id="content">Content</div>
</main>
<footer>Footer</footer>
</body>
</html>
Depending on your contents, you could even replace the #content div with a section or article element (probably the first).
And that's pretty much all there is to it! You might want to give it a try.