Fixed horizontal scrollbar in child element - html

I have a wrapper that contains two children which each takes up 50% in width. They are equal in height which is higher than the parent. The parent handles this with overflow-y.
The right div could contain content that is wider than the divs width which is handled with overflow-x on the div. My problem is that I want the scrollbar to be fixed at the bottom of the parent div so it’s always visible.
Here is the html to illustrate the problem.
<div class="parent">
<div class="left">
<p class="left-content-row">Left content</p>
<p class="left-content-row">Left content</p>
<p class="left-content-row">Left content</p>
<p class="left-content-row">Left content</p>
<p class="left-content-row">Left content</p>
<p class="left-content-row">Left content</p>
<p class="left-content-row">Left content</p>
<p class="left-content-row">Left content</p>
<p class="left-content-row">Left content</p>
</div>
<div class="right">
<p class="right-content-row">Right content</p>
<p class="right-content-row">Right content</p>
<p class="right-content-row">Right content</p>
<p class="right-content-row">Right content</p>
<p class="right-content-row">Right content</p>
<p class="right-content-row">Right content</p>
<p class="right-content-row">Right content</p>
<p class="right-content-row">Right content</p>
<p class="right-content-row">Right content</p>
</div>
I have created a plunkr to show the setup and the problem
https://plnkr.co/edit/QkH0QT7bhUjKcntPjMtG?p=preview

Related

Sticky navbar in css and html

I am trying to make the navbar stick at the top when i scroll down and i found this example on w3schools.
But when i add the margin at the top of the main content, the margin seems to get added to the navbar instead since it moves down 100px, can anyone help me out?
This is my code:
* {
margin: 0;
padding: 0;
}
body {
font-family: 'Titillium Web', sans-serif;
}
nav {
display: flex;
justify-content: space-between;
padding: 10px;
box-shadow: 0 0 10px;
position: fixed;
width: 100%;
}
.pages-container p {
display: inline;
margin: 0 35px;
font-size: 20px;
}
.pages-container .last {
margin-right: 0;
}
nav .title {
font-size: 20px;
}
.main {
margin-top: 100px;
}
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Titillium+Web:ital,wght#0,400;0,700;1,400&display=swap" rel="stylesheet">
<nav>
<p class="title">Portfolio Willem</p>
<div class="pages-container">
<p>Economie</p>
<p>Bedrijfseconomie</p>
<p>Wiskunde A</p>
<p class="last">Geschiedenis</p>
</div>
</nav>
<div class="main">
<p>test content</p>
<p>test content</p>
<p>test content</p>
<p>test content</p>
<p>test content</p>
<p>test content</p>
<p>test content</p>
<p>test content</p>
<p>test content</p>
<p>test content</p>
<p>test content</p>
<p>test content</p>
<p>test content</p>
<p>test content</p>
<p>test content</p>
<p>test content</p>
<p>test content</p>
<p>test content</p>
<p>test content</p>
<p>test content</p>
<p>test content</p>
<p>test content</p>
<p>test content</p>
<p>test content</p>
<p>test content</p>
<p>test content</p>
<p>test content</p>
<p>test content</p>
<p>test content</p>
<p>test content</p>
<p>test content</p>
<p>test content</p>
<p>test content</p>
<p>test content</p>
<p>test content</p>
<p>test content</p>
<p>test content</p>
<p>test content</p>
<p>test content</p>
<p>test content</p>
<p>test content</p>
<p>test content</p>
<p>test content</p>
<p>test content</p>
<p>test content</p>
<p>test content</p>
<p>test content</p>
<p>test content</p>
<p>test content</p>
<p>test content</p>
<p>test content</p>
<p>test content</p>
<p>test content</p>
<p>test content</p>
<p>test content</p>
<p>test content</p>
<p>test content</p>
<p>test content</p>
<p>test content</p>
<p>test content</p>
<p>test content</p>
<p>test content</p>
<p>test content</p>
<p>test content</p>
<p>test content</p>
<p>test content</p>
<p>test content</p>
<p>test content</p>
<p>test content</p>
</div>
Thanks in advance!
I was expecting the main content to move down and not the navbar.

