I have a basic layout with 2 columns and a footer that behaves according to the height of which column is longer.
<div id="holder">
<nav class="navbar navbar-default navbar-fixed-top"></nav>
<div class="container">
<div class="row">
<div class="left col-md-8">
Extends with content
</div>
<div class="right col-md-4">
Extends with content
</div>
</div>
</div>
<div class="footer">
Relative behaviour when the content of either columns is long enough. Sticks to the bottom when there is not enough content.
</div>
Full code with CSS: http://jsfiddle.net/TNRqL/
What would be an elegant solution to make the columns with the same heights, but that also stick to the footer?
Such as: http://jsfiddle.net/xJ6Cv/ (I used min-height on left and right columns)
I found in another question a solution to make columns of the same heights regardless of which one is longer, but it doesn't make them stick to the footer.
.row {
overflow: hidden;
}
[class*="col-"] {
margin-bottom: -99999px;
padding-bottom: 99999px;
}
If you're OK with around 80% browser support, then you can do this elegantly with the Flexbox CSS3 module. You define the overall page to have a minimum height, and then mark your columns as "flexing" to fill the available space. There's a demo here, though due to the nesting of your elements it won't be quite as simple.
Related
Hi I feel dumb for asking the following but im at a loss. I am trying to create the following layout for a website but have not been able to create exactly what I want. I know it should be very simple to do but I'm a developer not a UI / UX wizard.
So im looking to have a side bar on the left with menu items, a top nav (fixed to the top of the page) and a footer fixed to the bottom of the page with the main body of the site scrolling within the area left between the top nav and footer.
There are also pages where I would like the content in the main body to be vertically and horizontally aligned (form input)
Ideally im looking to use bootstrap 5.2 but am not against using css grids or whatever magical methods there may be to get to what im looking to do. I'm also looking to try and make this all responsive hence starting to use Bootstrap I didn't want to have to implement my own media queries to do it.
Thanks in advance for any help or suggestions, I have been hitting my head against a brick wall with this for far too long and thought I would reach out and see if anyone was able to help.
You have two distinct columns, (1) sidebar and (2) everything else.
Within the main row, we can form the two columns: col-2 and col-10, with the first acting as our sidebar and the other acting as our main column.
In the main column, we add a row and then add to it the nav, main content and footers.
<div class="container-fluid h-100">
<div class="row h-100">
<div class="col-2 bg-dark text-light">
sidebar
</div>
<div class="col-10 bg-light">
<div class="row h-100">
<div class="col-12 bg-primary nav">
nav
</div>
<div class="col-12 main">
<p>1</p>
<div style="height: 5000px;">a</div>
<p>2</p>
</div>
<div class="col-12 bg-primary footer">
footer
</div>
</div>
</div>
</div>
</div>
In the CSS we set the height for the nav and footer, and then use calc() to measure the height our main content should be and set the overflow to scroll to get the scrollbar if the content is larger than the height.
.nav {
height: 60px;
}
.main {
height: calc(100vh - 120px);
background: #f1f1f1;
overflow: scroll;
}
.footer {
height: 60px;
}
I'm using the Bootstrap 3 grid to hide/show nav bar content based on whether or not the user is using an extra small device.
I'm using .hidden-xs and .visible-xs classes. These classes appropriately hide/show the content, but I'm running into two problems:
(1) Hiding the content also shrinks the column spacing by .col-xs-5 because the div is hidden. I tried adding .visible-xs to a subsequent div and using .col-xs-5 to make up the empty space. This works, but only if I place content inside the divs. I just want the columns to be spaced out.
(2) On XS view size, the final item on the Nav bar "Nav" jumps to the next row. I have only accounted for 12 total columns.
See this JSFiddle. I'm trying to nly show "Welcome" on large view and show nothing on XS view.
I here's an idea, you can try instead of adding content. This CSS trick uses :before and :after CSS pseudo-classes.
.no_content {
display: block;
content: "";
width: 151px;
height: 35px;
background: transparent url(tape.png) 0 0 no-repeat;
}
<div class="no_content"></div>
I would look at the grid system further. I believe there is an offset that you can use to offset the div like this:
<div class="row">
<div class="col-xs-5 col-xs-offset-5></div>
<div class="col-xs-2></div>
</div>
Use the pull-right bootstrap class instead of trying to make empty div's fill in the space.
Completely remove the div you added in item (1) to "make up the space". On the div containing "Nav" set the class as pull-right col-xs-1. So the code from your JSFiddle becomes:
<div class="container">
<div class="row" id="header">
<div class="col-xs-5" id="brand-wrapper">
<div class="brand">Brand</div>
</div>
<!-- Hidden on XS Devices -->
<div class="hidden-xs col-xs-5">
<p>
Welcome
</p>
</div>
<!-- Nav -->
<div class="pull-right col-xs-1" id="toggle-wrapper">
<p>Nav</p>
</div>
</div>
</div>
I want to create little panels/dashboard for my interface. In my case I want to have two panels like so
+-------------------------------+ +-------------------------------+
| | | |
| | | |
+-------------------------------+ +-------------------------------+
Generally it is easy with Bootstrap 3.
<div class="row">
<div class="col-md-5">
</div>
<div class="col-md-5 pull-right">
</div>
</div>
The problem is, the gap of col-md-2, as it is the case here, is way too big. I cannot use a col-md-1 gap, because then both sides do not have an equal size.
I also tried to add padding right and left, but that had not effect, too. What can I do here?
You could add a class which modifies the width of col-md-6. The width of this class is set to 50%. A smaller gap is achieved by reducing the width like so:
.dashboard-panel-6 {
width: 45%;
}
Add this to your div elements. This way the width rule of col-md-6 gets overriden.
<div class="row">
<div class="col-md-6 dashboard-panel-6">...</div>
<div class="col-md-6 dashboard-panel-6">...</div>
</div>
You can use another div inside and give padding to that.
<div class="row">
<div class="col-md-6">
<div class="inner-div">
</div>
</div>
<div class="col-md-6 pull-right">
<div class="inner-div">
</div>
</div>
</div>
.inner-div{
padding: 5px;
}
I posted this here already but it is still relevant the original question.
I have had similar issues with space between columns. The root problem is that columns in bootstrap 3 and 4 use padding instead of margin. So background colors for two adjacent columns touch each other.
I found a solution that fit our problem and will most likely work for most people trying to space columns and maintain the same gutter widths as the rest of the grid system.
This was the end result we were going for
Having the gap with a drop shadow between columns was problematic. We did not want extra space between columns. We just wanted the gutters to be "transparent" so the background color of the site would appear between two white columns.
this is the markup for the two columns
<div class="row">
<div class="col-sm-7">
<div class="raised-block">
<h3>Facebook</h3>
</div>
</div>
<div class="col-sm-5">
<div class="raised-block">
<h3>Tweets</h3>
</div>
</div>
</div>
CSS
.raised-block {
background-color: #fff;
margin-bottom: 10px;
margin-left: 0;
margin-right: -0.625rem; // for us 0.625rem == 10px
padding-left: 0.625rem;
padding-right: 0.625rem;
}
#media (max-width: 33.9em){ // this is for our mobile layout where columns stack
.raised-block {
margin-left: -0.625rem;
}
}
.row [class^="col-"]:first-child>.raised-block {
// this is so the first column has no margin so it will not be "indented"
margin-left: -0.625rem;
}
This approach does require an inner div with negative margins just like the "row" class bootstrap uses. And this div, we called it "raised-block", must be the direct sibling of a column
This way you still get proper padding inside your columns. I have seen solutions that appear to work by creating space, but unfortunately the columns they create have extra padding on either side of the row so it ends up making the row thinner that the grid layout was designed for. If you look at the image for the desired look, this would mean the two columns together would be smaller than the one larger one on top which breaks the natural structure of the grid.
The major drawback to this approach is that it requires extra markup wrapping the content of each columns. For us this works because only specific columns needed space between them to achieve the desired look.
Hope this helps
Here's another possibility:
Live view
Edit view
You will see that it uses 2 col-md-6, each with a nested col-md-11, and you position the nested row in the second div to the right.
The suggestion from Ken has clean HTML which I like. If your left and right panels use elements with widths defined by Bootstrap though (eg wells or form elements) the column padding could cause hassles and break the layout. This nested approach might be easier in this situation.
HTML
<div class="container">
<div class="row">
<div class="col-md-6">
<div class="row">
<div class="col-md-11">nested row col-md-11</div>
</div><!-- end nested row -->
</div>
<div class="col-md-6">
<div class="row">
<div class="col-md-11 col-md-offset-1">nested row col-md-11</div>
</div><!-- end nested row -->
</div>
</div>
</div>
Good luck!
I'm using foundation 3 to build a responsive website but I want to have the Footer and Navigation background width to occupy the entire width? I have named my rows as
class="row navigation"
class="row footer"
I tried looking for how to fix this but I'm out of options. I'm assuming it is a small fix in the foundation.css file but it's a bit too overwhelming at the moment as I'm new to it.
Any poiinters much appreciated.
I ran into the same problem yesterday. The trick is, for full width spanning blocks, you just keep them out of the row/column structure, since row/column will always apply the default padding. Keep your footers and headers on their own, and use row/column inside them.
<header>
This will span the full width of the page
</header>
<div class="row">
<div class="twelve columns">
This text will flow within all typical padding and margins
</div>
</div>
<footer>
This will span the full width of the page
<div class="row">
<div class="twelve columns">
This text will flow within all typical padding and margins
</div>
</div>
</footer>
What I have been doing is to add a custom class so that I can chain it with .row and override the max-width setting.
<div class="row full-width"></div>
.row.full-width {
width: 100%;
max-width: 100%;
}
I put width in here too to cover bases, but it is already declared in foundation.css so you can just omit it.
If you're using Zurb Foundation Framework, simply remove the row class and wrap the element in a class container that is 100% width. Now you probably want to center the stuff, use class centered like this:
<div class="container navigation">
<div class="centered">
Some navigation stuff
</div>
</div>
I completely disagree with the answer. You shouldn't have to use !important
Please refer to my article and demo at http://edcharbeneau.github.com/FoundationSinglePageRWD/
You should be able to get what you need from there. The demo is for 2.2 but is very similar in function to v3.
Foundation 6 supports this feature naturally with row expanded. code example:
<div class="expanded row">
...
</div>
Read more here: http://foundation.zurb.com/sites/docs/grid.html#fluid-row
Use "Section" as in:
<section>
<div class="row">
<div class="small-12 columns">
</div>
</div>
</section>
Then, assign an ID to the section and use that for your background.
This is in regards to Foundation 5. None of the answers given so far, provide edge-to-edge, full widths. That's because inner .columns add padding.
For a true edge-to-edge, full width content, add this to your CSS.
.row.full { width: 100%; max-width: 100%; }
.row.full>.column:first-child,
.row.full>.columns:first-child { padding-left: 0; }
.row.full>.column:last-child,
.row.full>.columns:last-child { padding-right: 0; }
Simply add .full class to a .row you wish to extend full width.
<div class="row full">
<div class="medium-6 column">This column touches Left edge.</div>
<div class="medium-6 column">This column touches Right edge.</div>
</div>
Just override the max-width property as max-width: initial;, for example,
.fullWidth {
width: 100%;
margin-left: auto;
margin-right: auto;
max-width: initial;
}
<div class="row fullWidth"> </div>
this works for me :)
I know that there are already many answers, but I think I have something new to add in this topic if someone is using Foundation 5 and stumbled upon this question (like me).
As Foundation is using REM units, it would be best to alter .row class using them and by adding extra class, so you can have only selected rows full-width. For example by using .full class:
.row.full {
max-width: 80rem; /* about 90rem should give you almost full screen width */
}
You can see that it is used like this even in documentation page of Zurb Foundation (they altered .row class, though): http://foundation.zurb.com/docs/ (just look into page source code)
You really would want to keep the row class otherwise you lose a lot of the power of the grid system. Why not change the setting for $rowWidth from 1000 (default) to 100%. This can be found in the file foundation_and_overrides.scss
Just set the
$row-width: 100%;
http://foundation.zurb.com/forum/posts/927-full-width-layouts
I am not sure if I am missing something, but I had to add a .row div for the .centered to work. I can still style the .header to have a full width background in this case, but the .container method did not work for me.
<header class="header">
<div class="row">
<div class="centered">
Logo and stuff
</div>
</div>
<div class="row">
Some navigation stuff
</div>
</header>
If you don't give it the "row" class and put columns inside it works on a 100% width
If you're using sass, this is a better way:
<div class="row full-width"></div>
.row{
&.full-width{
width: 100%;
max-width: 100%!important; //might be needded depending on your settings
&>.column:first-child,
&>.columns:first-child{
padding-left: 0;
}
&>.column:last-child,
&>.columns:last-child{
padding-right: 0;
}
}
}
yes, just use like this:
<div class="large-12 columns">
<h2>Header Twelve Columns (this will have full width of the BROWSER <---->></h2>
</div>
I have a container div, inside which I want to pack a variable number of divs of unknown (variable) height but with a given min-width. My requirements are:
If the container is wide enough to accommodate two columns, I want them to distribute themselves nicely in two columns without unnecessary whitespace.
It not, they should just go above each other.
Currently, I've given the divs width:48% margin-right:2%;float:left; which works nicely in the one-column state but when I resize the browser window, making room for two columns, every div which ends up in the left column insists on aligning itself horizontally with the bottom of the last div which went to the right:
what I have http://img602.imageshack.us/img602/5719/whatihave.png
This is how I would like them to go (no wasted space):
what I want http://img96.imageshack.us/img96/6985/whatiwantu.png
I would like a pure CSS solution if possible.
Thank you! /Gustav
EDIT:
This markup illustrates my problem:
<html>
<head>
<style type="text/css">
.box {
width: 48%;
min-width:550px;
margin-right:2%;
margin-bottom: 1.5em;
background:blue;
color:white;
height:180px;
float:left;
}
.tall {
height: 250px;
}
</style>
</head>
<body>
<div class="box">1</div>
<div class="box">2</div>
<div class="box">3</div>
<div class="box tall">4</div>
<div class="box">5</div>
<div class="box">6</div>
<div style="clear:both"/>
</body>
</html>
The .boxes are generated dynamically, and so are their heights, I just threw in one taller to illustrate.
I don't think you can achieve the desired effect with pure CSS. I've used jQuery Masonry to replicate the effect you're after and it worked really well.
I'd love to see a pure CSS solution for this but haven't seen anything come close yet.
I believe that if you have a div for each column into which you put the numbered divs you will get what you want. Something like this:
<div class="containerDiv">
<div class="column">
<div class="content">
1
</div>
<div class="content">
4
</div>
</div>
<div class="column">
<div class="content">
2
</div>
<div class="content">
3
</div>
</div>
</div>
The next step appears to be "how do I balance my columns". Some code somewhere is generating the boxes you mentioned. It is deciding on the height of each box. This code will need to generate a balanced list of boxes for each column prior to forwarding the request to the JSP for presentation. By balanced, I mean "the height of column1 is similar to the height to column2"