CSS table have one row have overflow - html

I need a CSS design that has three rows and fills the entire screen. The second row has three columns. Each column has three sections (top,middle,bottom). I want the last section, if it is too big, to have a scroll bar so the content doesn't flow off the page.
I have attempted this for a while but my main problem is the section I want to overflow doesn't make the scroll box, it just flows off the page. Is there a way to do this? maybe using display:flex?
Here is the basic concept of my code:
<div class="table">
<div class="header">
Header content here
</div>
<div class="content table-row">
<div class="table-col">
<div class="top-content">
</div>
<div class="middle-contnet">
</div>
<div class="bottom-contnet">
If this content is too big, then make this div an overflow-y:scroll
</div>
</div>
<div class="table-col">
<div class="top-content">
</div>
<div class="middle-contnet">
</div>
<div class="bottom-contnet">
If this content is too big, then make this div an overflow-y:scroll
</div>
</div>
<div class="table-col">
<div class="top-content">
</div>
<div class="middle-contnet">
</div>
<div class="bottom-contnet">
If this content is too big, then make this div an overflow-y:scroll
</div>
</div>
</div>
<div class="footer">
Footer content here
</div>
</div>
If you can help, please do.

Have you tried adding an additional class to the row so you can have a overflow class and apply it to only the specific row?
.overflow: overflow-y: scroll;
<div class="bottom-contnet overflow">
If this content is too big, then make this div an overflow-y:scroll
</div>

Related

Bootstrap - Divs stack up on eachother

If you make the screen smaller (in width) the divs on the bottom (under 'My work') stack up on each other. I was wondering how to fix this?
See jsfiddle: https://jsfiddle.net/sxnmyjtk/
html:
<div class="tiles">
<div class="container-fluid">
<div class="row">
<div class="col-md-3">
<div class="servatius">
<p>Servatius</p>
</div>
</div>
<div class="col-md-3">
<div class="levy">
<p>Levy Consult</p>
</div>
</div>
<div class="col-md-3">
<div class="skinprove">
<p>Skinprove</p>
</div>
</div>
<div class="col-md-3">
<div class="mumc">
<p>MUMC+</p>
</div>
</div>
</div>
</div>
</div>
see jsfiddle for css
They are stacking on top of each other because you are using position absolute in your CSS. If you remove this they will then stack vertically when the width is reduced.
If you want the divs to remain side by side you can also consider using col-xs-3 instead of col-md-3.
You can add other bootstrap classes or CSS depending on what results you are tying to achieve when width is reduced.

Bootstrap data-affix/position-fixed col overlapping other col

I'm having an issue with my bootstrap website. I have my site setup like so:
<div class="container">
<div class="row">
<div class="col-md-9" style="text-align:left;padding-top: 2%">
Some content
</div>
<div class="col-md-3" style="position:fixed">
Scrolling Sidebar
</div>
</div>
</div>
I have been trying to wrap my head around why the side bar is floated all the way to the left and is a col-3 but with a larger container so it's much larger on my screen. Has anyone seen something like this before?
The reason why there is overlapping conent is that when you make something position:fixed - it takes it out of the page flow and the remaining contents take its place. You need to explicitly set the width when it is fixed. In the following i am using a class "is-fixed" to set the fixe position styling.
<div class="container">
<div class="row">
<div class="col-md-9" style="text-align:left;padding-top: 2%">
Some content
</div>
<div class="col-md-3 is-fixed">
Scrolling Sidebar
</div>
</div>
</div>
//css style for element that is fixed
.is-fixed {
position:fixed;
top:0;
right:0;
width:200px; // or whatever
}

How to create left and right side inside container?

What i have is sidebar and on right side i have content. What i want is that both sides are in container but that are both full width . This is my demo: https://jsfiddle.net/DTcHh/19067/
So i want that left background color start from beging of page but text inside is in container and also i want that background color of right content go to the end of page but text is in container. Any suggestion?
<div class="container">
<div class="col-md-3">
<div class="left_sidebar">
menu
</div>
</div>
<div class="col-md-9">
<div class="right-content">
content
</div>
</div>
</div>
Its simple, wrap the colored containers above the container class and use two different containers:
<div class="left_sidebar">
<div class="container">
<div class="col-md-3">
menu
</div>
</div>
</div>
<div class="right-content">
<div class="container">
<div class="col-md-9">
content
</div>
</div>
</div>
Here is a working Fiddle
REMOVED other edits because EDIT 3 should do the trick best
EDIT 3
Here it is, that must be it for sure now. The trick is done with a linear gradientand a custom container above your bootstrap container.
See Fiddle
What you're asking, is by default impossible, since the .container class has a set width on different viewports and it is also horizontally "centerised" by margin:auto.
To achieve what you are trying you will have to follow a different "logic".
I would propose something like this:
<div class="left-sidebar col-md-3">
<div class="sidebar-menu col-xs-6 pull-right">
menu
</div>
</div>
<div class="right-content col-md-9>
<div class="content-text col-xs-10>
content
</div>
</div>
I propse this solution in order to stay in the same "flow" as your code. You could also, just play with paddings, which makes more sense.
use class row before col div
<div class="row">
<div class="col-md6"></div>
<div class="col-md-6"><div>
</div>

Make side blocks stay on the same level when scrolling down

I need to have this layout:
And when you scroll down, red blocks should stay on the same level as green block:
I have tried to use grid to fix this problem:
(plunker)
<div class="row md-padding">
<div class="col-xs-3" style="background-color:red">
<div>
<h3>Red</h3>
</div>
</div>
<div class="col-xs-5" style="margin-left:10px;margin-right:10px; background-color:green;">
<div class="row">
<h3 class="text-center">Green</h3>
</div>
</div>
<div class="col-xs-3" style="background-color:red">
<div>
<h3>Red</h3>
</div>
</div>
</div>
It did put red blocks where they should be, but when you scroll down, they are no longer visible.
How can I make red blocks stay on the same level? (as described on img2)
you're looking for
position:fixed;
updated plunkr

html layout issue : how to achieve this layout?

I have three column layout. In the third column I have two divs. First div is fixed. Second div is having minimum height of 50px. when the text content inside second div increases then its height should increase to a point where it reaches the bottom of third column and then it should show scrollbars.
So far I have applied my effort here:http://jsfiddle.net/Q2Ata/1/
I have tried to achieve this layout but when I add more text inside then the main table's height also inceases. This issue can be found in this fiddle.
http://jsfiddle.net/Q2Ata/2/
HTML code:
<div class="table">
<div class="table-cell">
<div class="column">Column 1</div>
</div>
<div class="table-cell">
<div class="column">Column 2</div>
</div>
<div class="table-cell">
<div class="column">
<div class="container">
<div class="header">
<div class="table-cell">Header</div>
</div>
<div class="content">
<div class="abc">
text content here ...
</div>
</div>
</div>
</div>
</div>
</div>
CSS Code:
.table {display:table;width:100%;height:200px;max-height:200px;table-layout:fixed}
.table-cell{display:table-cell;padding:10px;vertical-align:top}
.column{border:1px solid #000;height:100%}
.container{display:table;width:100%}
.header, .content{display:table-row}
{display:table-row}
.container .table-cell{border:1px solid #F00}
.abc{min-height:50px;padding:10px;border:1px solid #000;height:auto;overflow-y:auto}
You need to set a max-height on your element in order to have the overflow: auto working and you will have scroll bars when the maximum height has been reached.
http://jsfiddle.net/Q2Ata/4/