Add to <nav> top: 0; background: white;
* {
margin: 0;
padding: 0;
}
body {
font-family: 'Titillium Web', sans-serif;
}
nav {
display: flex;
justify-content: space-between;
padding: 10px;
box-shadow: 0 0 10px;
position: fixed;
top: 0;
width: 100%;
background: white;
}
.pages-container p {
display: inline;
margin: 0 35px;
font-size: 20px;
}
.pages-container .last {
margin-right: 0;
}
nav .title {
font-size: 20px;
}
.main {
margin-top: 100px;
}
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Titillium+Web:ital,wght#0,400;0,700;1,400&display=swap" rel="stylesheet">
<nav>
<p class="title">Portfolio Willem</p>
<div class="pages-container">
<p>Economie</p>
<p>Bedrijfseconomie</p>
<p>Wiskunde A</p>
<p class="last">Geschiedenis</p>
</div>
</nav>
<div class="main">
<p>test content</p>
<p>test content</p>
<p>test content</p>
<p>test content</p>
<p>test content</p>
<p>test content</p>
<p>test content</p>
<p>test content</p>
<p>test content</p>
<p>test content</p>
<p>test content</p>
<p>test content</p>
<p>test content</p>
<p>test content</p>
<p>test content</p>
<p>test content</p>
<p>test content</p>
<p>test content</p>
<p>test content</p>
<p>test content</p>
<p>test content</p>
<p>test content</p>
<p>test content</p>
<p>test content</p>
<p>test content</p>
<p>test content</p>
<p>test content</p>
<p>test content</p>
<p>test content</p>
<p>test content</p>
<p>test content</p>
<p>test content</p>
<p>test content</p>
<p>test content</p>
<p>test content</p>
<p>test content</p>
<p>test content</p>
<p>test content</p>
<p>test content</p>
<p>test content</p>
<p>test content</p>
<p>test content</p>
<p>test content</p>
<p>test content</p>
<p>test content</p>
<p>test content</p>
<p>test content</p>
<p>test content</p>
<p>test content</p>
<p>test content</p>
<p>test content</p>
<p>test content</p>
<p>test content</p>
<p>test content</p>
<p>test content</p>
<p>test content</p>
<p>test content</p>
<p>test content</p>
<p>test content</p>
<p>test content</p>
<p>test content</p>
<p>test content</p>
<p>test content</p>
<p>test content</p>
<p>test content</p>
<p>test content</p>
<p>test content</p>
<p>test content</p>
<p>test content</p>
</div>

Stop Scrolling of page when user comes to end of scrollable fixed element

The sidebar and main content is staying next to each other in the page.
sidebar is fixed with scroll auto
main-content is normal
see this pen http://codepen.io/shmdhussain/pen/QdXmQm
.sidebar{
background:black;
color:white;
position:fixed;
width:20%;
height:100%;
left:0;
overflow:auto;
}
.main{
background:silver;
color:black;
width:80%;
float:right;
}
.main p{
margin-bottom:50px;
}
<div class="cont">
<div class="main">
<p>Main Content</p> <p>Main Content</p> <p>Main Content</p> <p>Main Content</p> <p>Main Content</p> <p>Main Content</p> <p>Main Content</p> <p>Main Content</p> <p>Main Content</p> <p>Main Content</p> <p>Main Content</p> <p>Main Content</p> <p>Main Content</p> <p>Main Content</p> <p>Main Content</p> <p>Main Content</p> <p>Main Content</p> <p>Main Content</p> <p>Main Content</p> <p>Main Content</p> <p>Main Content</p> <p>Main Content</p> <p>Main Content</p> <p>Main Content</p> <p>Main Content</p> <p>Main Content</p> <p>Main Content</p> <p>Main Content</p> <p>Main Content</p> <p>Main Content</p> <p>Main Content</p> <p>Main Content</p> <p>Main Content</p> <p>Main Content</p> <p>Main Content</p> <p>Main Content</p> <p>Main Content</p> <p>Main Content</p> <p>Main Content</p> <p>Main Content</p>
</div>
<div class="sidebar">
<p>sidebar content</p>
<p>sidebar content</p> <p>sidebar content</p> <p>sidebar content</p> <p>sidebar content</p> <p>sidebar content</p> <p>sidebar content</p> <p>sidebar content</p> <p>sidebar content</p> <p>sidebar content</p> <p>sidebar content</p> <p>sidebar content</p> <p>sidebar content</p> <p>sidebar content</p> <p>sidebar content</p> <p>sidebar content</p> <p>sidebar content</p> <p>sidebar content</p> <p>sidebar content</p> <p>sidebar content</p> <p>sidebar content</p> <p>sidebar content</p> <p>sidebar content</p> <p>sidebar content</p> <p>sidebar content</p> <p>sidebar content</p> <p>sidebar content</p> <p>sidebar content</p> <p>sidebar content</p> <p>sidebar content</p> <p>sidebar content</p>
</div>
</div>
Actual Result:
Here when the user scrolls the sidebar and comes to the end of the sidebar, main content content is scrolled when the user scrolls more, entire page is scrolled.
Expected Result:
Here when the user scrolls the sidebar and comes to the end of the sidebar, main content content should not be scrolled.
Is there any way to achieve this?. Thanks in advance for any help.

