I have a simple two column responsive design with Skeleton boilerplate.
For the sidebar I have this div, inside a container div:
<div class="container">
<div class="four columns">
/* logo and menu */
</div>
<div class="nine columns post">
/* contents... */
</div>
</div>
I like the way it looks in wide viewports and how it's stacked on narrower ones, but I'd like to have the sidebar (four columns div) in the wider sizes always fixed at the left, while scrolling the content of the other div.
Tried several things but it ends screwing up the responsive layout, I guess I don't have a thorough knowledge of CSS positioning...
Any help is appreciated!
Thanks.
I read that you are using the Skeleton Boilerplate.
I recommend that you put your logo and menu in a <nav>element. When closing </nav>, insert a non-breaking space ( ). This non-breaking space will hopefully fix your problem!
<div class="container">
<div class="four columns">
<nav>
/* logo and menu */
</nav>
</div>
<div class="nine columns post">
/* contents... */
</div>
The next thing to do is to go to your CSS file and insert:
nav{ position:fixed; width:220px; /*found the width-info on Skeleton website*/ }
Let me know if it worked out for you!
For that you need to have a "sticky" div
Try using waypoints
Related
I have a page with a bunch of equal size divs that I want to fit responsively in the available space of a wrapper div.
The idea is that:
- in a large screen the divs will show in 3 columns
- in a medium size screen the divs will show in 2 columns
- in a phone screen the divs will show in 1 column.
I'd also like the wrapper to center horizontally.
I was trying:
#wrapper {margin:0 auto;}
.column {float:left; max-width:340px; height:540px; margin:20px}
It works as intended except that the wrapper doesn't center, which I was trying to achieve with line 1 of css.
Any idea how I can achieve this?
EDIT:
The HTML code:
<div id="wrapper">
<div class="column one">
</div>
<div class="column two">
</div>
<div class="column three">
</div>
</div>
If your requirements allow you to do so, I would suggest using a UI Framework such as Twitter's Bootstrap. They have components that would achieve exactly what you are attempting to do (see their grid system documentation).
Example
EDIT: Included grid documentation link & Example
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/
I am using jQuery SimpleModal in order to display product information. For this I have two divs which are to be shown in one modal dialog: The left div holds the product logo and some description right underneath the logo. The right div holds detailled information about the product. The content in the right div can become quite long.
What I need the modal dialog to do is to keep the left div at its position while the right div scrolls if its content is too long. How can this be accomplished?
Here is my HTML structure within the modal dialog:
<div id="container">
<div id="leftColumn">
<div id="picture">
</div>
<div id="information">
</div>
</div>
<div id="rightColumn">
<p>Looooong text...</p>
</div>
</div>
Here the according CSS:
#leftColumn {
float: left;
}
#rightColumn {
overflow:auto;
}
if you use positioning in these divs it will be greatly helpful
setting up max-width:as you require; max-height:auto; can help you
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/