I have developed a site using Zurb Foundation which is of course 12 columns wide.
I want to be able to put adverts either side of my content if it is wide enough, else show it below. I can figure out the last bit, of moving it elsewhere if there is not enough room.
An example is like so: Zurb Template
I have tried floated divs before the container (under the header etc.), however these are always butted right up against the browser window. I'd like it to float left, then float right within this, so it is next to the content so I can apply padding/margin to keep them a set distance from the content.
Thoughts?
Thanks.
There might be a "cleaner" way, but I'd just solve this by using absolute positioning.
Some quick pseudo code to show how you could do it.
HTML
<div class="row">
<div style="position: relative;">
<div id="adsL-container">L ads here</div>
<div id="adsR-container">R ads here</div>
</div>
</div>
CSS
.row #adsL-container, .row #adsR-container {
position: absolute;
top: 0;
width: 300px;
}
.row #adsL-container {
left: -300px;
}
.row #adsR-container {
right: -300px;
}
<div class="row">
<div class="large-2 columns hide-for-small ads">
...
</div>
<div class="large-8 columns small-12 columns">
..
</div>
<div class="large-2 columns hide-for-small ads">
...
</div>
</div>
<div class="small-12 columns show-for-small ads">
...
</div>
<div class="small-12 columns show-for-small ads">
...
</div>
use class="hide-for-small" to hide div for larger screens
Related
I'm using bootstrap grid system for building a website, i'm not using the row class but the padding between divs is not working!
<div class="container">
<div class="col-lg-4"></div>
<div class="col-lg-4"></div>
<div class="col-lg-4"></div>
<div class="col-lg-4"></div>
</div>
Can anyone help me with that?
In Bootstrap there are 12 columns in a row. You have 4 * 4 = 16, and that's not correct.
It’s based on a 12 column layout and has multiple tiers, one for each media query range.
So you should change your code to:
<div class="container">
<div class="row">
<div class="col-lg-4"></div>
<div class="col-lg-4"></div>
<div class="col-lg-4"></div>
</div>
</div>
See docs here.
To start with - assuming you are wanting a single row- you need to either change these divs to a "3" each or have one less of them - remember that 12 is the magic number for the Bootstrap grid.
Also the reason for containing the cols in a .row is to control the margin on either side. The padding is INSIDE the divs - not between them so the following will give you a row with 3 divs that are positioned adjacent to each other to give a full row and will have left / right padding of 15px inside each div:
<div class="container">
<div class="row">
<div class="col-lg-4"></div>
<div class="col-lg-4"></div>
<div class="col-lg-4"></div>
</div>
</div>
The .row class has a -15px margin on either side so that each of the side divs will aligns with the edge of the parent container div. Remember that you can use container-fluid to expand the parent div across the entire viewport.
So to summarise - the Bootstrap .col-* divs do NOT have padding between them, but rather padding inside them. Unless of course your CSS overrides that.
According to Bootstrap documentation:
Row is mandatory
Every row has 12 columns
You are using 16 columns, change your code to:
<div class="container">
<div class="row">
<div class="col-lg-4"></div>
<div class="col-lg-4"></div>
<div class="col-lg-4"></div>
</div>
</div>
Is it possible to create this page layout with css alone? if so what is the best way to go about it? floating puts all block level elements aligned to the last page break along the top, display:inline-block just aligns up along the bottom. Neither create the alineation model from the image below.
I know I could position them manually but the divs are filled with content from a data base so they will need to adjust automatically and align this way independently of their size. I thought about calculating all their heights with javascript and positioning them dynamically this way, but I've got this feeling that there might be a simple way of doing this that I'm totally overlooking. any ideas?
I guess you are looking for a layout similar to Pinterest, so the first Google search returned this example. There are a lot of other results, so I am sure one should fit your needs if you search yourself.
Have 3 columns, and fill the blocks in them,
Something like this,
Skeleton:
<div class="column-container">
<div class="column-1">
<div class="block">...</div>
<div class="block">...</div>
</div>
<div class="column-2">
<div class="block">...</div>
<div class="block">...</div>
<div class="block">...</div>
<div class="block">...</div>
</div>
<div class="column-3">
<div class="block">...</div>
<div class="block">...</div>
<div class="block">...</div>
</div>
</div>
css:
.column-1, .column-2, .column-3{
float:left;
width:200px;
height:auto;
}
.block{
display:block;
width:180px;
}
And the blocks you add to each column will go sit below one another. Simple.
Updated response:
Flexbox almost does what you want (as does something like I posted below) but if you're ordering must be left-to-right and it must tight-fit vertically as in your mock - perhaps consdier something like http://masonry.desandro.com/?
Original response:
Maybe try something like this?
.container {
-webkit-column-count: 3;
-webkit-column-gap: 10px;
-webkit-column-fill: auto;
-moz-column-count: 3;
-moz-column-gap: 10px;
-moz-column-fill: auto;
column-count: 3;
column-gap: 15px;
column-fill: auto;
}
.container div {
display: inline-block;
width: 200px;
-webkit-column-break-inside: avoid;
-moz-column-break-inside: avoid;
column-break-inside: avoid;
margin-bottom: 10px;
}
Here: http://jsfiddle.net/bvaughn/rrpg58yy/
Bootsrap is the one I recommend, u simply add the reference to your file (or project) and then it's really easy to design the layout that you want, after you implement Bootstrap, your code will look like this:
<div class="container">
<div class="col-lg-3">
<div class="row">
<div>some data 1</div>
</div>
<div class="row">
<div>some data 2</div>
</div>
<div class="row">
<div>some data 3</div>
</div>
</div>
<div class="col-lg-3">....
Fiddle
Make sure you resize your page, since bootstrap stacks all the divs together for smaller (mobile) screens
I've been trying to make my Bootstrap columns the equal size and have been failing. Using CSS or JavaScript, how can I accomplish this?
Bootply Example
CSS:
#grid-selector .container {
max-width: 400px;
}
#grid-selector [class*="col-"] {
border: 1px solid #000;
text-align: center;
padding: 20px;
}
HTML:
<div id="grid-selector">
<div class="container">
<div class="row">
<div class="col-xs-6">Section 1<br>Space</div>
<div class="col-xs-6">Section 2</div>
</div>
<div class="row">
<div class="col-xs-6">Section 3</div>
<div class="col-xs-6">Section 4</div>
</div>
<div class="row">
<div class="col-xs-3">Section 5</div>
<div class="col-xs-3">Section 6</div>
<div class="col-xs-6">Section 7</div>
</div>
<div class="row">
<div class="col-xs-6">
<div class="row man">
<div class="col-xs-12">Section 8</div>
</div>
<div class="row man">
<div class="col-xs-12">Section 9</div>
</div>
</div>
<div class="col-xs-6">Section 10</div>
</div>
<div class="row">
<div class="col-xs-12">Section 11</div>
</div>
</div>
</div>
tadaaa! Super FLEX to the rescue!
#grid-selector .container {
}
#grid-selector .row {
display:flex;
align-items:stretch !important;
}
#grid-selector [class*="col-"] {
border: 1px solid #000;
text-align: center;
padding: 20px;
min-height:100%;
}
And I even made your example fully responsive instead of fixed width, just because I can ;) .
No, really, I did it to show you it could easily be responsive, but if you want it to be fixed , just add all this code inside a container div (do NOT limit the container width as you did!)
see to understand it visually http://www.bootply.com/Wypyz5PaSN and play around
and read more about FLEX MODEL at Mozilla MDN
The CSS3 Flexible Box, or flexbox, is a layout mode providing for the arrangement of elements on a page such that the elements
behave predictably when the page layout must accommodate different
screen sizes and different display devices. For many applications, the
flexible box model provides an improvement over the block model in
that it does not use floats, nor do the flex container's margins
collapse with the margins of its contents.
Many designers will find the flexbox model easier to use. Child elements in a flexbox can be laid out in any direction and can have
flexible dimensions to adapt to the display space. Positioning child
elements is thus much easier, and complex layouts can be achieved more
simply and with cleaner code, as the display order of the elements is
independent of their order in the source code. This independence
intentionally affects only the visual rendering, leaving speech order
and navigation based on the source order.
The easiest way to accomplish this is to create an additional CSS class which is shared between the columns in each row.
In this class, you'd want to define a min-height.
<div class="container">
<div class="row">
<div class="col-xs-6 row1">Section 1<br>Space</div>
<div class="col-xs-6 row1">Section 2</div>
</div>
</div>
You would then define your CSS as follows
.row1{
min-height: 100px;
}
The reason you'd want to be using min-height as opposed to height, is to retain the responsiveness when you reduce the size of the window. If you were to then do only height, as opposed to min height, as soon as the site becomes smaller, the objects cannot fit inside the div, and don't perform properly.
I have a template based on fluid example here:
http://twitter.github.io/bootstrap/examples/fluid.html
I have the latest files from here, the only customizations being colors:
http://twitter.github.io/bootstrap/customize.html
The basic markup is
<div class="container-fluid">
<div class="row-fluid">
<div class="span3">
<div class="well sidebar-nav">
Column 1
</div><!--/.well -->
</div><!--/span-->
<div class="span9">
Column 2
</div><!--/span-->
</div><!--/row-->
</div>
Column 2 falls under column 1 on mobile devices, which is what I want sometimes. But in some cases (specific pages) I want the 2 columns to remain side by side. My question is how do I achieve this with the same js/css files?
Here's one possibility: http://jsfiddle.net/panchroma/RMPMA/
You will see that the columns don't drop on the row with class = double-col
CSS
#media (max-width: 767px){
.double-col.row-fluid [class*="span"] {
float: left;
width: 50%;
}
}
Since this resets the width of each col to 50% on viewpoints 767px and below, this will work with rows having two columns. For other combinations, simply play with the width setting. You might also want refine the padding and other styling, but easy enough now.
Hope this helps!
takes deep breath
Ok, I have a large div that acts as a background layer. This div pans from left to right based on the link you select in a typical horizontal navigation. It's a bit of a novelty thing.
The HTML structure:
<div id="scroll">
<div class="container_16">
<div id="header" class="grid_9 suffix_3 alpha omega">
<!-- the links that control animation -->
<ul>
<li>Example 1</li>
<li>Example 2</li>
</ul>
</div> <!-- end #header --> <div class="main grid_8 alpha omega">
<div class="content grid_12 alpha">
<div id="the_content">
<!-- content is loaded in here via ajax -->
</div><!-- end the_content -->
</div><!-- end .content -->
<div class="clear"></div>
<div id="footer">
Footer stuff
</div>
</div> <!-- end .main .grid_8 .alpha .omega -->
</div> <!-- end .container_16 -->
</div> <!-- end scroll -->
A brief snippet of CSS:
#background_container {
position: absolute;
left: 0px;
top: 0px;
z-index: -1000;
width: 100%;
height: 100%;
}
#scroll {
width: 100%;
height: 100%;
overflow: auto;
}
The Javascript simply uses jQuery to animate the "left" attribute. I would include it, but there's a lot going on and I don't think it will help bring a solution.
Basically, when the background div scrolls from the first position to the last position, the content seems to "scrunch" briefly in Safari.
Video of this behavior:
[redacted]
In the video, I demo both safari and firefox. As you can see, in Safari the content scrunches/glitches during the animation. In Firefox, it does not. Safari is seemingly the only browser that does this. It even works in IE6. :)
The div that appears to "scrunch" seems to be <div id="header" class="grid_9 suffix_3 alpha omega"> but, sometimes you can see a scroll bar briefly which suggests <div id="scroll"> may be the root cause.
Is this a Safari rendering issue that's common and can be avoided? Or should I just suck it up?
Thanks in advance!
You have to set -webkit-transform: transform on the original element so that it gets hardware accelerated on load.