.sidebar {
background: black;
color: white;
position: fixed;
width: 20%;
height: 100%;
left: 0;
overflow: auto;
}
.main {
position: fixed;
width: 80%;
height: 100%;
left: 20%;
overflow: auto;
background: silver;
color: black;
}
.main p {
margin-bottom: 50px;
}
<div class="cont">
<div class="main">
<p>Main Content</p>
<p>Main Content</p>
<p>Main Content</p>
<p>Main Content</p>
<p>Main Content</p>
<p>Main Content</p>
<p>Main Content</p>
<p>Main Content</p>
<p>Main Content</p>
<p>Main Content</p>
<p>Main Content</p>
<p>Main Content</p>
<p>Main Content</p>
<p>Main Content</p>
<p>Main Content</p>
<p>Main Content</p>
<p>Main Content</p>
<p>Main Content</p>
<p>Main Content</p>
<p>Main Content</p>
<p>Main Content</p>
<p>Main Content</p>
<p>Main Content</p>
<p>Main Content</p>
<p>Main Content</p>
<p>Main Content</p>
<p>Main Content</p>
<p>Main Content</p>
<p>Main Content</p>
<p>Main Content</p>
<p>Main Content</p>
<p>Main Content</p>
<p>Main Content</p>
<p>Main Content</p>
<p>Main Content</p>
<p>Main Content</p>
<p>Main Content</p>
<p>Main Content</p>
<p>Main Content</p>
<p>Main Content</p>
</div>
<div class="sidebar">
<p>sidebar content</p>
<p>sidebar content</p>
<p>sidebar content</p>
<p>sidebar content</p>
<p>sidebar content</p>
<p>sidebar content</p>
<p>sidebar content</p>
<p>sidebar content</p>
<p>sidebar content</p>
<p>sidebar content</p>
<p>sidebar content</p>
<p>sidebar content</p>
<p>sidebar content</p>
<p>sidebar content</p>
<p>sidebar content</p>
<p>sidebar content</p>
<p>sidebar content</p>
<p>sidebar content</p>
<p>sidebar content</p>
<p>sidebar content</p>
<p>sidebar content</p>
<p>sidebar content</p>
<p>sidebar content</p>
<p>sidebar content</p>
<p>sidebar content</p>
<p>sidebar content</p>
<p>sidebar content</p>
<p>sidebar content</p>
<p>sidebar content</p>
<p>sidebar content</p>
<p>sidebar content</p>
</div>
</div>
You need to separate both the divs in order to have their own scrolls.
This CSS should do the trick.
.main{
position:fixed;
width:80%;
height:100%;
left:20%;
overflow:auto;
background:silver;
color:black;
}
Codepen: http://codepen.io/hunzaboy/pen/KajoJG

HTML Content over flowing bootstrap containers

I have a page with some bootstrap wells: http://jsfiddle.net/LmwbkLo6/
<div style="margin:15px;">
<br>
<div class="well">
<div class="col-sm-8">
<h4>Test Title</h4>
<p>Some test text</p>
<p>More text..</p>
</div>
<div class="col-sm-4">
</div>
<p>And Some Text Here
<p>
</div>
</div>
Im having an issue with the content overflowing the parent containers.
For Example, the content here is overflowing the Well div. I can "fix" this by adding class="col-xs-12" to the Well Div, but then the div itself will overflow the outer div.
Does anyone have any Ideas?

You need to wrap your class="col-* divs in <div class="row"></div> or it will not apply the negative margin.

Here is how it should look like.
<div style="margin:15px;">
<br>
<div class="container-fluid">
<div class="row">
<div class="well">
<div class="col-sm-8">
<h4>Test Title</h4>
<p>Some test text</p>
<p>More text..</p>
</div>
<div class="col-sm-4">
</div>
<p>And Some Text Here<p>
<p>And Some Text Here<p>
<p>And Some Text Here<p>
<p>And Some Text Here<p>
</div>
</div>
</div>
</div>

Changing div order at bootstrap

