I'm using the 960 Grid System on this page where I list my instapaper bookmarks: http://labs.tonyhue.com/bookmarks/
However, the social media section is set off from the rest. It should be aligned to the right following the programming section. Any ideas?
Add a (fixed) height to your .grid_6-Container.
.grid_6 {height:250px; /*or something else*/}
Your Problem occurs on floated elements with different height.
Nice reading about floatings: http://coding.smashingmagazine.com/2007/05/01/css-float-theory-things-you-should-know/
Edit:
Otherwise you could add a wrapper element to clear your floats:
<div class="wrapper">
<div class="grid_6"></div>
<div class="grid_6"></div>
</div>
<div class="wrapper">
<div class="grid_6"></div>
<div class="grid_6"></div>
</div>
You can clear your floats with .wrapper {overflow:hidden;} OR you can use the clearfix method: http://perishablepress.com/press/2009/12/06/new-clearfix-hack/
Related
Is there a way of closing the gaps between elements without using column or rows?
I've build this
<div class="box">
<p>Short height</p>
</div>
<div class="box">
<ul>
<li>Something</li>
<li>To</li>
<li>make</li>
<li>height</li>
</ul>
</div>
<div class="box">
<p>Short height</p>
</div>
<div class="box">
<p>Oh no! I'm not in the place where I should me! DX </p>
</div>
CSS
.box{
width:30%;
margin:0% 1.6666%;
float:left;
}
How can I make the elements stop starting after the height of the previous longest element. Not even too sure how to word it!?
So instead of starting underneath the tallest, the 4th element should start underneath the element exactly above it.
Is it even possible?
The margin attribute in your css is doing the problem. Just remove the margin. Please let me know if it is the workable solution.
you could try either having them in the same box to keep them together or try removing the margin
here is a fiddle with the margin removed
https://jsfiddle.net/49uzyskh/
css
.box{
width:30%;
/*margin:1.6666%;*/
float:left;
}
Do you mean this layout:
http://desandro.github.io/masonry/demos/infinite-scroll.html
If yes,
you can refer the plugin here:
Masonry Plugin
You can also refer this plugin :Isotope
I'm getting into Flexbox now, trying to see how I can transition from using the traditional CSS grids.
I have two layouts: One made with a CSS grid. The other one made using Flexbox. The basic layout for both examples is quite basic: A header, a nav, a content section and the footer.
Design-wise they both look the same and behave exactly the same for RWD. However, in order for me to accomplish the same behavior using Flexbox I had to create a wrapper div around the Nav and the Content sections.
This is the HTML used with the CSS grid layout:
<div class="container-12 clear">
<header class="grid-12">Header</header>
<nav class="grid-4">Nav</nav>
<section class="grid-8">Content</section>
<footer class="grid-12">Footer</footer>
</div>
This is the HTML used with the Flexbox layout:
<div class="main-container">
<header>Header</header>
<div class="site-content">
<nav>Nav</nav>
<section>Content</section>
</div>
<footer>Footer</footer>
</div>
Notice the <div class="site-content"> around the nav and section elements.
So my question is: Is the <div class="site-content"> around the nav and section elements necessary in order to accomplish that layout using Flexbox?
I'm trying to achieve the same layout with the same HTML but different CSS techniques.
Here are the demos:
Basic Layout Using a CSS Grid
Basic Layout Using Flexbox
Thanks for any guidance on this.
The answer is simple: Yes, that extra wrapper is required.
I was able to find this article in Smashing Magazine from 2011 By Richard Shepherd where confirms that sometimes an extra wrapping container is needed in order to treat the child elements with Flexbox. Granted, his article uses the old 2009 syntax, but still, the case applies:
Using flexbox often requires an extra div or two, because the parent of any flexbox element needs to have display set to box. Before, you could get away with the following:
<div style="float: left; width: 250px;"> Content here </div>
<div style="float: right; width: 250px;"> Content here </div>
Now with flexbox, you’ll need:
<div style="display: box">
<div style="width: 250px"> Content here </div>
<div style="width: 250px"> Content here </div>
</div>
Many of you have already turned away, insulted by this extra mark-up that is purely for presentation. That’s understandable. But here’s the thing: once you master the CSS, this extra containing div becomes a small price to pay. Indeed, you’ll often already have a containing element (not necessarily a div) to add display: box to, so there won’t be a trade-off at all.
Extract taken from CSS3 Flexible Box Layout Explained
Thanks.
my html looks like this:
<div class="container">
<div class="header-content">
hello!
</div>
</div>
i've recently come into a situation where I need the 'header' to be 100% the window for a full-width background. usually i would do this css:
<div class="header-background-color">
<div class="container">
<div class="header-content">
hi!
</div>
</div>
</div>
unfortunately, i am fairly deep into a framework and can't wrap the container. i need to construct it within the container.
<div class="container">
<div class="header-background-color">
<div class="container">
<div class="header-content">
hi!
</div>
</div>
</div>
</div>
i can't figure out a way to accomplish this, and am wondering if this is possible.
if i use this css for header-background-color
background: blue;
left:0;
position: absolute;
width: 100%;
the element looks right, but the page flow is interrupted.
does anyone know if my target goal is reachable?
i made a bootply to illustrate this http://www.bootply.com/129060
You can use a child (>) selector to select the first container element and set its width to 100% and remove the padding.
.example-3 > .container {
width: 100%;
padding: 0;
}
This assumes you'll always have a wrapper around it with a unique class name (or use body if it's the first div), but this also allows you to remove the position: absolute which is causing the overlap and the height can stay dynamic.
See forked bootply: http://www.bootply.com/129065
I've added a button that inserts a paragraph into the div so you can see how it's not affected by changes in height.
Only thing I can think of is using a dumby element to maintain the vertical space (i.e. set the height), and then use absolute positioning on the full width content (as you mention). This is really ugly and won't be a good solution if the height of the content is dynamic.
See #content_dumby element in forked bootply: http://www.bootply.com/129063
What is required to make links in bootstrap grids work throughout all the media breakpoints ?
In my case, the links work only as long as the grid is not stacked.
This is what the grid looks like:
<div class="row">
<div class="col-md-6">
<a href="#" class="room" style="height: 155.60px; width: calc(25.0% - 4px);"> <span>Item 1</span>
</div>
<div class="col-md-6">
<div class="row">
<div class="col-sm-12">
<p>This is another row</p>
</div>
</div>
</div>
</div>
The working fiddle is here:
http://jsfiddle.net/pTw2j/8/
Edit Thanks for the fast answer. I chose overflow:hidden; at the end to avoid scrollbars while still fixing the issue.
The problem is that the links are floated, resulting in a height of 0 for the parent .storey container.
Setting overflow: auto on the container will fix the problem.
http://jsfiddle.net/pTw2j/13/
.storey {
overflow: auto;
}
This is referred to as "clearfixing." If you're interested in learning more, here are two good articles:
CSS Tricks: Force Element to Self-Clear its Children
David Walsh: CSS Clear Fix
I had the same problem. In my case a better solution was to add the class of "clearfix" to the containing div. Bootstrap has this class built in so you don't have to do anything with your CSS.
Adding overflow:auto will result in a horizontal scroll bar. Best to use clearfix class which resolves the issue.
Im quite new to twitter bootstrap, i try to do 2 column layout
Here is my code:
<div class="container">
<div class="row">
<div class="span3 well">Content</div>
<div class="span9 well">Content</div>
</div>
<div>
Unfortunately the second column has been push to bottom of column 1
Jsfiddle
Making the container of the column to row-fluid seems to fix the issue, but according to the bootstrap manual, u need a div container having the class container-fluid
I want to make fix layout, so i dont want to make container behave as fluid container.
Is there a way to fix this?
If you are using row, you will need to place the
wells inside the span3 and span9 divs.
<div class="container">
<div class="row">
<div class="span3">
<div class="well">Content</div>
</div>
<div class="span9">
<div class="well">Content</div>
</div>
</div>
<div>
As they are of a fixed width when used within a
normal row, adding any padding or borders to the span divs will
cause them to wrap.
Alternatively you may wish to amend the bootstrap css itself, either by taking into account the borders and reducing the margin accordingly, or changing the box-sizing property, as per Twitter Bootstrap - borders. Bear in mind that box-sizing doesn't work with some browsers, e.g. IE7.
In Twitter Bootstrap, .well class have padding, and that gives extra width to content of span classes.
Solution is:
.well {
box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
}
http://jsfiddle.net/uAs6k/305/