I want to get structure like this:
---------------------------------------------
| head |
---------------------------------------------
|left-menu||---content-div-------------------
| fixed || | |
| || content-left | con-right|
| ||--------------------------------|
css file:
.left-menu {
position:fixed; /* fix menu, no scroll */
left:0;
}
.content-div {
position:absolute;
float:right;
left:150px;
}
.content-right {
width: 310px;
float: right;
}
.content-left {
float: left;
}
divs:
<div>
<div class="left-menu" > </div>
<div class="content-div">
<div class="content-left"> </div>
<div class="content-right"> </div>
</div>
</div>
I get content-right in the next line, not in the same line with content-left, like i have content-left width=105%, but i don't. I tried this and some other suggestion, but no luck. How can i fix this problem?
Flexbox can do that.
* {
margin: 0;
padding: 0;
}
.parent {
display: flex;
height: 100vh;
}
.left-menu {
position: fixed;
/* fix menu, no scroll */
left: 0;
width: 150px;
background: red;
height: 100%;
}
.content-div {
margin-left: 150px;
background: blue;
flex: 1;
display: flex;
}
.content-right {
flex: 0 0 310px;
}
.content-left {
flex: 1;
background: orange;
}
<div class="parent">
<div class="left-menu"></div>
<div class="content-div">
<div class="content-left"></div>
<div class="content-right"></div>
</div>
</div>
Check out the JsFiddle for the demo
HTML
<div>
<div class="header">HEADER</div>
<div class="left-menu" >LEFT MENU</div>
<div class="content-div">
<div class="content-left">CONTENT LEFT</div>
<div class="content-right">CONTENT RIGHT</div>
</div>
</div>
CSS
.header {
height: 70px;
background: blue;
}
.left-menu {
width: 120px;
background: red;
position: fixed;
left: 0px;
top: 70px;
bottom: 0px;
}
.content-div {background: yellow;margin-left: 120px}
.content-div div {
display: inline-block;
width: 49%;
}
.content-left {background: aqua;}
.content-right {background: green;}
Position anything is a pain, I suggest using bootstrap for something like this.
(I just saw the comment above me about suggesting the same thing but I'll give you the code so you can implement it just incase)
Bootstrap supplies a nice CDN that you can throw in your html and have bootstrap wherever you go!
So put all of this in your html...
<html>
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
</head>
<body>
<div class="container">
<div class="row">
<div class="col-lg-12">
<h1>Header</h1>
</div> <!-- col-lg-12" -->
</div> <!-- row -->
<div class="row">
<div class="col-lg-3" style="position: fixed;">
<p>Left Menu Fixed</p>
</div> <!-- col-lg-3 -->
<div class="col-lg-6">
<p>Content Left</p>
</div> <!-- col-lg-6 -->
<div class="col-lg-3">
<p>Content Right</p>
</div> <!-- col-lg-3 -->
</div> <!-- row -->
</div> <!-- container -->
</body>
</html>
This will provide the layout you're suggesting.
Hope this helps!
This should work for what you want
.left-menu {
position:fixed; /* fix menu, no scroll */
left:0;
width: 150px;
height: 100%;
}
.content-div {
position:fixed;
left:150px;
right: 0px;
height: 100%;
}
.content-right {
float: right;
}
.content-left {
float: left;
}
Set a height and background-color on .content-left and .content-right if you want to see how they position themselves.
.left-menu {
position:fixed; /* fix menu, no scroll */
left:0;
background: black;
width:15%;
height: 100%;
}
.content-div {
position:absolute;
float:right;
left:16%;
background: red;
width:84%;
height: 100%;
}
.content-right {
width: 310px;
height: 100%;
float: right;
background: yellow;
}
.content-left {
float: left;
background: green;
height: 100%;
width: calc(100% - 310px);
}
Related
I have a layout like below -
.page-wrapper {
height: 100%;
min-height: 970px;
position: relative;
}
.pageheader {
min-height: 50px;
position: fixed;
min-width: 100%;
}
.navbar-fixed-top {
top: 0;
}
.page-sidebar {
float: left;
width: 180px;
top: 0;
overflow: auto;
}
.page-content {
min-height: 970px;
float: left;
}
footer {
width: 100%;
text-align: center;
position: relative;
}
<div class="page-wrapper">
<div>
<div id="header" class="pageheader navbar navbar-fixed-top">
Navbar Top
</div>
<div class="clearfix"></div>
</div>
<div class="content-wrapper">
<div>
<div class="clearfix"></div>
<div id=".navbar-collapse" class="page-sidebar">
Navbar Side
</div>
<div class="clearfix"></div>
</div>
<div>
<div id="content" class="page-content">
Content
</div>
</div>
<div>
<footer id="footer">
Foter
</footer>
</div>
</div>
My main content-wrapper is coming below the sidebar and footer somewhere in the middle. I have tried using
display:inline-flex
on content-wrapper which places page-content next to sidebar but footer still remains in middle of page. Please help me with this.
You can set page-content width using calc. check updated snippet below
body {
margin: 0px;
}
.page-wrapper {
height: 100%;
min-height: 970px;
position: relative;
width: 100%;
padding-top: 50px;
display: block;
}
.pageheader {
min-height: 50px;
position: fixed;
min-width: 100%;
background: red;
}
.navbar-fixed-top {
top: 0;
}
.content-wrapper {
background: grey;
float: left;
width: 100%;
}
.page-sidebar {
float: left;
width: 180px;
overflow: auto;
}
.page-content {
min-height: 970px;
float:left;
background: green;
width: calc(100% - 180px);
}
footer {
width: 100%;
text-align: center;
position:relative;
background: black;
clear: both;
}
<div class="page-wrapper">
<div>
<div id="header" class="pageheader navbar navbar-fixed-top"> header<br/>
</div>
<div class="clearfix"></div>
</div>
<div class="content-wrapper">
<div>
<div class="clearfix"></div>
<div id=".navbar-collapse" class="page-sidebar">sidebar</div>
<div class="clearfix"></div>
</div>
<div>
<div id="content" class="page-content"> content
</div>
</div>
<div class="clearfix"></div>
<div>
<footer id="footer">footer
</footer>
</div>
</div>
I am trying to position some elements properly but they seem to clip/interfere with each other and I am not sure how to solve the issue.
I would like a fixed positioned header at the top & bottom with a center element that does not clip with them. Inside of the center I would like a left and right sidebar which also doesnt clip with the center.
Positioning & Size should not be absolute.
Top / Bottom act as Header/Footer only these are supposed to be fixed.
With this I mean that if I change my browsers width for example the content should 'resize'
Any idea or hint on how to achieve this?
|--------------------------------|
| Top (fixed header) |
|--------------------------------|
|------| Center/content |------|
|------| |------|
|------| ^ |------|
|------| | |------|
| Left | <--stretch--> | Right|
|------| | |------|
|------| v |------|
|------| |------|
|--------------------------------|
| Bottom(fixed footer) |
|--------------------------------|
This is what I currently have, header & footer are positioned corretly but they clash with my other elements...
html,
body {
height: 100%;
margin: 0 auto;
}
body {
color: #fff;
font-family: Verdana, Geneva, sans-serif;
text-shadow: 1px 1px black;
}
.page {
position: relative;
width: 100%;
height: 100%;
background: #fff;
}
.header {
position: fixed;
width: 100%;
top: 0;
background: #ddd;
}
.footer {
position: fixed;
float: bottom;
bottom: 0;
background: #aaa;
}
.left {
width: 20%;
height: 100;
float: left;
background: #ccc;
}
.middle {
width: 60%;
float: left;
display: block;
background: #ddd;
}
.right {
width: 20%;
float: right;
background: #bbb;
}
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="css/style.css">
<title>Titel</title>
</head>
<body>
<div class="page">
<div class="header">
<p>test2</p>
</div>
<div class="center">
<div class="left">
<p>test2</p>
</div>
<p>test2</p>
<div class="right">
<p>test2</p>
</div>
</div>
<div class="footer">
<p>test</p>
</div>
</page>
</body>
</html>
You need to set the height of your left and right bar to 100% of screen and I haven't seen this in your code.
Second because you are using fixed position for headers and footers but not for your left and right bar so the problem of interference of div is common.
html,
body {
height: 100%;
margin: 0 auto;
}
body {
color: #fff;
font-family: Verdana, Geneva, sans-serif;
text-shadow: 1px 1px black;
}
.page {
position: relative;
width: 100%;
height: 100%;
background: #fff;
}
.header {
position: fixed;
width: 100%;
top: 0;
background: Red;
float: left;
}
.footer {
position: fixed;
float: bottom;
bottom: 0;
background: Red;
width: 100%;
}
.left {
position: fixed;
width: 10%;
height: 100vh;
float: left;
background: #ccc;
margin-top: 35px;
}
.middle {
width: 60%;
float: left;
display: block;
background: Blue;
}
.right {
position: fixed;
width: 10%;
height: 100vh;
background: #bbb;
right: 0px;
}
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="css/style.css">
<title>Titel</title>
<style type="text/css">
</style>
</head>
<body>
<div class="page">
<div class="header">
<p>test2</p>
</div>
<div class="center">
<div class="left">
<p>Left</p>
</div>
<p>test2</p>
<div class="right">
<p>test2</p>
</div>
</div>
<div class="footer">
<p>test</p>
</div>
</div>
</body></html>
I think you skiped something in your html file. You probably should place your middle div there.
If you want the top and the bottom bars to be fixed and the rest to be moving with the scrollbar, you should do the following:
<div class="page">
<div class="header">
<p>header</p>
</div>
<div class="center">
<div class="left">
<p>left</p>
</div>
<div class="middle">
<p>middle</p>
</div>
<div class="right">
<p>right</p>
</div>
</div>
<div class="footer">
<p>footer</p>
</div>
</div>
I added a border for the top and the bottom panels so you can see what area they cover and what behind them is.
.header {
position: fixed;
width: 100%;
top: 0;
/*background: #ddd;*/
border: 1px dashed #000;
}
.footer {
position: fixed;
width: 100%;
/*float: bottom;*/
bottom: 0;
/*background: #aaa;*/
border: 1px dashed #000;
}
And your left, right and middle sections should be inline-blocks, I believe:
.left {
width: 20%;
/*height: 100;*/
display: inline-block;
float: left;
background: #ccc;
}
.middle {
width: 60%;
float: left;
display: inline-block;
background: #ddd;
}
.right {
width: 20%;
display: inline-block;
float: right;
background: #bbb;
}
You may want to add some padding at the top of your center area, so that the top bar does not cover the center panel:
.center
{
padding-top: 60px;
}
Try this,
[Demo] https://jsfiddle.net/RRakeshraj/dk4mezgb/1/
CODE
<style>
*{
margin:0;
padding:0;
}
body{
text-align:center;
}
.header-wrap{
height:55px;
background:gray;
width:100%;
position:fixed;
top:0;
}
.body-wrapper{
width: 70%;
margin: 55px auto;
min-height: 800px;
background:#eee;
}
.left-panel,.right-panel{
min-height:557px;
background: rgba(104, 241, 104, 0.68);
width:15%;
position:fixed;
}
.left-panel{
top:55px;
left:0;
}
.right-panel{
top:55px;
right:0;
}
.footer-wrap{
height:50px;
background:gray;
width:100%;
position:fixed;
bottom:0;
}
</style>
HTML
<div class="page-wrapper">
<div class="header-wrap">
<h3><!--Header--></h3>
</div>
<div class="left-panel"><h4><!--Left Panel--></h4></div>
<div class="body-wrapper">
<div class="content-panel"><h1><!--Content--></h1></div>
</div>
<div class="right-panel"><h4><!--Right panel--></h4></div>
<div class="footer-wrap">
<h3><!--Footer--></h3>
</div>
</div>
Simple yet can't figure it out. Hot can I make 2 sidebar boxes one at the top and one bellow. Here is demo
http://jsfiddle.net/logintomyk/fQPse/
<div id="sidebar">
Text<br/>Sidebar
</div>
<div id="sidebar">
Text<br/>Sidebar
</div>
Those two sidebar divs.
Wrap the sidebars with a parent element which you add the float:right CSS too
#wrapper {
width: 90%;
}
#header {
width: 100%;
height: 50px;
background-color: lightblue;
}
#content {
/* *** I want something that will change width to fill blank space when the user re-sizes the browser and the sidebar moves *** */
margin-top: 4px;
background-color: yellow;
}
#content >p {
margin-right: 100px;
margin-top: 0px;
}
.sidebarGroup {
width: 100px;
float: right;
}
.sidebar {
width: 100px;
margin-top: 4px;
background-color: pink;
}
#footer {
width: 100%;
height: 40px;
margin-top: 4px;
background-color: red;
}
<div id="Wrapper">
<div id="header">
header
</div>
<div class="sidebarGroup">
<div class="sidebar">
Text
<br/>Sidebar
</div>
<div class="sidebar">
Text
<br/>Sidebar
</div>
</div>
<div id="content">
<p>
Stuff
<br/>text
<br/>Just to fill some space
</p>
</div>
<div id="footer">
footer
</div>
</div>
This is practically what frameworks like Bootstrap were made for, but:
<div id="page">
<div id="header">
header
</div>
<div id="content-wrapper">
<div id="sidebar">
<div class="sidebar-box">
I am sidebar content
</div>
<div class="sidebar-box">
I am also sidebar content
</div>
</div>
<div id="content">
Stuff<br/>text<br/>Just to fill some space
</div>
<div class="clearfix">
</div>
</div>
<div id="footer">
footer
</div>
</div>
and then:
#header {
background: red;
}
#content {
background: blue;
width: calc(100% - 104px);
}
#sidebar {
width: 100px;
float: right;
}
.sidebar-box {
background: green;
}
#footer {
background: yellow;
margin-top: 4px;
}
#content-wrapper {
margin-top: 4px;
}
#content:after {
content:'';
display:table;
clear:both;
}
does the trick!
Fiddle here: http://jsfiddle.net/7pcLks4m/
I want to achieve the following:
layered div
rows are working, but I can't put the top layer div (the one with the class map) in the right place, it always pushes some of the rows to the side. how can I achieve the desired result using bootstrap?
/* my css: (index.css) */
.container-full {
margin: 0 auto;
width: 90%;
margin-bottom: 100px;
}
.blue-row{
height: 200px;
background: linear-gradient(#4b7fe4, #99B4E8)
}
.grey-row{
background-color: #e3e3e3;
}
.darkgrey-row{
height: 100px;
background-color: #bebebe;
}
.map{
height: 200px;
width: 200px;
position: relative;
z-index:9999;
background:red;
}
<div class="container container-full" ng-app="myApp" ng-controller="myCtrl">
<div class="row blue-row">
asas
</div>
<div class="row grey-row">
<div class="map"> <!-- top layer div -->
content
</div>
</div>
<div class="row darkgrey-row">asasas</div>
Something like this?
.container-full {
margin: 0 auto;
width: 90%;
margin-bottom: 100px;
position:relative;
}
.blue-row{
height: 200px;
background: linear-gradient(#4b7fe4, #99B4E8)
}
.grey-row{
background-color: #e3e3e3;
}
.darkgrey-row{
height: 100px;
background-color: #bebebe;
}
.map{
height: 200px;
width: 200px;
position: absolute;
background:red;
top:50%;
left:50%;
z-index:9999;
transform:translate(-50%,-50%);
}
<div class="container container-full" ng-app="myApp" ng-controller="myCtrl">
<div class="row blue-row">
asas
</div>
<div class="row grey-row">
<div class="map"> <!-- top layer div -->
content
</div>
</div>
<div class="row darkgrey-row">asasas</div>
Check this out:
If you want that top level div stay where it is, you can make .map > position:absolute
.container-full {
margin: 0 auto;
width: 90%;
margin-bottom: 100px;
}
.blue-row{
height: 200px;
background: linear-gradient(#4b7fe4, #99B4E8)
}
.grey-row{
background-color: #e3e3e3;
height:150px;
}
.darkgrey-row{
height: 100px;
background-color: #bebebe;
}
.map{
height: 200px;
width: 200px;
z-index:9999;
background:red;
left:-50%;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
position:fixed;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container container-full" ng-app="myApp" ng-controller="myCtrl">
<div class="row blue-row">
asas
</div>
<div class="row grey-row">
<div class="map">
content
</div>
</div>
<div class="row darkgrey-row">asasas</div>
</div>
I'm currently working on a chat project with Bootstrap and I have issues positioning my divs. Here's my pattern:
<div class="container">
<div class="row"> <!-- #header -->
<h1>Header stuff</h1>
</div>
<div class="row"> <!-- #main -->
<div class="col-sm-9">
<ul>Chat messages</ul> <!-- #chatbox -->
</div>
<div class="col-sm-3">
<ul>Users list</ul> <!-- #users -->
</div>
</div>
<div class="row"> <!-- #input -->
<form>Input zone</form>
</div>
</div>
Basically what I want is to fit these 3 row sections into the browser's height, so that the input zone is always at the bottom of the screen and the page is not scrollable, but I want both the #chatbox and the #users to be scrollable so that they fit in the #main.
Here is what I've done so far:
html, body {
height: 100%;
margin: 0;
}
body > .container {
height: 100%; /* Fit the container into the window */
}
.row#main > div {
max-height: 100%; /* This doesn't */
overflow: auto; /* work :( */
}
.row#input { /* Stick the input zone at the bottom */
position: absolute;
bottom: 0px;
width: 100%;
margin-bottom: 0px;
}
But when I extend the #chatbox or the #users, I don't get a good result :(
Anyone's got an idea? I'd like a full-CSS solution if possible :3
Thanks ^^
I've made a little demo for you to resolve this issue. Its pure CSS and suitable for any responsive layout.
You need to use the absolute position cleverly.
demo http://jsfiddle.net/h87p14tx/2/
HTML
<div class="row header"> <!-- #header -->
<h1>Header stuff</h1>
</div>
<div class="row main"> <!-- #main -->
<div class="col-sm-9 chatbox"> <!-- #chatbox -->
<ul>Chat messages</ul>
</div>
<div class="col-sm-3 users"> <!-- #users -->
<ul>Users list</ul>
</div>
</div>
<div class="row input"> <!-- #input -->
<form>Input zone</form>
</div>
CSS
.header, .input {
width: 100%; position: absolute;
background: red;
}
.header {
top: 0;
height: 70px;
}
.input {
bottom: 0;
height: 50px;
}
.main {
width: 100%; position: absolute; top: 70px; bottom: 50px;
background: green;
overflow: auto;
}
.chatbox, .users{
height: 100%;
}
.main .chatbox{
width: 70%;
float: left;
background: blue;
}
.main .users{
width: 30%;
float: right;
background: yellow;
}
Assuming you are essentially creating a header/body/footer layout, this should do the job:
html,
body {
min-height: 100%;
padding:0;
margin:0;
}
#main {
position: absolute;
padding: 100px 0;
top:0;
bottom:0;
left:0;
right:0;
background-color: red;
}
#header {
margin-top:-100px;
height:100px;
background-color: blue;
}
#body {
min-height: 100%
}
#footer {
height: 100px;
margin-bottom: -100px;
background-color:green;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/bootstrap/3.3.0/css/bootstrap.min.css">
<script src="https://cdn.jsdelivr.net/bootstrap/3.3.0/js/bootstrap.min.js"></script>
<div id="main" class="container">
<div id="header" class="row"> <!-- #header -->
<h1>Header stuff</h1>
</div>
<div id="body" class="row"> <!-- #main -->
<div class="col-sm-9">
<ul>Chat messages</ul> <!-- #chatbox -->
</div>
<div class="col-sm-3">
<ul>Users list</ul> <!-- #users -->
</div>
</div>
<div id="footer" class="row"> <!-- #input -->
<form>Input zone</form>
</div>
</div>