I've an issue at my project. At one of my page, I'm using a markup like this:
<div class="row">
<div class="col-md-6">
<h2>Step 1</h2>
<p>Some text</p>
<p>Some text</p>
<h2>Step 3</h2>
<p>Some text</p>
<p>Some text</p>
</div>
<div class="col-md-6">
<h2>Step 2</h2>
<p>Some text</p>
<p>Some text</p>
</div>
</div>
Fiddle: http://jsfiddle.net/learner73/RW747/
So, it'll look like this at desktop:
But, it looks at mobile like this:
It should be like that as bootstrap's responsive layout. No doubt with that. But, definitely, I need step 1, 2 and 3 in serial (not step 1, 3, 2) at mobile:
This will be generated if I arranged my HTML code like this:
<div class="row">
<div class="col-md-6">
<h2>Step 1</h2>
<p>Some text</p>
<p>Some text</p>
</div>
<div class="col-md-6">
<h2>Step 2</h2>
<p>Some text</p>
<p>Some text</p>
</div>
</div>
<div class="row">
<div class="col-md-6">
<h2>Step 3</h2>
<p>Some text</p>
<p>Some text</p>
</div>
<div class="col-md-6">
</div>
</div>
Fiddle: http://jsfiddle.net/learner73/gLjG4/
Now, at mobile, it looks perfect. But, at problem is at the desktop, if the height of "step 2" content is high, it push the "step 3" content below much:
But, it should be like my first image.
Have bootstrap classes or event to handle scenario like this? If not how can I handle this issue properly? Thanks in advance.

Try offsett or column ordering classes.
Now i've tested column responsive reset, it works for your intent
<div class="row">
<div class="col-md-6">
<h2>Step 1</h2>
<p>Some text</p>
<p>Some text</p>
<p>Some text</p>
<p>Some text</p>
<p>Some text</p>
</div>
<div class="col-md-6">
<h2>Step 2</h2>
<p>Some text</p>
<p>Some text</p>
</div>
<!-- reset -->
<div class="clearfix visible-md"></div>
<!-- reset -->
<div class="col-md-6">
<h2>Step 3</h2>
<p>Some text</p>
<p>Some text</p>
</div>
</div>
here the fiddle http://jsfiddle.net/keypaul/9nh86/

You can style it better, but here is an approach using jQuery
Basically, I've splited it into independent divs named "one", "two" and "three", and used this:
$(window).resize(function() {
winWidth = $(window).width();
winHeight = $(window).height();
if(winWidth <= 986) {
$("#two").insertBefore("#three");
} else {
$("#three").insertBefore("#two");
}
});
http://jsfiddle.net/XF6Uq/3/
Here you have another approach. Instead of using insertBefore, I'm using classes.
Basicaly, you float left every div, but the "Step 2" one, you change it to float right when it's "desktop wide"
http://jsfiddle.net/hige/3TPec/
Hope it helps!

Bootstrap - navbar-fixed-top inside another div

I have a div with width:500px and height:300px in the middle of a page.
I want inside this div to have my navbar-fixed-top.
Can you please correct my html/css to accomplish that?
Thanks
http://jsfiddle.net/MgcDU/7874/
<div class="container" style="width:500px;height:300px;border:solid black 1px;overflow:scroll">
<div class="row">
<nav class="navbar navbar-default navbar-fixed-top" role="navigation">
<div class="navbar-inner" style="padding:10px">
<div class="btn-group">
<button type="button" class="btn btn-default dropdown-toggle" style="height:70px;" data-toggle="dropdown">
<div class="icon-some"></div>Dropdown <span class="caret"></span>
</button>
<ul class="dropdown-menu">
<li>Dropdown link
</li>
<li>Dropdown link
</li>
</ul>
</div>
</div>
</nav>
</div>
<div id="wrapper">
<div id="content">
<p>some content</p>
<p>some content</p>
<p>some content</p>
<p>some content</p>
<p>some content</p>
<p>some content</p>
<p>some content</p>
<p>some content</p>
<p>some content</p>
<p>some content</p>
<p>some content</p>
<p>some content</p>
<p>some content</p>
<p>some content</p>
<p>some content</p>
<p>some content</p>
<p>some content</p>
<p>some content</p>
<p>some content</p>
<p>some content</p>
<p>some content</p>
<p>some content</p>
<p>some content</p>
<p>some content</p>
<p>some content</p>
<p>some content</p>
<p>some content</p>
<p>some content</p>
<p>some content</p>
<p>some content</p>
<p>some content</p>
<p>some content</p>
<p>some content</p>
</div>
<div id="padding-bottom"></div>
</div>
</div>

Based on what you said you want the nav bar with the class navbar-fixed-top to be inside the div, it seems simple enough.
All I did was add a position:relative to the css file for the .navbar class
.navbar{
position:relative;
}
Here is it working
http://jsfiddle.net/tKCm6/
Now if you wanted the nav to stay fixed in the div as you scroll down the page thats a different story.
Here is the code for that
.container{
position:absolute;
}
.navbar{
position:fixed;
width:500px;
}
and live
http://jsfiddle.net/vARTv/