I recently made a website where I needed 6 columns with the y overflow visible. I couldn't make a clean 6 divisions. The width needed to be wider to adjust for the 6 scrollbars and a bit of padding.
Is there a better way than my attempt?
<div class="col">
<div class="section">
Content that overflows this section.
</div>
</div>
.col {
width: 15.2%;
padding-right: 15px;
float: left;
}
.section {
overflow-y: scroll;
width: 100%;
}
It's very sloppy and the columns don't reach the far right edge.
I don't know jquery well enough to attempt but will like take any advice.
****** I worked it out, so silly. You need to use % for everything including padding. Duh ******* Sorry for wasting anyones time!
I would say that it is better to set padding for the inner div .section, so there will be no need to adjust .col width.
Try this HTML code:
<div id="grid">
<div class="col">
<div class="section">
Content that overflows this section.
</div>
</div>
<div class="col">
<div class="section">
Content that overflows this section.
</div>
</div>
<div class="col">
<div class="section">
Content that overflows this section.
</div>
</div>
<div class="col">
<div class="section">
Content that overflows this section.
</div>
</div>
<div class="col">
<div class="section">
Content that overflows this section.
</div>
</div>
<div class="col">
<div class="section">
Content that overflows this section.
</div>
</div>
</div>
With this CSS:
#grid {
margin-left: -15px;
}
.col {
width: 16.6%;
float: left;
}
.section {
overflow-y: scroll;
margin-left: 15px;
height: 100px;
background: green;
}
Please note that #grid { margin-left: -15px; } will help you get rid of unnecessary white space before first column
take a look at Live demo
Related
So, I am creating a grid system based on flexbox and everything is going quite swimmingly. The basics of my grid are:
<div class="row">
<div class="column"><p>Column</p></div>
<div class="column"><p>Column</p></div>
<div class="column"><p>Column</p></div>
</div>
And in my css:
.row {
margin: 10px 0;
display: flex;
flex-wrap: wrap;
}
.column {
padding: 10px;
flex: 1 1 0%;
}
Essentially, this makes the columns quite fluid, and they shrink/grow to fill all available space. This is great for me as I need to use this throughout various projects where I can't quite customize the grid for every single one. However, I have run into a small "issue". I was going to create a class called ".collapse" so I could collapse the left/right padding to have some columns fit right next together (for example: If I wanted a div with a background color (by adding a color class to the column=> .column .green) flush to an image in the next column). However, the spacing is all out of wack compared to row/columns above it.
<div class="row">
<div class="column purple collapse"><p>Column</p></div>
<div class="column red collapse"><p>Column</p></div>
<div class="column purple collapse"><p>Column</p></div>
<div class="column red collapse"><p>Column</p></div>
</div>
example screenshot here
As you can see in my little example mockup, they do kinda line up, but the right and left margins have "decreased". Is there any smart way around this? I tried adding "left/right margins" to the first-of-type and last-of-type, but this just gets a bit hacky as then anything added in between start having odd alignment issues.
For this kind of grid system, you usually would discourage using structural styling on the grid cells directly, and it lets you do something like this:
.row {
display: flex;
flex-flow: row wrap;
list-style: none;
padding: 0;
margin-left: -10px;
}
.column {
flex: 1 0 0;
padding-left: 10px;
}
.collapse { margin-left: 0; }
.collapse > .column { padding-left: 0; }
.red,
.purple {
padding: 10px;
margin-bottom: 10px;
}
.red { background-color: red; }
.purple { background-color: purple; }
<div class="row">
<div class="column">
<div class="purple">
<p>Column</p>
</div>
</div>
<div class="column">
<div class="red">
<p>Column</p>
</div>
</div>
<div class="column">
<div class="purple">
<p>Column</p>
</div>
</div>
<div class="column">
<div class="red">
<p>Column</p>
</div>
</div>
</div>
<div class="row collapse">
<div class="column">
<div class="purple">
<p>Column</p>
</div>
</div>
<div class="column">
<div class="red">
<p>Column</p>
</div>
</div>
<div class="column">
<div class="purple">
<p>Column</p>
</div>
</div>
<div class="column">
<div class="red">
<p>Column</p>
</div>
</div>
</div>
This approach uses no margins on the outer ends, which I find way more convenient.
It's worth noting that this kind os system is not all that useful anymore, with the advent of CSS Grid Layout, but there you have it.
On a side note, 0 is always 0, and it never needs a unit.
Am I missing something on this? I feel like I have looked through their site documentation a handful of times and have not found anything on footers.
I am just looking to have a regular inverse color footer that will stick to the very bottom of the screen even if there is nothing to keep it there. When there is content that is longer than the screen's height it will push it down to the bottom still.
Right now I have this:
<div class="navbar navbar-inverse navbar-fixed-bottom">
<div class="navbar-inner">
<div class="container">
<span>testing</span>
</div>
</div>
</div>
but every time the screen resolution goes under 980px the footer jumps to the very top of the screen. I haven't worked with bootstrap very much and this seems like something that they should have accounted for and that I am probably missing something critical here. Would anyone be able to explain the reasoning for this?
You can achieve the sticky footer in Bootstrap 3 with this:
CSS
html {
position: relative;
min-height: 100%;
}
body {
/* Margin bottom by footer height */
margin-bottom: 60px;
}
.footer {
position: absolute;
bottom: 0;
width: 100%;
/* Set the fixed height of the footer here */
height: 60px;
background-color: #f5f5f5;
}
HTML
<div class="container">
<div class="page-header">
<h1>Sticky footer</h1>
</div>
<p class="lead">Pin a fixed-height footer to the bottom of the viewport in desktop browsers with this custom HTML and CSS.</p>
<p>Use the sticky footer with a fixed navbar if need be, too.</p>
</div>
<footer class="footer">
<div class="container">
<p class="text-muted">Place sticky footer content here.</p>
</div>
</footer>
DEMO HERE
This works for me in Bootstrap 3.3.1
<div class="container">
[...]
</div>
<footer class="footer">
<div class="container">
<p class="text-muted">my footer</p>
</div>
</footer>
make sure the footer tag is outside the container div
you need the sticky-footer.css too which is here
Edit:
To do what you're asking in the comments, have you tried this?:
<footer class="footer">
<div class="navbar navbar-inverse navbar-fixed-bottom">
<div class="navbar-inner">
<div class="container">
<span>testing</span>
</div>
</div>
</div>
</footer>
Also you need to tweak the css class for .footer:
.footer {
position: absolute;
bottom: 0;
width: 100%;
/* height: 60px; */
background-color: #f5f5f5;
}
I've been searching for similar questions to these, but I couldn't find one, so I'm exposing my problem, hoping you could tell me what am I doing wrong and how to correct it.
I'm trying the accomplish the following scenario: two divs, side by side, using 100% of height and width, in which the left one can be scrollable. The right one has a few divs on top of each other, and the last one should have its contents scrollable too.
A picture can better describe the scenario:
The blue divs are the ones that can be scrollable, but the height of red ones is unknown.
I was able to partially accomplish this, but the problem is that the content of the last div is pulled down from the view in the same proportion as the height sum of the red divs, so when the user scrolls that blue div he won't be able to view the full content of it.
What can I do to solve this?
I also got a fiddle where this behavior can be reproduced: http://jsfiddle.net/d3dNG/3/
Thanks for any feedback on this.
HTML:
<div class="container">
<div id="left">
Left (first)<br />
[...]Left<br />
Left (last)<br />
</div>
<div id="right">
<div id="header1">Header 1</div>
<div id="header1">Header 2</div>
<div id="header1">Header 3</div>
<div id="rightContent">
Right (first)<br />
Right<br />
[...]
Right (last)<br />
</div>
</div>
</div>
CSS:
html, body {
margin: 0;
padding: 0;
height: 100%;
width: 100%;
overflow: hidden;
}
.container {
height: 100%;
width: 100%;
background: pink;
}
#left {
float: left;
width: 100px;
height: 100%;
overflow-y: auto;
background: gold;
}
#right {
height: 100%;
width: 100%;
}
#rightContent {
height: 100%;
overflow-y: auto;
background: lime;
}
Since you will not know what the size of #header1 you can go about this by using javascript or jQuery.
(Make sure to only use ids once on your page since they are unique, #header1 is used 3 times)
The html I changed:
<div class="headParent">
<div class="header1">Header 1</div>
<div class="header1">Header 2</div>
<div class="header1">Header 3</div>
</div>
The little jQuery I wrote:
function rightSize() {
var hH = $('.headParent').height(), // grabs the `#header1`'s parents height
mH = $('#rightContent').height() - hH; // minus the height from the `#rightContent`
$('#rightContent').css({height: mH});
}
rightSize();
Finally, a fiddle: Demo
Even once there is more of the .header1 the #rightContent will still adapt correctly to fit the content.
Try this:
HTML
<div class="container">
<div id="left">
Left (first)<br />
[...]Left<br />
Left (last)<br />
</div>
<div id="rightOne">
<div id="header1">Header 1</div>
<div id="header1">Header 2</div>
<div id="header1">Header 3</div>
</div>
<div id="rightTwo">
<div id="rightContent">
Right (first)<br />
Right<br />
[...]
Right (last)<br />
</div>
</div>
</div>
CSS
#rightOne {
height: 16%;
width: 100%;
}
#rightTwo {
height: 84%;
width: 100%;
}
I've updated your fiddle: http://jsfiddle.net/d3dNG/4/
I found an answer here that addresses what I need to do, but it doesn't seem to work perfectly for me. I have sidebar divs floated left and right. I want to stick a div in the middle and fill the space. The technique in that answer works for the left div, but it pushes the right div down to the next line. I threw up a quick demo on CodePen to show the problem.
Can anyone suggest a way to fix this so that all the divs are on the same line?
Update: I realize I could do this easily using percentages for all the div widths, but I really need to maintain static widths for the sidebars.
One way to do this would be changing the order of your HTML (placing the right sidebar before the left)
<div class="page-grid">
<div class="sidebar right">
<div>Right Widget 1</div>
<div>Right Widget 2</div>
</div>
<div class="sidebar left">
<div>Widget 1</div>
<div>Widget 2</div>
</div>
<div id="content">Content area</div>
</div>
http://codepen.io/anon/pen/kHmjd
This is using an example from Dynamic Drive's CSS Layouts
I like this one, especially because it preserves the order of the content semantically. Main content is delivered first, followed by both side columns.
HTML
<div class="page-grid">
<div id="contentwrapper">
<div id="content">Content area</div>
</div>
<div class="sidebar left">
<div>Widget 1</div>
<div>Widget 2</div>
</div>
<div class="sidebar right">
<div>Right Widget 1</div>
<div>Right Widget 2</div>
</div>
</div>
CSS
#contentwrapper {
float: left;
width: 100%;
}
#content {
margin: 0 15em;
}
.sidebar {
float: left;
width: 15em;
}
.sidebar.left {
margin-left: -100%;
}
.sidebar.right {
margin-left: -15em;
}
I am trying to figure out how to create 3 divs and have them lineup in the same row.
Having 1st and 3rd one fixed width at 100px and have the 2nd (middle) one audo adjust its width in case of browser resize.
<div>
<div id="d1"> content 1</div>
<div id="d2"> content 2</div>
<div id="d3"> content 3</div>
</div>
thanks,
You have tp use floats to align the left and right frame. But for this you have to reorder the divs as shown below, and set the margins for the middle div.
<style type="text/css">
#d1 {
float: left;
}
#d2 {
float: right;
}
#d3 {
margin-left: 100px;
margin-right: 100px;
}
</style>
<div>
<div id="d1"> content 1</div>
<div id="d2"> content 2</div>
<div id="d3"> content 3</div>
</div>
Edit
Thanks to Leniel Macaferi for pointing out an error. The correct order of the divs has to be floating divs first, then non floating divs. Therefore I corrected the code (exchanged div d2 and div d3).
http://matthewjamestaylor.com/blog/ultimate-3-column-holy-grail-pixels.htm
Strike that, many extra divs to ensure all columns are equal height. This may be what you're looking for. All explained in this excellent article: http://www.alistapart.com/articles/holygrail
Div is a block-level element, so its a nice option to handle with the help of its Display Property.
<div id="d1" style="display:inline-block; width:100px;">content1</div>
<div id="d2" style="display:inline">content2</div>
<div id="d3" style="display:inline-block; width:100px;">content3</div>
Just putting this out there as a modern, clean solution: use calc.
Fiddle: http://jsfiddle.net/bg7KS/
#d2 {
width: 200px; /* fallback older browsers */
width: -webkit-calc(100% - 200px);
width: -moz-calc(100% - 200px);
width: calc(100% - 200px);
}
nvm this is old, i was gonna post what worked for me
<style type="text/css">
#d1 {
float: left;
margin-left: 50px;
}
#d2 {
float: center;
margin-right: 5px;
}
#d3 {
float: left;
margin-right: 5px;
}
</style>
<div>
<div id="d1"> content 1</div>
<div id="d3"> content 3</div>
<div id="d2"> content 2</div>
</div>