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
Related
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.
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>
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>
Is it possible to pad Twitter Bootstrap columns without breaking the grid? I'm building a design that is centred around 'boxes'.
I have done a fiddle of 3 examples: http://jsfiddle.net/w7zS3/1/
<div class="row">
<div class="col-xs-4 box">content...</div>
<div class="col-xs-4 box">content...</div>
<div class="col-xs-4 box">content...</div>
</div>
<hr>
<div class="row">
<div class="col-xs-4">
<div class="box">content...</div>
</div>
<div class="col-xs-4">
<div class="box">content...</div>
</div>
<div class="col-xs-4">
<div class="box">content...</div>
</div>
</div>
<hr>
<div class="row">
<div class="col-xs-4">
<div class="box-padded">content...</div>
</div>
<div class="col-xs-4">
<div class="box-padded">content...</div>
</div>
<div class="col-xs-4">
<div class="box-padded">content...</div>
</div>
</div>
<hr>
<div class="row box">
<div class="col-xs-6">
header: logo
</div>
<div class="col-xs-6">
header: ad banner
</div>
</div>
</div>
The first is the most semantic but adding a background colour bleeds into the padding creating the illusion of one 'box'.
Throwing another div in there with a background works well, but the text touches the edge of the box which doesn't look very nice.
On the third example i've padded the div and whilst it works it technically breaks Twitter Bootstraps design pattern... if i was to say, nest a grid it wouldn't work due to the padding up taking up space.
This also causes problems on boxes where i don't need padding (4th example on the fiddle) for instance: i'm adding a header in the first 6 columns and a banner ad in the other 6 columns.. but i want the whole header section to be in the same background color (ie.. no space between grids)... I can't add padding as it will break the grid and adding a background colour bleeds into the padding and look wider than the rest of my padded grids. (hope this bit makes sense)
Is there a correct way to get around this?
I typically use columns within columns to provide an effect similar to padding.
Instead of
<div class="col-xs-4">
<div class="box">content...</div>
</div>
Try this:
<div class="col-xs-4">
<div class="box row">
<div class="col-xs-1"></div>
<div class="col-xs-10">content</div>
<div class="col-xs-1"></div>
</div>
</div>
See the change in your second row: http://jsfiddle.net/w7zS3/3/
(I modified the background color to red to make it easier to see the difference between the background and the boxes)
In the code below the span #2 appears below span #1, despite the fact that the number of columns is the same as in the parent span (10). This is because of the border on the nested row (class="row well").
Is there an elegant way to apply border to the nested row without pushing the contents down.
I suppose applying top/left/bottom/right borders on the nested spans depending on their location and applying box-sizing: border-box would help, but then there will be problems when reducing the width of the browser and also this would be an ugly solution.
<div class="row">
<div class="span2"> left menu </div>
<div class="span10">
<div class="row well">
<div class="span5" style="background-color: #aca">
#1
</div>
<div class="span5" style="background-color: #aac">
#2
</div>
</div>
</div>
</div>
dont put the well on the row, make it its own container..
<div class="row">
<div class="span2"> left menu </div>
<div class="span10">
<div class="well">
<div class="row-fluid">
<div class="span6" style="background-color: #aca">
#1
</div>
<div class="span6" style="background-color: #aac">
#2
</div>
</div>
</div>
</div>
</div>
I replaced the class="row" with class="row-fluid" because the "row" class uses strict widths, while the "row-fluid" class uses percentages and will keep the "span6" classes side by side even though there's extra padding and borders added to its parent.