I'm using foundation to create three sections of a site. Set up with the following html:
<div class= "row full">
<div class="sidebar large-2 columns">... </div>
<div class="large-8 columns user-navbar">...</div>
<div class="large-2 columns user-activity">...</div>
</div>
I'm also trying to have the sidebar extend the vertical length of the page. I've been trying to do this by doing:
.sidebar {
min-height: 100%;
position: fixed;
}
However when I do this it provides an overlap of the user-navbar to the sidebar. Is there a way I can fix this?
Thanks!
there's no use of position here .So to extend height to window height use:
.sidebar {
height: 100vh;
}
also define class sidebar as:
<div class="large-2 columns sidebar" style="background:red;height:120px">... </div>
I found an older post that had a similar problem:
Using fixed position with a grid layout framework
For Foundation 6 which I'm working with, I added the class "large-offset-2" and it looks great now!
I have a 3-column layout that works pretty well:
http://jsfiddle.net/nicorellius/YNyHW/7/
My goal is to add a pre-existing modular unit into the center div, the one with class two-inner. The markup is like so:
<html>
<head></head>
<body>
<div>
<div class="container">
<div class="one">
<div class="one-inner"></div>
</div>
<div class="two">
<div class="two-inner"></div>
</div>
<div class="three">
<div class="three-inner"></div>
</div>
</div>
</div>
</body>
</html>
The CSS can be seen in the fiddle. Part of the modular unit is actually built from some PHP where some data from a database is fetched and displayed. I have some arrays that I'm using for testing that mimic 6 entries and gives the modular unit a 2-wide by 3-tall box layout. My problem is that when I add this unit into the layout above, I get something like the test site below.
The markup for the modular unit is like so:
<section class="unit">
<section class="buttons margin-top-2em">
<div class="button-fixed-width">
<button type="button" class="<bootstrap-button>">button 1</button>
</div>
<div class="button-fixed-width">
<button type="button" class="<bootstrap-button>">button 2</button>
</div>
<div class="button-fixed-width">
<button type="button" class="<bootstrap-button>">button 3</button>
</div>
</section>
<div class="row">
<?php // loop through some arrays to get module unit ?>
</div>
</section>
I've tried various tweaks to try and get it up but the only thing that does it is making the heights of the outer classes one, two, and three close to zero.
Although I've tried changing heights and other bits to get it to fit, I'm still having trouble figuring out why that center div won't go up. What am I missing?
The CSS for the unit class is in the fiddle. On it's own, it works OK, and I have some breakpoints that collapse it down into a single column. I just cant get passed this part...
EDIT
After trying some ideas from #kozlovski5, I am able to get the divmoving up and down as I need. But there is something going on that is making me uneasy. I'm not too familiar with the display: table, display: table-cell layout so Im sure I'm missing something. For example, when I add text to the divs in question, either the classes one, two, or three, or the inner classes, the adjustments recommended by #kozlovski5 go away. So in other words if I don't use top: -37.5em; and just fill the divs with text, everything seems to work as it should. It's when I try to model the layout with bordered sections that I get the strange behavior.
I ended up going with floats instead. See test site above for final.
I applied:
div > .modular {
display: block;
}
This seems to solve the problem. Here is an updated jsFiddle. http://jsfiddle.net/YNyHW/4/
OP has provided a test case for his website, so my updated answer is:
.two-inner {
background-color: #cba;
border: 1px solid gray;
display: block;
width: 100%;
height: 100%;
position: relative;
top: -596px;
left: 0;
}
Ugghhh.. Another Edit
I think the whole display: table and div > div. { display: table-cell;} is causing this issue and instead of working on patches let's hit the problem head straigh on instead of working on fixes.
Just get rid of the display table etc. And use floats instead here is an example:
http://jsfiddle.net/YNyHW/6/
i am using zurb foundation for building website, but now i am facing a problem as follows
There are four columns in a row and one of them is not visible sometimes as per some conditions, the code is
<div class="row">
<div class="small-3 columns">1 ... </div>
<div class="small-3 columns" style="display:none;">2 ... </div>
<div class="small-3 columns">3 ... </div>
<div class="small-3 columns">4 ... </div>
</div>
Now the problem is when the div is disabled the empty space between them should be used by other divs, but it is not happening in my case,
I know, i am missing small point, but cant get it
here is the image of problem
I need the 4th div to be shifted to left, as 3rd div is shifted automatically, if 2nd div is display:none
The ZURB-Foundation (looks like you are using version 4) doesn't work like that by default.
What I usually do is create a .left {float: left !important;} class. If you apply that to your 4th div then it will do as you say.
However depending on your reason for doing this AND WHETHER THIS IS ONLY SUPPOSED TO APPLY TO DESKTOP/TABLET/MOBILE or ALL THREE, you might want to use
#media queries in the stylesheet to specify where and when.
Examples:
#media (query goes here) {
.row .columns:last-child {
float: left;
}
}
** OR **
.left {
float: left !important;
}
THEN
<div class="row">
<div class="small-3 columns">1 ... </div>
<div class="small-3 columns" style="display:none;">2 ... </div>
<div class="small-3 columns">3 ... </div>
<div class="small-3 columns left">4 ... </div>
</div>
Try this fiddle
HTML
<div class="row">
<div class="small-3 columns">1 ... </div>
<div class="small-3 columns" style="display:none;">2 ... </div>
<div class="small-3 columns">3 ... </div>
<div class="small-3 columns">4 ... </div>
</div>
CSS
div.columns
{
padding:10px;
background:#00bfff;
width:20%;
display:block;
float:left;
}
#jnelson thanks for the help, now i realized the power of !important, so i have created simple solution
.abc{
float:left !important;
}
This also worked correctly on all type of devices
You should not be changing the fundamental structure of how the columns are sized or work.
Instead you should just uses different classes. If you know that one column will be disabled, and I am assuming you are using javascript to do this. Then also use javascript to add the proper column width. If you have 3 columns instead of 4(due to one being display none) give the three columns a small-4. This line of thinking will also allow you to handle two columns (small-6).
If you absolutely have to use 3 columns I agree with the above posts that you need to change.
[class*="column"]+[class*="column"]:last-child {
float: right;
to
[class*="column"]+[class*="column"]:last-child {
float: left;
I am using Twitter Bootstrap and I am trying to get the layout as described in the title.
Please advise.
You can try something like this:
<div class="row-fluid">
<div class="span12">
<div class="fixed_width"></div>
<div class="variable_width"></div>
</div>
</div>
And CSS
div.fixed_width {
width: 300px;
// or try with: "float:left;" too
}
div.variable_width {
overflow: hidden;
// if you use float:left in the other, don't use overflow here, but try with: "width:100%;"
}
Here you can find a more general example (http://jsfiddle.net/glee/6Cavr/)
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>