I'm making a two column Tumblr theme and I need to fix this weird CSS positioning issue I'm having. If you look at the picture provided you can see that there's a gap in between two pictures in the first column. This happens when a picture is smaller than the max-width I guess the rest of the width it just filled with blank space. How can I fix it?
Code:
http://pastebin.com/eY4EsQKH
Picture:
http://i.imgur.com/z8k22cQ.png
jsFiddle:
http://jsfiddle.net/kQVNd
Try this:
1. Divide the content in two columns like this:
<div class="column">
<!-- articles -->
</div>
<div class="column">
<!-- articles -->
</div>
2. Add this CSS:
.column {
display:inline-block;
vertical-align:top;
}
jsFiddle demo.
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
I'm making a box based layout and I'm having issues with the gutters in bootstrap 3. Since they've been changed to be padded since bootstrap 2, every time I want to add padding to a box it completely destroys the gutter. I can't seem to find a way of remedying the problem.
I use a .box class to highlight the box from it's gutter and give them background colours and images. I want padding inside the box for the text so it's not right on the edge of the box walls, so I made a .box-inner class, but I can't just apply padding to it :/
<div class="col-md-12">
<div class="row">
<div class="col-md-6">
<div class="box">
<div class="box-inner">
<h1>Test2</h1>
</div>
</div>
</div>
</div>
</div>
Any help would be very appreciated! I've been banging my head against the wall for hours.
Fiddle here, I highlighted the problem areas with a comment:
http://jsfiddle.net/kbj8dd0e/6/
Sure you can add padding. Just add it to the .box.
Have a look at this:
http://jsfiddle.net/kbj8dd0e/5/
(note that I changed the col-md to col-xs to make it show better in that small fiddle pane, but the same should work for any col class.)
All I did was move the padding to the .box class to be able to remove the redundant .box-inner. I also removed all your instances of <div class="row"><div class="col-md-12">...</div></div> as this just adds markup and serves no purpose whatsoever.
Or am I missing something here?
My question is very simple. But I have googled and googled and googled but not found an answer.
I have a simple layout in zurb foundation 3
<div class="row" id="wcont1">
<div class="three columns" id="wcont1a">
</div>
<div class="six columns" id="wcont1b">
</div>
<div class="three columns" id="wcont1c">
</div>
</div>
I want that when the wcontb column is populated, it should not expand beyond a particular point (defined by me) but instead it should be scrollable vertically using up and down arrow icons.
I am a novice. I will highly appreciate a detailed answer and a working example using zurb foundation 3.
You have two concerns here:
That you want to limit the height of the middle div (wcont1b) so the content is scrollable when it reaches a particular point.
That you want a pretty way of doing it
Please take note that the two concerns are separated issues. So let's tackle the first one and using Zurb Foundation 3.2.2 you can layout your three divs like so:
<div class="row" id="wcont1">
<div class="three columns" id="wcont1a">
<div class="panel">
Content goes here...
</div>
</div>
<div class="six columns" id="wcont1b">
<div class="panel">
<h4>Content goes here...</h4>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
<li>8</li>
<li>9</li>
<li>10</li>
</ul>
</div>
</div>
<div class="three columns" id="wcont1c">
<div class="panel">
Content goes here...
</div>
</div>
</div>
I populated wcont1b so we can see the scroll bar in action. I also put the sample contents inside a zurb panel (using the panel class) so you can better see how the divs are separated and how the scroll bar behaves (I'll show you two approaches).
Ok so now you have that tall div ('wcont1b`) at the center and we want it to be of a certain height so it will not consume much space, especially when viewed on a mobile (although personally I prefer having a tall div than a short one with a scroll bar especially if there are contents outside the div and below it). To control the height of the div you need this in your css:
Approach #1
#wcont1b .panel {
max-height: 150px;
overflow-y: scroll;
}
The max-height value is the height limit of wcont1b and definitely you should change it per your requirement. The overflow-y is the one that takes care of the scrollbar. This approach will not be desirable if you have a title in wcont1b and you do NOT want it to scroll along with the content. So to make more pretty you should do this:
Approach #2
#wcont1b .panel ul {
max-height: 150px;
overflow-y: scroll;
}
Notice now that only the list scrolls and the header stay on top. The difference is that your css now targets the ul, the list, and not the entire content or not the entire wcont1b.
With that you now have a height-controlled div. But I think you want the scroll bar to look nice and that's where jquery plugins comes in. You told us you have tried millions but you have not shown us any code and it's important that you do. But let me give an example anyway using jscrollpane that you can get here. Once you downloaded the necessary files and referenced them on your page you need to do the following:
The code you need for approach #1:
<script>
$(window).load(function(){
$('#wcont1b .panel').jScrollPane();
});
</script>
The code you need for approach #2:
<script>
$(window).load(function(){
$('#wcont1b .panel ul').jScrollPane();
});
</script>
That's it, it should solve your problem. If you encounter more issues you need to give as much info as you can so people here can help you better.
I really need your help on this one:
Right now I have divs just on top of each other, filled dynamically with diverse contents so the heights are changing.
What I want to do now is to place them in 2 rows. With a fixed width and "float:left" this kinda works already.
My english is not the very best so pls take a look at my example picture first:
As you can see there is this whitespace because of the third div which doesn't start right beneath the first div because of div number 2 which CAN BE higher as the first div.
I now wonder if there is a possibility to automatically position those divs higher so that there is no whitespace (they always should start right beneath the picture which is above wouth the whitespace, left or right).
LIKE THIS:
I hope you kinda understand what I mean :D Thanks in advance for replys!
EDIT:
Code-Example:
<div id="content">
<div class="xyz">BLABLA</div>
<div class="xyz">BLABLA<br>morebla!<br>EVEN MORE BLA</div>
<div class="xyz">BLABLA</div>
</div>
<style>
#content {
width: 648px;
}
.xyz {
width: 303px;
float: left;
border:1px solid black;
}
</style>
Remeber, heights are always different!
jQuery masonry makes your life a lot easier.. don't reinvent the wheel, especially when you're facing a classic css problem.
this will do it...
<div id="content">
<div class="column1" id="left">
<div id="div1">...</div>
<div id="div3">...</div>
</div>
<div class="column2" id="left">
<div id="div2">...</div>
<div id="div4">...</div>
</div>
</div>
Then just style column2 styles by defining widht values in your css.
Thanks,
#leo.
I have seen several sites where these social share buttons looks perfectly horizontal aligned. Take in account that many of these buttons are iframes.
Here is my current painful situation:
Change the margin-top on your iframes (or a div element above it) to negative values to have them line up. Use trial-and-error once you identify the correct elemtn until you get it right, for example using the following HTML:
<div id="twitter">
<iframe/>
</div>
<div id="facebook">
<iframe/>
</div>
<div id="digg">
<iframe/>
</div>
The CSS would look something like this:
div#facebook
{
margin-top:-5px;
}
div#digg
{
margin-top:-10px;
}