i want to add some space between main content and sidebar,in black space,there must display backgroung image,i don't want to add border.
see my blog template screenshot.
image link:-http://i.stack.imgur.com/xxpfV.jpg
so,there is no any blank space between main content to sidebar.
See this another screenshot,in this photo you will see some space between main content and sidebar.
image link-http://i.stack.imgur.com/Y5bld.jpg
So i want add space like this,anybody know how to do that with margin and padding?
I am using simple white blogger template, so in which class or id,i need to add css code?
thank you very much for any type of help.
Html code:
<div id="wrapper">
<div id="left">
<p>The left-hand content</p>
</div>
<div id="right">
<p>The right-hand content</p>
</div>
</div>
and Here is the css :
#wrapper
{position: fixed;
top: 0;
bottom: 0;
right: 0;
left: 0;
display: block;
width: 100%;
background-color: #ffa;
}
#right {position: absolute;
border-radius: 5px 10px / 10px;
top:5%;
right: 10%;
bottom: 0;
width: 17%;
display: block;
background-color: #ccc;
overflow: auto;
}
#left {width: 60%; height:100%;
border-radius: 5px 10px / 10px;
margin-top:2.5%;
margin-left: 10%;
margin-right: 16%;
display: block;
background-color: #0ff;
overflow: auto;
}
p {display: block;
margin: 0.5em;
padding: 0.2em 0.5em;
}
The above code will look like this image
http://i57.tinypic.com/29wv614.png
Related
I wanted to make a fixed navbar on my website, but it overlaps other elements. As you can see from the snippet, <nav> is supposed to be the navbar, and <div> is meant to be some other content on the website. <div> element needs to be on space outside navbar like this: https://i.imgur.com/ugfdTUV.png
I already know about margin-left method, but my navbar doesn't have a specified width, so that method wouldn't work, and plus I'm looking for a more efficient way to solve this.
nav {
top: 0;
left: 0;
height: 100%;
padding: 2cm;
position: fixed;
border-right: 1px solid black;
}
nav a {
padding: 20px 0px;
display: block;
}
<nav>
Sample
Sample
Sample
Sample
</nav>
<div>
<h1>Sample text</h1>
</div>
I create an example, for support text at center i add class call page:
nav {
top: 0;
left: 0;
height: 100%;
padding: 2cm;
position: fixed;
border-right: 1px solid black;
z-index: 999;
display: block;
}
nav a {
padding: 20px 0px;
display: block;
}
.page{
position: absolute;
top: 0;
right: 0;
width: calc(100% - 200px);
background-color: #F4F7FA;
min-height: 100vh;
padding-bottom: 50px
}
<nav>
Sample
Sample
Sample
Sample
</nav>
<div class='page'>
<h1>Sample text</h1><br>
<p>Another element</p>
</div>
Although the margin fix is the simplest option, you can use the position: sticky; CSS property on the sidebar.
Have a look at this JSFidde I wrote.
I have the following layout which is a alteration of the AdminLTE boxed layout template:
HTML
<div class="wrapper">
<div class="header">
Header
</div>
<div class="leftbar">
Left bar
</div>
<div class="content-wrapper">
<div class="content">
Content
</div>
<div class="content-rightbar">
Right bar
</div>
</div>
<div class="footer">
Footer
</div>
</div>
CSS
body {
background-color: lightgray;
margin: 0;
padding: 0;
overflow-x: hidden;
overflow-y: auto;
}
.wrapper {
overflow: hidden;
background-color: #222d32;
max-width: 600px;
margin: 0 auto;
min-height: 100%;
position: relative;
height: 100%;
}
.header {
position: relative;
height: 30px;
z-index: 1030;
color: white;
background-color: #367fa9;
padding: 2px;
}
.leftbar {
color: white;
background-color: #222d32;
position: absolute;
top: 0;
left: 0;
padding-top: 30px;
min-height: 100%;
width: 100px;
z-index: 810;
padding: 40px 10px 10px 10px;
}
.content-wrapper {
margin-right: 100px;
margin-left: 100px;
background-color: #ecf0f5;
z-index: 800;
}
.content {
min-height: 200px;
padding: 10px;
margin-right: auto;
margin-left: auto;
}
.content-rightbar {
right: 0;
min-height: calc(100% - 30px);
position: absolute;
background: #f9fafc;
border-left: 1px solid #d2d6de;
z-index: 1010;
top: 0;
width: 100px;
text-align: right;
padding: 40px 10px 0 10px;
}
.footer {
background: #fff;
border-top: 1px solid #d2d6de;
margin-left: 100px;
z-index: 9999;
height: 30px;
padding: 2px;
}
Codepen
https://codepen.io/kspearrin/pen/QqBrpB
Result
Problems
This looks precisely how I would like it to with one problem:
Overflowing the leftbar and content-rightbar with content causes the overflowed content to be hidden. Height is only determined by the content inside content.
Examples:
Question
How can I make it so that the either the entire layout's height within the body increases with the content of the content, leftbar, and content-rightbar - OR - that the leftbar and content-rightbar scroll with their overflowing content?
You have set your overflow to hidden for your wrapper, you can just set it to "auto" or "scroll" to show the content inside your container. Only then it will take it will be longer then your content container and then it will take in the whole width because there are no other elements right there.
I would in fact recommend you to reconsider using flex box as it will keep your elements at the same height and will prevent all the overflow issues you have right now.
If you are unfamiliar with flex boxes I can recommend you https://css-tricks.com/snippets/css/a-guide-to-flexbox/ at the end you will find an example for a multi column layout which includes all the elements you need for your project.
Also another tip: You could use an unordered list for your sidebar items, as this is the most common way to do it.
ul {list-style: none;}
<ul>
<li>Left bar</li>
<li>Left bar</li>
<li>Left bar</li>
</ul>
I have this page layout and am trying to make it occupy 100% of the height by expanding the content area and leaving the footer visible at the bottom of the page.
But for some reason the content area is not expanding. Do you know what I need to change in the code?
<body>
<form id="form1" runat="server">
<div>
<div class="main">
<div class="header">
This is the header
</div>
<div class="content">
This is the content
</div>
<div class="footer">
This is the footer
</div>
</div>
</div>
</form>
</body>
And here is the css
html, form
{
height: 100%;
}
body
{
padding: 0px;
margin: 0px;
background-image: url('../back.jpg');
height: 100%;
}
.main
{
margin: 0px auto;
width: 100%;
height: 100%;
}
.header
{
float: left;
width: 100%;
background-color: Yellow;
height: 80px;
}
.content
{
width: 960px;
margin: 0 auto;
background-color: Gray;
height: auto;
min-height: 100%;
}
.footer
{
width: 960px;
background-color: Green;
margin: 0px auto;
height: 50px;
}
Thanks
You need to remove the extra div that has no class specified. Since that div has no height specified, the 100% height you are setting in the div with class main will not work.
<body>
<form id="form1" runat="server">
<div class="main">
<div class="header">
This is the header
</div>
<div class="content">
This is the content
</div>
<div class="footer">
This is the footer
</div>
</div>
</form>
</body>
UPDATE
Okay so fixing your issue with the footer not "sticking" to the bottom of the page, I modified part of your css.
.content
{
width: 960px;
margin: 0 auto;
background-color: Gray;
padding-bottom: 50px;
min-height: 90%;
}
.footer
{
position: fixed;
bottom: 0;
left: 50%;
width: 960px;
margin-left: -480px;
height: 50px;
background-color: Green;
}
.content
padding-bottom: 50px; This is so extra content does not overflow into the space occupied by the footer.
.footer
position: fixed; We need this to force the positioning of the footer.
bottom: 0; This will force the footer to the bottom of the page.
left: 50%; Puts the left side of the footer div in the middle of the page.
margin-left: -480px; Move the div left of half of the width of the footer so it is now centered on the page.
Example 1: http://jsfiddle.net/nG9sm/
Example 2, lots of text: http://jsfiddle.net/9Up5F/
Your code has extra div with no class just remove it, it will fix the issue.
Updated fiddle
Update your .footer CSS:
.footer
{
width: 960px;
background-color: Green;
margin: 0px auto;
height: 50px;
position: absolute;
bottom: 0;
}
or
.footer
{
width: 960px;
background-color: Green;
margin: 0px auto;
height: 50px;
position: fixed;
bottom: 0;
}
Help Link
Make footer stick to bottom of page correctly
I am trying to create 2 side banners (left and right) with fixed positioning, and a centered container for the content.
The problem is that when minimizing the screen, the 2 side banners cover the centered container. I need a CSS solution to set the minimum width of the view to 860px; after which, the window becomes scrollable and divs do not overlap. The perfect solution is:
The HTML I am using is as such:
<div class="left" style="position:fixed; height:100%; background-color:#7fb4dd; top:43px; left:0px; width:180px;">
</div>
<div class="center" style="margin:100px 180px 0 180px;">
<div style="width:100%;">
<div style="width:500px; margin:0 auto;">
</div>
</div>
</div>
<div class="right" style="position:fixed; height:100%; background-color:#7fb4dd; top:43px; right:0px; width:180px;">
</div>
The above code prevents the left bar from overlapping the center container; but the problem is still present with the right bar.
This is a fiddle of the code: preview
You need to wrap the three DIVs in a wrapping DIV and set the min-width to prevent the overlap. This prevents it from getting narrower than the three columns. Add up the widths, set that as the minimum.
Here is a pure HTML/CSS solution for you , tell me if it is not exactly what you needed.
<html>
<head>
<style type="text/css">
body{
margin:0;
padding:0;
line-height: 1.5em;
}
b{font-size: 110%;}
em{color: red;}
#topsection{
background: #EAEAEA;
height: 90px; /*Height of top section*/
}
#topsection h1{
margin: 0;
padding-top: 15px;
}
#contentwrapper{
float: left;
width: 100%;
}
#contentcolumn{
margin: 0 200px 0 230px; /*Margins for content column. Should be "0 RightColumnWidth 0 LeftColumnWidth*/
background-color : red;
width : 400px;
margin-left : auto;
margin-right : auto;
}
#leftcolumn{
float: left;
width: 200px; /*Width of left column*/
margin-left: -100%;
background: #C8FC98;
}
#rightcolumn{
float: left;
width: 200px; /*Width of right column*/
margin-left: -200px; /*Set left marginto -(RightColumnWidth)*/
background: #FDE95E;
}
#footer{
clear: left;
width: 100%;
background: black;
color: #FFF;
text-align: center;
padding: 4px 0;
}
.innertube{
margin: 10px; /*Margins for inner DIV inside each column (to provide padding)*/
margin-top: 0;
height : 700px;
}
.innertubetop{
margin: 10px; /*Margins for inner DIV inside each column (to provide padding)*/
margin-top: 0;
}
</style>
</head>
<body>
<div id="maincontainer" style = "min-width : 800px;"> <!-- this will be sum of width of all three columns-->
<div id="topsection"><div class="innertubetop"><h1>Hello iam navigation bar</h1></div></div>
<div id="contentwrapper">
<div id="contentcolumn">
<div class="innertube"><b>Center Column </b></div>
</div>
</div>
<div id="leftcolumn">
<div class="innertube"><b>Left Column: <em>200px</em></b></div>
</div>
<div id="rightcolumn">
<div class="innertube"><b>Right Column: <em>200px</em></b></div>
</div>
</div>
</body>
</html>
The problem you are in is because of position: fixed; since that object is taken out of the workflow the other objects can't push it away. I was able to get a nice and fully responsive layout to work. (Let me know how it is)
Fixed positioned elements are removed from the normal flow. The
document and other elements behave like the fixed positioned element
does not exist.
Fixed positioned elements can overlap other elements.
Updated answer to better suit his needs (JSFIDDLE, remove the show, in the url, to see code)
Okay what I am doing here is using css media queries to change the layout.
Here is the html,
<div class="wrap">
<nav></nav>
<div class="content"></div>
<section class="lSide"></section>
<section class="rSide"></section>
</div>
Now the media query,
#media only screen and (max-width: 680px) {
.content {
width: 90%;
margin-bottom: 10px;
}
.lSide, .rSide {
position: relative;
width: 90%;
height: 100px;
margin: 10px auto;
bottom: 0;
}
}
Don't forget to add this to your head on your html file,
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0;">
OLD answer
The CSS, (JSFIDDLE, remove the show to see code)
html, body {
width: 100%;
height: 100%;
padding: 0;
margin: 0;
background: tan;
}
.wrap.active {
min-width: 750px;
}
nav {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 20%;
background: brown;
z-index: 101;
}
.lSide {
background: #3b3b3b;
position: fixed;
left: 0;
top: 20%;
width: 200px;
height: 80%;
}
.content {
width: 300px;
height: 600px;
background: #c1c1c1;
margin: 0 auto;
position: relative;
z-index: 100;
top: 20%;
}
.rSide {
background: #3b3b3b;
position: fixed;
right: 0;
top: 20%;
width: 200px;
height: 80%;
}
.rSide.active {
display: none;
}
The JS, (updated)
$(window).resize(function() {
if ($(window).width() < '750') {
$('.wrap, .rSide').addClass('active');
}
else {
$('.wrap, .rSide').removeClass('active');
}
});
One solution I have, refer to fiddle next to css, is to remove the right side when a screen size is to small.
I am trying to implement cosntruction, described here.
<div id="wrap">
<div id="header">
header
</div>
<div id="main">
main<br/>main<br/>main<br/>main<br/>main<br/>main<br/>
</div>
</div>
<div id="footer">
footer
</div>
#header {
border-top:20px solid #fff;
height: 33px;
line-height: 33px;
text-align: center;
}
html { height: 100%; }
body { height: 100%; width: 90%; margin: auto; }
#wrap { min-height: 100%;background-color:gray;}
#main {
overflow: auto;
padding-bottom: 53px; /* must be same height as the footer */
background-color: red;
border: solid 1px blue;
height: 90%;
}
#footer {
position: relative;
margin-top: -53px; /* negative value of footer height */
height: 33px;
line-height: 33px;
border-bottom:20px solid #fff;
text-align: center;
}
The whole page has background color (gray), header and footer are transparent (so you can see the page's background through it) and the content block has red background. Despite the fact that content part is stretchable it doesn't fill with the background the whole block, only the actual.
Is it possible to fill the whole content block with the color?
While minimizing window the footer floats on content. is it possible to disable such behaviour?
Here is a workaround of what you are looking for. Hope this helps.
Add this lines of code below to your code:
#main{
position: absolute;
top: 33px;
bottom: 33px;
left: 0;
right: 0;
}
#wrap{
position: relative;
}