So, I have this layout looks like this
As you can see there, the div is floating/aligned to the right side perfectly but on the left side there's a gap between it, how do I clear the gap?
DIV CSS:
.thread-list{
width: 40%;
background-color: #fff;
padding: 10px;
border-style:solid;
border-width:1px;
border-color:#F0F0F0;
margin-bottom: 3px;
margin-right: 10px;
margin-bottom: 10px;
overflow: auto;
float: left;
}
NOTE: The div is showing content dynamically (from database), and I can't make the div in 2 separated columns.
Sorry, if I'm being not clear enough.
DEMO
If you float multiple elements & one of the div has larger height then others, then these types of effect are created (the one you showed in your screenshot).
Solution 1: clear float left from 1st element of each row using :nth-child(2n+1) in your case its ..2n.. cuz you have 2 elements in one row.
Add this css in your style-sheet:
.thread-list:nth-child(2n+1){
clear:left;
}
Solution 2: Solution 1 will align all the div's but there will still be a negative space beneath, if you dont want that then you have to use plugins like Masonry Layout, this effect can not be achieved with pure css.
Related
NOTE This is similar to this post, however there is a strict no-javascript requirement and the answer should be responsive (i.e there is not a fixed number of columns).
I would like to style several fixed width, variable height boxes using no javascript such that they form a kind of fluid grid. This jsfiddle yields the picture below. This is essentially just the following css:
div {
float: left;
margin: 1em;
border: 1px solid #999;
width: 150px;
}
I'd like for the only vertical empty space to be the margins. In terms of the screenshot above, I'd like for the tops of 5 and 6 to move upwards to 1em from the bottom of 1 and 2, respectively.
it's not possible by using pure CSS because any how you have to know the current position of div so if you really wanna do this then you have to re position the <div> either using " margin-top " property of css or using jQuery like these jqueryhouse.com/jquery-grid-plugins
I have the following example:
fiddle: http://jsfiddle.net/yisera/yLty3552/2/
Pen: http://codepen.io/yisera/pen/KpzbQp
Where I have a flex grid and I have elements that are also display:flex;. The problem I have is that the div.card has another div, div.od-card-action which has the actions of that card, comment, upvote, downvote. However, whenever the content of one of the cards is bigger than the others, they will stretch, making the card bigger to match the biggest one on that row.
This is a desired behaviour, but the problem is the div.od-card-action will also grow (I don't want this to happen) and make the elements seem out of order like it is shown on the first card in the fiddle.
I tried:
.od-card-action{
position: absolute;
bottom: 0;
width: 100%;
padding: 10px !important;
}
but this only makes the content from the upper div overlap with the content of the actions div.
Is there a way where I can make the div.od-card-action go all the way to the bottom regardless of the size of the card and maintain the same size (eg: 50px to say a value)?
Thanks in advance!
EDIT
Here's a picture demonstration what I want to accomplish:
See how everything is aligned horizontally despite the content of the above div not being of the same size? That's what I need to achieve.
I realised that as you're already using Flexbox in .od-card, then .card-content could be set to take as much space as possible (vertically, as the flex direction is column) using:
.card-content {
flex: 1;
}
Change the od-card-action CSS back to:
.od-card-action{
position: absolute;
bottom: 0;
width: 100%;
padding: 10px !important;
}
Add new css to card-content
.card-content{
margin-bottom:50px;
}
I am just learning HTML and CSS (JavaScript will be next.) I am developing a website on which I have two boxes (defined as <div>s) side by side. They have different horizontal sizes, but each has "height: 1000px".
The large one sits right of the narrow one, and is defined by
<section style = "width:900px; height: 1000px; margin 10px; padding: 20px; background: #BBD1FF; display: inline-block; vertical-align:top;">
I added text within the confines of both boxes, and everything was fine. Then I added more text in the rightmost box, and the box seems to have expanded it's vertical dimension. The original and the new text in the box don't come close to filling the box, so what is going on here? I can't find any property of <div> which seems to relate to this.
Okay so i've taken a guess to what I think your trying to do. Basically, add max-width to your divs to prevent them from expanding. Here's a JSFiddle with something simple what I think your looking to do.
.div-one--left {
height: 1000px;
max-width: 50%;
min-width: 50%;
background: blue;
float: left;
display: block;
}
Also, when dealing with widths. Its good practise to always use percentages. You can't build responsively if your using pixels as widths (but thats off topic slightly).
http://jsfiddle.net/63617aLj/
I have this code: http://jsfiddle.net/mVX93/48/
Is it possible to remove the border from the far left side and far right hand side of the table?
I want to align it to either side of the page, and you can see it doesn't align with the test text. My idea would be to use nth item to apply border-left: 0px; to the first item and border-right: 0px to the last item however this doesn't seem to work.
Can anyone show me if this is possible and how it should be implemented please?
Since you have border-spacing:10px; there will be space remaining on the right and left side to separate the td. However, you could put a div around the table and change it's margin-left and margin-right.
Try this:
body {
background-color: gray;
overflow: hidden;
}
.grid {
margin-left: -20px;
margin-right: -20px;
}
You cell 4's text is overflowing but it is because you have a lot of . or dots without a space so when you enter text it should be fine.
DEMO
If you change the border-spacing to border-spacing-left:0px it aligns with Test but reduces the space between the cells. If you also add another Test and float it right it aligns with the right side of the table.
My problem is with the header. So I basically have 3 columns of divs. I want the middle one to have a constant width of 980px, and then I want the left of the header to extend to the end of the browser window with a blue background color. As for the right of the header, I want that to extend to the end of right side of the browser with a black background color. It kind off looks like this:
<------------------------------[blue][center header][black]---------------------------->
I've done my research and all I could find so far are two columns with a fixed left column with the right column filling up the rest of the space. I wonder how this can be applied to my problem?
Would it be like:
<div style="width:100%;">
<div style="display:table-cell; background-color:blue;"></div>
<div style="width: 980px;">my header</div>
<div style="display:table-cell; background-color:black;"></div>
</div>
Thank you!
A simple solution - basicaly using your exact stying, but putting another block in the central table-cell element, something like this span here:
<div class="wrapper">
<div class="left"></div>
<div class="center"><span>my header</span></div>
<div class="right"></div>
</div>
I moved all the inline style to a separate CSS block and used class selectors:
.wrapper {
display:table;
width:100%;
}
.left {
display:table-cell;
width:50%;
background-color:blue;
}
.right {
display:table-cell;
width:50%;
background-color:black;
}
.center {
display:table-cell;
}
.center span {
display:inline-block;
width:900px;
}
here is a jsfiddle
and here I made the center much narrower for a better illustration: jsfiddle
Hope this helps =)
Unfortunately there isn't a super smooth way of doing this that is also has wide cross compatibility support. There is a CSS spec for display called flex or flexbox which would do what you want beautifully and elegantly, but it has very limited support at the moment. Here is some resources on flexbox for your perusal...
http://css-tricks.com/old-flexbox-and-new-flexbox/
In the meantime, you can achieve the layout you want with some basic CSS jiggery-pokery that will get you what you want, but it requires absolute positioning your middle div.
Heres the JSFiddle: http://jsfiddle.net/CW5dW/
Here's the CSS:
.left {
width: 50%;
height: 300px;
float: left;
padding-right: 160px;
box-sizing: border-box;
background: red;
}
.right {
width: 50%;
height: 300px;
float: right;
padding-left: 160px;
box-sizing: border-box;
background: blue;
}
.middle {
position: absolute;
width: 300px;
height: 300px;
left: 50%;
padding: 10px;
margin-left: -150px;
box-sizing: border-box;
background: orange;
}
What is going on here you might ask?
Basically, we are taking the div with class middle and removing it from the flow of the document. This allows us to float our left div left, and our right div right, with widths of 50% in order to fluidly take up ALL space of the browser.
We then tell the middle div to take up 300px of space (in your case 980), and we tell it to go 50% of the total width of your browser from the left. This doesn't center it though, because its calculated from the left edge of your div. So we give it a negative margin space of half it's width, to sort of "move" that left edge to the center of the div.
Then, since we know the middle div has a width of 300px (in your case 980), we can then say that the left div should have some padding on its right edge greater than or equal to half the middle divs width, in my example that's 150px, and I added 10px more so text couldn't come right to the edge of the div, so 160px total. We do the same for the right div but for it's left side. This limits the content of those two divs from falling underneath our middle div.
This answer is not an "answer" as such - it's an extended comment to #Michael's post. I have, however, posted another answer - a jQuery solution.
Regarding #Michael's answer (which is a very tidy solution indeed) there is a tiny issue that if you remove your height declaration (which the OP undoubtedly will) then the backgrounds for the various columns become exposed - this method relies on the backgrounds all levelling out at their bottom edge in order to make the design coherent. If the OP's design doesn't have backgrounds behind the columns then this solution should be fine. If backgrounds are required (which they might be judging by the question wording) then it could be awkward. Two solutions to this...
a simple javascript that scans the page for column length, finds the longest, and matches all shorter ones to the maximum.
The other (and probably better) solution is to drop a background into your with the columns already on it (it only needs to be 1px high I guess) - just make sure the central white band is 980px wide and the side columns extend off a thousand or so pixels to accommodate even the largest of browsers
OK, here's my solution. This will present a "common or garden" three column fixed width layout to all users and then adjust it for users with javascript enabled (which, let's face it, is the vast majority of users). The benefits of this solution are that the layout will behave like any ordinary 3 solumn layout without the quirks you can experience from using more advanced CSS tweaks like absolute positioning and fixed heights.
Fiddle here... http://jsfiddle.net/vuary/
You should be able to see what's going on with the HTML and CSS... it's basic stuff. The jQuery is pretty straight forward too:
$(document).ready(function(){
// find the width of the browser window....
var docuWidth = $(window).width();
// find the width of the central column as set by the CSS...
// (you could hard code this as 980px if desired)
var centerWidth = $('#center').width();
// figure out how many pixels wide each side column should be...
sideColWidth = (docuWidth-centerWidth) / 2;
// then set the width of the side columns...
$('#left,#right').css({
width:sideColWidth+'px'
});
})
EDIT
Converted the jQuery to a function that is called when the document is ready, and again if the viewport is resized... just in case:
http://jsfiddle.net/aKeqf/