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>
Related
I have this code with the reqirement to add another side menu to my existing page
https://jsfiddle.net/84j7wcqa/
<div class="wrapper">
<div class="header">
<div class="inner">header</div>
</div>
<div class="top">
<div class="inner">top</div>
</div>
<div class="content">
<div class="inner">
<div class="right">
<div style="height:1000px;">right</div>
</div>
</div>
</div>
<div class="footer">
<div class="inner">footer</div>
</div>
html, body {
height: 100%;
margin: 0;
}
.wrapper {
height: 100%;
width: 100%;
display: table;
}
.header, .content, .footer, .top {
display: table-row;
}
.header, .footer {
background: silver;
}
.inner {
display: table-cell;
}
.content .inner {
height: 100%;
position: relative;
background: pink;
}
.right {
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
overflow: auto;
}
.top {
background-color: gold;
}
which looks this way:
But I want a additional content which is scrollable to look it like this
Question: Can this be solved with the table / table-row / table-cell approach?
Check my answer in this link. Hope this helps.
https://jsfiddle.net/m2vpcs1u/3/
HTML:
<div class="wrapper">
<div class="header">
<div class="inner">header</div>
</div>
<div class="top">
<div class="inner">top</div>
</div>
<div class="content">
<div class="inner">
<div class="right">
<div style="height:1000px;">right</div>
</div>
<div class="left">
<div style="height:1000px;">left</div>
</div>
</div>
</div>
<div class="footer">
<div class="inner">footer</div>
</div>
</div>
CSS:
html, body {
height: 100%;
margin: 0;
}
.wrapper {
height: 100%;
width: 100%;
display: table;
}
.header, .content, .footer, .top {
display: table-row;
}
.header, .footer {
background: silver;
}
.inner {
display: table-cell;
}
.content .inner {
height: 100%;
position: relative;
background: pink;
}
.right {
position: absolute;
left: 50%;
right: 0;
top: 0;
bottom: 0;
overflow: auto;
width:50%;
}
.left {
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
overflow: auto;
width:50%;
}
.top {
background-color: gold;
}
You can use this code
html, body {
height: 100%;
margin: 0;
}
.wrapper {
height: 100%;
width: 100%;
display: table;
}
.header, .content, .footer, .top {
display: table-row;
}
.header, .footer {
background: silver;
}
.inner {
display: inline-block;
float: left;
width: 100%;
}
.inner .left {
display: inline-block;
width: 50%;
float: left;
overflow: auto;
height: 900px;
}
.inner .right {
display: inline-block;
width: 50%;
float: left;
overflow: auto;
height: 900px;
}
.content .inner {
height: 100%;
position: relative;
background: pink;
}
.top {
background-color: gold;
}
<div class="wrapper">
<div class="header">
<div class="inner">header</div>
</div>
<div class="top">
<div class="inner">top</div>
</div>
<div class="content">
<div class="inner">
<div class="left">
<div style="height:1000px;">left</div>
</div>
<div class="right">
<div style="height:1000px;">right</div>
</div>
</div>
</div>
<div class="footer">
<div class="inner">footer</div>
</div>
</div>
I've read other SO posts asking this question but it didn't work with the HTML/CSS I have.
https://jsfiddle.net/hmsrj1jh/
body, html {
margin: 0 auto;
padding: 0;
}
.container-fluid {
padding: 0px !important;
}
.right {
background-color: gray;
width:100%;
height:100vh;
}
.left {
background-color: purple;
width: 100%;
height: 100vh;
}
.footer {
position: fixed;
padding: 20px;
bottom: 0;
width:100%;
}
HTML
<div class="wrapper">
<div class="container-fluid">
<div class="left">
</div>
<div class="right">
<div id="results">
</div>
<div class = "footer">
Footer
</div>
</div>
</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 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);
}
I have a website with the following structure:
<html>
<body>
<div id="page">
<div id="anyContent"></div>
<div id="pagecontent">
<div id="bigContent"></div>
<div id="footer"></div>
</div>
</div>
</body>
</html>
bigContent is dynamic and often stretches to large sizes (demonstrated by its width and height). Because a lot of elements are dynamically rendered into the div, bigContent isn't set to a static width.
How can I force the footer to have the same width as bigContent?
See my example jsFiddle.
html {
margin: 0;
padding: 0;
height: 100%;
min-width: 100%;
}
#page {
min-height: 100%;
min-width: 100%;
position: relative;
}
#bigContent {
background: black;
height: 3000px;
width: 5000px;
}
#footer {
background: blue;
clear: left;
bottom: 0px;
width: 100%;
height: 100px;
}
You can set some properties to #pagecontent then it will work as per your need:
html {
margin: 0;
padding: 0;
height: 100%;
min-width: 100%;
}
#pagecontent {
float: left;
position: relative;
}
#pagecontainer {
min-height: 100%;
min-width: 100%;
position: relative;
}
#bigContent {
background: black;
}
#footer {
background: blue;
height: 25px;
width: 100%;
}
<div id="pagecontainer">
<div id="anyContent"> </div>
<div id="pagecontent">
<div id="bigContent" style="width:500px; height:150px;"></div>
<div id="footer"></div>
</div>
</div>
You have set the width: 5000px and height to 3000px.
<div id="bigContent" style="width:5000px; height:3000px;"></div>
Try this
<div id="bigContent"></div>
and add
#bigContent {
background: yellow;
height: 1000px;
width: 100%;
}
FIDDLE
You set width to #bigContent, better would be to set this width to #pagecontent.
<div id="pagecontainer">
<div id="anyContent"></div>
<div id="pagecontent" style="width:5000px;">
<div id="bigContent" style="height:3000px;"></div>
<div id="footer"></div>
</div>
</div>
http://jsfiddle.net/47hb3fcn/3/