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.
Related
I have these 2 columns:
If I scroll down on my html page, I want only the second column to scroll down, the left one should always be frozen.
Could someone help? This has to be done only in html.
Thanks!
You would use position: fixed. Then put all your content in the second column. See example below:
body {
width: 100%;
padding: 0;
margin: 0;
}
.sidebar {
position: fixed;
top: 0px;
bottom: 0px;
left: 0px;
width: 250px;
background-color: #efefef;
}
.content {
margin-left: 250px;
padding: 1rem;
}
<body class="grid">
<div class="sidebar">
</div>
<div class="content">
<p>
This is the content for this section! :D
</p>
</div>
</body>
Hey there’s a lot of ways to do this simple task but I’ll try and be as straightforward as possible.
In your JavaScript html, (I use Sumblime)
<div id=“Column1”>
<p><strong>Column 1</strong></p></div>
Now I will open CSS in Visual Studio Code,
div#Column1 {
Background-color: rgb (0,0,0)
font-family: ‘Roboto Mono’, monospace;
float: left;
border-radius 22;
position: absolute;
right: 22%;
}
The ‘position’ method is used in CSS for positioning elements. In this case absolute can be used to make the position of the div for your column more static.
Be very very careful with it though!
I would advise to use position: sticky; See my example:
.container {
width: 800px;
display: grid;
grid-template-columns: 1fr 2fr;
gap: 15px;
}
.sticky {
position: -webkit-sticky; /* Safari */
position: sticky;
top: 0;
height: 300px;
width: 100%;
background: red;
}
.sticky p {
font-size: 35px;
padding: 15px;
}
.content-block {
width: 100%;
height: 1000px;
background: green;
}
<div class="container">
<div class="sticky">
<p>sticky on screen</p>
</div>
<div class="content-block">
</div>
</div>
I need to have div border responsive. However, as you can see .buttonsDiv needs to be at the bottom and wrapper border needs to be stretched underneath .buttonsDiv. But when I use this code buttons are at the bottom but border stays at the top. I can't use margin because content div contains elements that are shown/hidden and the page needs to be fixed aka disabled scrolling.
html
.wrapper {
border: 1px solid black;
}
.buttonsDiv {
position: fixed;
bottom: 10px;
}
<div class="wrapper">
<div class="borderedDiv">Content</div>
<div class="buttonsDiv">Butons</div>
</div>
Put position: absolute; to the parent and define top, bottom, left, right as 0;
PS: This solution will not add scroll bar which appears if you put height 100vh
.wrapper {
border: 1px solid black;
position: absolute;
bottom: 0;
top: 0;
right: 0;
left: 0
}
.buttonsDiv {
position: fixed;
bottom: 10px;
}
<div class="wrapper">
<div class="borderedDiv">Content</div>
<div class="buttonsDiv">Butons</div>
</div>
Its hard to understand what you are after. Do you mean something like this?
html, body{
margin: 0;
padding: 0;
}
.wrapper{
height: 100vh;
width: 100vw;
padding: 10px;
box-sizing: border-box;
}
.inner_wrap{
position:relative;
width: 100%;
height: 100%;
border: 1px solid black;
box-sizing: border-box;
}
.buttonsDiv{
position: absolute;
bottom: 10px;
}
<div class="wrapper">
<div class="inner_wrap">
<div class="borderedDiv">Content</div>
<div class="buttonsDiv">Butons</div>
</div>
</div>
To add to the previous answer:
.wrapper {
border: 1px solid black;
height: 100vh;
}
.buttonsDiv {
position: absolute;
bottom: 1px;
}
<div class="wrapper">
<div class="borderedDiv">Content</div>
<div class="buttonsDiv">Butons</div>
</div>
The wrapper doesn't need an position: relative, position static will do fine.
With the position absolute of the button div you place the element relative to its parent element. Therefore if we put .buttonsDiv to bottom:1px it will stick to the bottom of the element.
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 currently got a footer in my website that I want to have at the bottom of the page at all times. It is only one line on most screens so I thought it would be a good idea to have it always there. I want to stay away from JavaScript too.
CSS
#footer {
position: absolute;
bottom: 0px;
width: 100%;
}
HTML
<div class="footer">
<p class="footer">Design by <a class="footer" href="http://www.tropilac.com">Tropilac</a></p>
</div>
Use position: fixed if you need to show at all times.
html,
body {
margin: 0;
padding: 0;
}
* {
margin: 0;
padding: 0;
}
.footer {
position: fixed;
bottom: 0;
width: 100%;
text-align: center;
background: lightgray;
color: black;
}
<html>
<body>
<div class="footer">
<p class="footer">Design by Tropilac
</p>
</div>
</body>
</html>
Try positioning your element to fixed. This is useful for elements such as a footer as if you do something like this:
.footer {
position: fixed;
height: 50px;
border: 1px solid #ccc;
position: fixed;
bottom: 0;
left: 10%;
right: 10%;
}
This will give you a footer that stays at the bottom of the viewport. One drawback is that if the content is longer than the page the footer will still show positioned at the bottom of the page. This code will also give you your 80% width.
Fiddle: http://jsfiddle.net/p16rwgnn/
Use position:fixed and bottom:0 to get what you want
.footer {
position: fixed;
bottom: 0;
width: 100%;
}
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