I'm trying to get a css layout for all modern browsers going and having a hard time. I am not a css guru but hoping one could guide me in the right direction. I'm trying to get a layout similar to this one but with a 100% height left nav and 100% width for the rest. see below layout image.
Based on the link above, I have this, but missing the 100% height...
.wrapper {
width: 100%;
border: 3px solid #666;
overflow: hidden
}
.menu-vertical {
width: 230px;
float: left;
padding: 10px;
border: 2px solid #f0f
}
.mainContent {
overflow: hidden;
border: 2px solid #00f
}
.banner {
background-color: red;
height: 50px;
}
.contentBox {
background-color: pink;
height: 200px;
margin: 20px;
}
<div class="wrapper">
<div class="menu-vertical">side</div>
<div class="mainContent">
<div class="banner">banner</div>
<div class="contentBox">content</div>
</div>
</div>
Any help is appreciated, thank-you
here's the code:
<!DOCTYPE html>
<html>
<body>
<div style="height:100%;position:absolute; width:10%; margin:0; top:0; left:0; background-color:red;">Content</div>
<div style="height:10%; position:absolute;width:90%; margin:0; top:0; left:10%;background-color:blue;">Content</div>
<div style="height:90%;position:absolute; width:90%; margin:0; top:10%; left:10%; background-color:yellow;margin:0 auto;"><div style="background-color:green;width:95%;height:95%;position:relative;top:20px;left:30px;">Content</div></div>
</body>
</html>
Related
I am trying to apply css clip to an element to allow the layer behind to show through. I have the following layout..
body, html {
margin:0;
padding:0;
}
.container {
background:lightgray;
}
.clip {
position:fixed;
height:100%;
width:100px;
clip: rect(10px, 100px, 100px, 100px);
}
.section1, .section2 {
height:100vh;
width:100%;
}
.section_left_red {
height:100%;
width:100px;
background:red;
}
.section_left_blue {
height:100%;
width:100px;
background:blue;
}
<div class="container">
<div class="clip">
</div>
<div class="section1">
<div class="section_left_red">
</div>
<div>
<div class="section2">
<div class="section_left_blue">
</div>
<div>
</div>
I am trying to achieve something like this..
So as I scroll down, the blue background then shows through. Can anyone show me what I am doing wrong?
You can probably use multiple background to create this. The idea is to color only a part of the background making the remaining transparent:
body,
html {
margin: 0;
padding: 0;
}
.clip {
position: fixed;
height: 100%;
width: 200px;
box-sizing:border-box;
border:5px solid lightgray;
background:
linear-gradient(lightgray,lightgray) right/50% 100%,
linear-gradient(lightgray,lightgray) bottom/100% 80%;
background-repeat:no-repeat;
}
.section1,
.section2 {
height: 100vh;
width: 100%;
background: red;
}
.section2 {
background: blue;
}
<div class="container">
<div class="clip">
</div>
<div class="section1">
</div>
<div class="section2">
</div>
</div>
I don't believe that clip is the technique that you'll need to achieve this.
Clip css property is meant cut off part of an image that is absolutely positioned. I don't think it's meant for other elements.
instead of clip, have you tried using gradients to create a hole inside? Or maybe even a border:
.clip {
position: fixed;
height: 100vh;
width: 100vw;
top: 0;
left: 0;
border-top: 10px solid #fff;
border-left: 10px solid #fff;
border-right: calc(100vw - 60px) solid #fff;
border-bottom: calc(100vh - 60px) solid #fff;
box-sizing: border-box;
}
I am new with CSS and need some help, please. Although it seems to be simple to solve, I am already working in this problem for about 4 hours. I found many similar questions on internet, but each case is particulary different from mine, and the "solutions" can't solve my problem (already tried most of them).
Here is the basic structure of my html page:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html >
<head>
<title>Test</title>
</head>
<body>
<div id="main">
<div id="head">
<div id="head_content">
HEARDER
</div>
</div>
<div id="body">
<div id="menu">
MENU
</div>
<div id="page">
PAGE CONTENT
</div>
</div>
<div id="foot">
<div id="foot_content">
FOOTER
</div>
</div>
</div>
</body>
</html>
And here is the CSS I am trying to implement:
html {
height: 100%;
}
body {
margin:0;
padding:0;
width:100%;
height: 100%;
min-height: 100%;
background: #DEDEDE;
}
#main {
width: 100%;
min-height:100%;
position:relative;
}
#head {
width: 100%;
height: 58px;
border-bottom: 1px solid #115293;
background-color: #1976D2;
}
#head #head_content {
width: 1000px;
padding: 6px;
color: #FFFFFF;
margin: 0 auto;
text-align: center;
}
#body {
width: 1000px;
// height: 100%;
// min-height: 100%;
margin: 0 auto;
// padding-bottom: 50px;
border-left: 1px solid #BFBFBF;
border-right: 1px solid #BFBFBF;
}
#body #menu {
float: left;
width: 220px;
// height: 100%;
// min-height: 100%;
background-color: #94C9FF;
}
#body #page {
overflow: hidden;
// height: 100%;
// min-height: 100%;
padding: 10px;
color: #5C5C5C;
border-left: 1px solid #BFBFBF;
background-color: #FFFFFF;
}
#foot {
position:absolute;
bottom: 0;
left: 0;
width: 100%;
height: 58px;
color: #FFFFFF;
border-top: 1px solid #115293;
background-color: #1976D2;
}
#foot #foot_content {
position: relative;
width: 1000px;
padding: 6px;
margin: 0 auto;
text-align: center;
}
Obs: Commented lines are SOME of the solutions I already tried.
Here is what I got so far:
And finally here is what I really need:
The reason you were having trouble getting the #body div to be the full height of the remaining space is because each of the wrapping elements needed height:100% not just one of them. That means #main, #body, #page and #menu.
html {
height: 100%;
}
body {
margin:0;
padding:0;
width:100%;
height: 100%;
min-height: 100%;
background: #DEDEDE;
}
#main {
width: 100%;
min-height:100%;
position:relative;
height:100%;
}
#head {
width: 100%;
height: 58px;
border-bottom: 1px solid #115293;
background-color: #1976D2;
}
#head #head_content {
width: 1000px;
padding: 6px;
color: #FFFFFF;
margin: 0 auto;
text-align: center;
}
#body {
height:100%;
width: 1000px;
margin: 0 auto;
border-left: 1px solid #BFBFBF;
border-right: 1px solid #BFBFBF;
}
#body #menu {
float: left;
width: 220px;
background-color: #94C9FF;
height:100%;
}
#body #page {
overflow: hidden;
padding: 10px;
color: #5C5C5C;
border-left: 1px solid #BFBFBF;
background-color: #FFFFFF;
height:100%;
}
#foot {
position:absolute;
bottom: 0;
left: 0;
width: 100%;
height: 58px;
color: #FFFFFF;
border-top: 1px solid #115293;
background-color: #1976D2;
}
#foot #foot_content {
position: relative;
width: 1000px;
padding: 6px;
margin: 0 auto;
text-align: center;
}
<html >
<head>
<title>Test</title>
</head>
<body>
<div id="main">
<div id="head">
<div id="head_content">
HEARDER
</div>
</div>
<div id="body">
<div id="menu">
MENU
</div>
<div id="page">
PAGE CONTENT
</div>
</div>
<div id="foot">
<div id="foot_content">
FOOTER
</div>
</div>
</div>
</body>
</html>
you can add the following to css based on the size of content you require the content to be, just change the pixels based on the content you want:-
div#page {
width: 100%;
height: 600px;
}
I hope it will help
You can do this in the following way--
Just use the height unit as vh(viewport height) relative to viewport. Add rest of your css to get desired width effect.
checkout the snippet
#main {
background-color:blue;
height: 10vh;
}
#body {
background-color:grey;
height:80vh;
}
#foot {
background-color:blue;
height: 10vh;
}
<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html >
<head>
<title>Test</title>
</head>
<body>
<div id="main">
<div id="head">
<div id="head_content">
HEARDER
</div>
</div>
<div id="body">
<div id="menu">
MENU
</div>
<div id="page">
PAGE CONTENT
</div>
</div>
<div id="foot">
<div id="foot_content">
FOOTER
</div>
</div>
</div>
</body>
</html>
You can find compatibility here---
vh compatibility
EDIT
As fallback for vh unit I think you can use javascript . Through javascript you can get the window size. Then specify the height of the footer as percentage of the window height.
This question can be good starting point
Okay, so I know there are a few questions similar to this on StackOverflow which already have been answered but they didn't help me.
I am building a messaging service and for that I have two divs, contacts_box (300px) and message_box(500px). They are both wrapped inside a parent div which is 800px in width. I want align these two divs side by side inside the parent div. But no matter what I do, I just can't get them to align!
Please take a look at my HTML and CSS and show where I am going wrong with this?
* {
margin: 0;
padding: 0;
}
.page_layout {
position: fixed;
top: 50px;
width: 100%;
height: 100%;
border: 1px solid green;
}
.page_container {
width: 800px;
height: 100%;
margin: 0 auto;
clear: both;
border: 1px solid blue;
}
// Contacts Box and its elements
.contacts_box {
float:left;
height:100%;
width:300px;
border:1px dashed magenta;
}
// Message Box and its elements
.message_box {
float:right;
height:100%;
width:500px;
border:1px dashed lemonchiffon;
}
<html>
<head>
<link rel="stylesheet" href="http://kinskeep.com/test.css">
</head>
<body>
<div class="page_layout">
<div class="page_container">
<div class="contacts_box"> CONTACTS BOX </div>
<div class="message_box">
<div class="message_displayBox"> Message Box </div>
<div class="message_textBox"> </div>
</div>
</div>
</div>
</body>
</html>
You can use box-sizing to solve the issue rather than calculating the width and border widths:
Add box-sizing: border-box to the inner containers and box-sizing: content-box to the outer container and there you go!
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.page_layout {
position: fixed;
top: 50px;
width: 100%;
height: 100%;
border: 1px solid green;
}
.page_container {
width: 800px;
height: 100%;
margin: 0 auto;
clear: both;
border: 1px solid blue;
box-sizing: content-box;
}
.contacts_box {
float: left;
height: 100%;
width: 300px;
border: 1px dashed magenta;
}
.message_box {
float: right;
height: 100%;
width: 500px;
border: 1px dashed lemonchiffon;
}
<body>
<div class="page_layout">
<div class="page_container">
<div class="contacts_box">
CONTACTS BOX
</div>
<div class="message_box">
<div class="message_displayBox">
Message Box
</div>
<div class="message_textBox">
</div>
</div>
</div>
</div>
</body>
The most basic solution: The border of the divs is not included in the width. So you either need to calculate the width as
width1 + border1 + width2 + border2 = 800px
or make your container div larger.
Put your comments inside /* Comments Goes Here */
change your width px to % and use box-sizing: border-box; to the floated divs.
*{
margin:0;
padding:0;
}
.page_layout
{
position:fixed;
top:50px;
width:100%;
height:100%;
border:1px solid green;
}
.page_container
{
width:800px;
height:100%;
margin: 0 auto;
clear:both;
border:1px solid blue;
}
.contacts_box
{
float:left;
height:100%;
width:40%;
border:1px dashed magenta;
box-sizing: border-box;
}
.message_box
{
float:right;
height:100%;
width:60%;
border:1px dashed lemonchiffon;
box-sizing: border-box;
}
<div class="page_layout">
<div class="page_container">
<div class="contacts_box">
CONTACTS BOX
</div>
<div class="message_box">
<div class="message_displayBox">
Message Box
</div>
<div class="message_textBox">
</div>
</div>
</div>
</div>
The problem:
You have borders in both elements (.contact_box and .message_box) and they are taking 1px from each side so they will never fit together because there is not enough space, I recommend you to use the property box-sizing:border-box; for this cases, it'll put the borders inset of the element instead of outside, so you don't have to worry about them.
.contacts_box
{
float:left;
height:100%;
width:300px;
border:1px dashed magenta;
box-sizing: border-box;
}
.message_box
{
float:right;
height:100%;
width:500px;
border:1px dashed lemonchiffon;
box-sizing: border-box;
}
Also if you are using pure css (without pre-processors) use comments like this /* Comment */ to avoid problems.
Your comment method was wrong.
in Vanilla CSS - we use /* Your comment */
to make comments.
// - is supported in LESS, SASS, Stylus kind of pre-processors.
If you run your code on browser, you can see, none of the CSS for contactbox and messagebox was working.
*{
margin:0;
padding:0;
}
.page_layout
{
position:fixed;
top:50px;
width:100%;
height:100%;
border:1px solid green;
}
.page_container
{
width:800px;
height:100%;
margin: 0 auto;
clear:both;
border:1px solid blue;
}
/* Contacts Box and its elements */
.contacts_box
{
float:left;
height:100%;
width:300px;
border:1px dashed magenta;
}
/* Message Box and its elements */
.message_box
{
float:right;
height:100%;
width:500px;
border:1px dashed lemonchiffon;
}
<html>
<head>
<link rel="stylesheet" href="http://kinskeep.com/test.css">
</head>
<body>
<div class="page_layout">
<div class="page_container">
<div class="contacts_box">
CONTACTS BOX
</div>
<div class="message_box">
<div class="message_displayBox">
Message Box
</div>
<div class="message_textBox">
</div>
</div>
</div>
</div>
</body>
</html>
You give border to inner DIV so its also add in its actual width. So if possible give color to inner DIV or expand Parent DIV width.
* {
margin: 0;
padding: 0;
}
.page_layout {
position: fixed;
top: 50px;
width: 100%;
height: 100%;
border: 1px solid green;
}
.page_container {
width: 800px;
height: 100%;
margin: 0 auto;
clear: both;
border: 1px solid blue;
}
.contacts_box {
float: left;
height: 100%;
width: 300px;
background: blue;
}
.message_box {
float: right;
height: 100%;
width: 500px;
background: red;
}
<html>
<head>
<link rel="stylesheet" href="http://kinskeep.com/test.css">
</head>
<body>
<div class="page_layout">
<div class="page_container">
<div class="contacts_box">
CONTACTS BOX
</div>
<div class="message_box">
<div class="message_displayBox">
Message Box
</div>
<div class="message_textBox">
</div>
</div>
</div>
</div>
</body>
</html>
NOTE:
Your code is correct but you give wrong comment in CSS. That's why its not working. Please check comment in CSS part. Here I update your code with remove comment. Its working fine.
UPDATE
Also you can using box-size:border-box outer DIV and box-size:content-box to inner DIV. You can solve it using this method also.
We have to stop using floats and start using flex!
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.page_layout {
position: fixed;
top: 50px;
width: 100%;
height: 100%;
border: 1px solid green;
}
.page_container {
display: flex;
flex-direction: row;
width: 800px;
height: 100%;
margin: 0 auto;
border: 1px solid blue;
}
.contacts_box {
flex: 1 0 300px;
border: 1px dashed magenta;
}
.message_box {
flex: 1 0 500px;
border-left: 1px dashed lemonchiffon;
}
<div class="page_layout">
<div class="page_container">
<div class="contacts_box">
CONTACTS BOX
</div>
<div class="message_box">
<div class="message_displayBox">
Message Box
</div>
<div class="message_textBox">
</div>
</div>
</div>
</div>
Your container with width:300px and border:1px as a whole has 301px width. Try changing your width to 299px or making 802px the bigger box
<html>
<head>
<link rel="stylesheet" href="http://kinskeep.com/test.css">
</head>
<style>
*{
margin:0;
padding:0;
}
.page_layout
{
position:fixed;
top:50px;
width:100%;
height:100%;
border:1px solid green;
}
.page_container
{
width:800px;
height:100%;
margin: 0 auto;
clear:both;
border:1px solid blue;
}
.contacts_box {
float: left;
height: 100%;
width: 298px;
border: 1px dashed magenta;
}
.message_box {
float: right;
height: 100%;
width: 498px;
border: 1px dashed lemonchiffon;
}
</style>
<body>
<div class="page_layout">
<div class="page_container">
<div class="contacts_box">
CONTACTS BOX
</div>
<div class="message_box">
<div class="message_displayBox">
Message Box
</div>
<div class="message_textBox">
</div>
</div>
</div>
</div>
</body>
</html>
</html>
if want to add border then reduce width by same px which you are taking borders
like make them 498 and 298 px res.
<html>
<head>
<style>
.page_layout
{
position:fixed;
top:50px;
width:100%;
height:100%;
border:1px solid green;
}
.page_container
{
width:800px;
height:100%;
margin: 0 auto;
clear:both;
border:1px solid green;
}
#contacts_box
{
float:left;
height:100%;
width:300px !important;
background-color:#f9dada !important;
}
#message_box
{
float:left;
height:100%;
width:500px;
background-color:#deffe5;
}
</style>
</head>
<body>
<div class="page_layout">
<div class="page_container">
<div id="contacts_box">
CONTACTS BOX
</div>
<div id="message_box">
Message Box
</div>
</div>
</div>
</body>
</html>
I've created the below jsfiddle recreating my problem, I want that the .dashboard & .inner-dashboard have always a 100% height and keep the footer always at the bottom.
http://jsfiddle.net/rv7xN/1/
HTML
<div id="wrap">
<body>
<div class="dashboard">
<div class="inner-dashboard">
</div>
</div>
</body>
</div>
<div id="footer"></div>
CSS
html,body{
height:100%;
}
#wrap {
min-height: 100%;
height: auto;
margin: 0 auto -60px;
padding: 0 0 60px;
}
#footer {
height: 60px;
background-color: blue;
}
.dashboard{
width: 100%;
height: auto;
min-height: 100%;
position: absolute;
padding-bottom: -60px;
background-color:green;
}
.inner-dashboard{
height:100%;
padding-bottom: -60px;
background-color:red;
}
Here's an example : jsFiddle
I had to modify the html to have a common container for the dashboard and the footer.
<div id="wrap">
<div class="dashboard">
<div class="inner-dashboard">
</div>
</div>
<div id="footer"></div>
</div>
I turn the wrapper (common container) in a table and the other elements in table-cell.
So even if your dashboard is height 200%, the footer's still at the bottom.
html,body{
height:100%;
}
#wrap {
position:absolute;
display:table;
height:100%;
width:95%;
padding-bottom:60px;
}
.dashboard{
width: 95%;
height: 200%;
display:table;
border:5px solid green;
}
.inner-dashboard{
width: 95%;
height: 100%;
display:table-cell;
border:5px solid red;
}
#footer {
display:table;
height: 60px;
width:95%;
border:5px solid blue;
bottom:-10px;
}
Is that it ?!
I have added modified your css and added position attribute
I hope the revision solves your issue: [UPDATE] http://jsfiddle.net/saurabhsharma/rv7xN/3/
Any idea how to make the middle sections in this code below (jsFiddle here) adjust to the height of the actual container without specifying fixed values or Javascript? In this fiddle I tried setting absolute and relative for the container but the page always shows vertical scrollbar as the height of the container exceeds the height of the actual page.
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style>
body { margin: 0; height:100%;}
#mainContainer { position: absolute; right: 4%; left: 4%; height: 100%; }
#headerContainer { width: 100%; position: relative; background: #323232; color: white; height: 30px; }
#middleContainer { height: 100%; }
#leftSection { position: absolute; float: left; width: 175px; background: #71ABD1; height: 100%; overflow: auto; color: black; }
#middleSection { position: absolute; height: 100%; background-color: yellow; left: 175px; right: 175px; color: black; }
#rightSection { float: right; height: 100%; width: 175px; border-left: 1px dotted black; background: red; color: black; }
#footerContainer { position: relative; width: 100%; height: 30px; background: #323232; color: white; }
</style>
</head>
<body>
<div id="mainContainer">
<div id="headerContainer">
headerContainer
</div>
<div id="middleContainer">
<div id="leftSection">
<div style="margin-top: 30px;">leftSection</div>
</div>
<div id="middleSection">
<div style="margin-top: 30px;">middleSection</div>
</div>
<div id="rightSection">
<div style="margin-top: 30px;">rightSection</div>
</div>
</div>
<div id="footerContainer">
footerContainer
</div>
</div>
</body>
</html>
This seems to do what you want:
http://jsfiddle.net/grc4/XTQuT/2/
Absolute positioning takes #middleContainer and #footerContainer out of the normal flow. #middleContainer is forced to take up the size of the whole page, but is given a margin to allow room for the header and footer. #footerContainer is fixed to the bottom of the page with bottom: 0. The left and right columns can then just use height: 100% to take up the right space, but the middle column still needs absolute positioning to force it to only use the remaining space.
................................
Hi maya i suggest u can u used table properites in your code if yes than check to this demo
HTML
<div class="wrap">
<div class="header">header</div>
<div class="conternt">
<div class="left">Left sdaf dsaklf jdslkaf jdlskfj dlskafj dslkf jdslkf jsdlakfj sdlakfj sdlkf jlsdkfj sladkfj sdalkfj sadlkf </div>
<div class="center">Center flexible</div>
<div class="right">right</div>
</div>
<div class="footer">footer</div>
</div>
Css
.header{
background:green;
color:#fff;
padding:20px;
}
.conternt{
background:yellow;
display:table;
width:100%;
}
.left, .right, .center{
display:table-cell;
color:#fff;
}
.left, .right{
width:100px;
}
.left{
background:rgba(0,0,0,0.5)
}
.center{
background:rgba(0,0,0,0.1)
}
.right{
background:rgba(0,0,0,0.9)
}
.footer{
background:red;
color:#fff;
padding:20px;
}
live demo
Specify the height of both #footerContainer and #headerContainer as percentage instead of pixels, as you do the same for others div. In this fiddle I gave 10% to header and footer, and 80% to all intermediante divs.