I'm working on a screen that I'm trying to make somewhat responsive. By this I mean that if the screen size changes, the divs should move to the next line.
It's a little something like this:
.contributor_thumbnail {
display: block;
float: left;
width: 250px;
height: 150px;
border: 1px solid #777;
}
<div class="contributor_thumbnail">thumb here</div>
<div class="contributor_thumbnail">thumb here</div>
<div class="contributor_thumbnail" style="height:2px; width:48px;">thumb here</div>
<div class="contributor_thumbnail">thumb here</div>
There are 4 divs side by side. One of them is a little smaller than the rest.
Depending on the size of the screen, the last div will place itself over the second last one. You might need to inspect the divs and change the width of contributor_thumbnail until you get this result (as seen in attached image)
Is there anyway to have a floating divs not stack on top of each other. I know I could set display: inline-block; to all but that is not an option for me.
Related
I am practicing with float property and I currently have a html like this:
section {
display: inline-block;
float: left;
width: 300px;
height: 100px;
border: solid;
margin: 3px;
}
<section style="margin-left: 150px;"> </section>
<section style="height: 300px;"></section>
<section></section>
<section> </section>
<section style="height: 300px; width: 3px; background-color: blue;"></section>
The thing I don't get about this is that the last section element (the blue box) doesn't go all the way up but instead is "fixed" a bit down. What is the reason and how can I fix this ? (Not linking fiddle because in fiddle the display is too small so it behaves differently.)
I guess it hapens becouse of the screen size.
Testing in my PC, when browser is fullscreen, all of the keeps on top. When I change the browser size to half screen, the blue section comes down.
Try use percentage to width.
It likely is breaking to a new line with the last non-blue box, then the blue box starts on the same level. If you want to stack the boxes then you will need to use some extra divs.
I have 3 divs like so:
<div class="div1"></div>
<div class="div2"></div>
<div class="div3"></div>
with the following CSS:
div {
border: 1px solid black;
display: inline-block;
height: 100px;
width: 100px;
}
When the divs are empty, this code works fine. All divs align along the same horizontal plane. But! When I put any content in 1 or 2 divs, the divs with the content move down about 90% of the height:
<div class="div1">X</div>
<div class="div2">Y</div>
<div class="div3"></div>
Divs 1 and 2 are now spaced down in comparison to the normally aligned div 3. The plot really thickens when I add content to the final div:
<div class="div1">X</div>
<div class="div2">Y</div>
<div class="div3">Z</div>
Now all three divs are properly aligned at page top again. Not sure what's happening here or the proper work around?
This is happening because the default vertical-align for a inline block element is baseline*.
This image from CSS Tricks helps to demonstrate the baseline of text:
As you can see, the baseline isn't how far down the text goes, it is the line that the text is aligned on. With vertical-align:baseline, the div with no content aligns with the baseline created by the <div>'s with content.
This image may help you visualize what's happening(or, you can play with the jsfiddle):
To make all your <div>'s align, no matter the content, set vertical-align:top;:
div {
border: 1px solid black;
display: inline-block;
height: 100px;
width: 100px;
vertical-align:top;
}
This article also helps explain vertical-align some more
* W3 Specs
After I wrote what is below, it came to me that I could add right and bottom margins to the left divs / first set of divs instead of on the right ones (which is what I tried previously), which achieves what I want. However, I feel like it's cheating or not the right or best way to do this. So, let me know what other ways this can be done.
O.k. Here is the problem:
I have the following code. I know there are many ways to do this, but I prefer to stick to something that doesn't require too much code and most importantly, can be memorized so that I can easily do it again in the future without referring to something:
(As I said above, this is the code that works how I want it to because I added right and bottom margins.)
<div style="float:left;width:300px;text-align:center;margin-right:20px;margin-bottom:20px">
<div style="background-color:red">Hello Hi. One Two</div>
<div style="background-color:green">Hello Hi. One Two</div>
</div>
<div style="float:left;width:300px;text-align:center;">
<div style="background-color:aqua">Hello Hi. One Two</div>
<div style="background-color:pink">Hello Hi. One Two</div>
</div>
If you resize your screen horizontally to a smaller size (thus mimicking the size of a phone), the two items on the right fall directly underneath the set on the left, which is what I want.
However, in a larger screen, as on a computer, I would like to add some spacing between the divs on the left and the divs on the right. This is the tricky part though (well at least for me). After that space has been added, I want that when the screen is resized to a smaller size, that the divs line up when they are under one another. The best I am able to do is something like this when the screen is resized:
_____
______
The first line represents the firs set of divs and the second line represents the second set. I have to keep making my screen smaller to get the second set of divs to keep moving to the left to then line up with the first set.
So, this is what I want when the screen is resized:
______
______
So, that's the first set of divs, a line break or whatever produces a space between the two divs and which would be the same thing that produces a space when they are side by side, and the second set of divs that were on the right.
You must use #media queries for this, and reset the margin when it is smaller screen.
body > div {
float: left;
width: 300px;
text-align: center;
margin-right: 20px;
margin-bottom: 20px;
}
#media screen and (max-width: 600px) {
body > div {
float: none;
margin: 0;
}
}
Fiddle: http://output.jsbin.com/biyidibage/1
Here is a version using inline-block.
body {
text-align: center;
}
.first, .second {
display: inline-block;
width: calc(50% - 20px);
min-width: 300px;
text-align:center;
margin: 10px;
}
#media screen and (max-width: 658px) {
.first, .second {
width: calc(100% - 20px);
}
}
<div class="first">
<div style="background-color:red">Hello Hi. One Two</div>
<div style="background-color:green">Hello Hi. One Two</div>
</div><div class="second">
<div style="background-color:aqua">Hello Hi. One Two</div>
<div style="background-color:pink">Hello Hi. One Two</div>
</div>
I'm trying to align 3 divs next to each other, with 2 flexible width and 1 fixed width.
Please see the following jsfiddle:
http://jsfiddle.net/qyGC5/82/
I've seen this post: Three DIVs next to each other with fluid horizontal width
but it doesn't work with 2 flexible divs or even with just 1 flexible width (the one with the long text). http://jsfiddle.net/qyGC5/89/
I also though of percentages, but since using 100% is out of the question, the gap would get bigger or smaller on resize.
Any help, much appreciated.
Thanks.
EDITED
Adding some screen shots to show what happens after I ajax load new comments (this is to display comments)
BEFORE THE AJAX LOAD MORE COMMENTS
AFTER THE AJAX LOAD
Forget about using display: inline-block for this.
Use float: left on .sides and overflow: hidden on #main.
See: http://jsfiddle.net/qyGC5/93/
<div class="sides">side 1</div>
<div class="sides">side 2</div>
<div id="main">Lorem ipsum..</div>
.sides {
width: 30px;
border: 2px dotted green;
float: left;
}
#main {
border: 2px dotted blue;
overflow: hidden;
}
I'm making a website and want it to appear as a grid of boxes and rectangles.
I have a 6x6 grid of relatively-alined left-float divs. They work fine and fit neatly in a 900 width wrapper div. If i want a horizontal rectangle, i simply make one of these squares twice as wide (accounting for margins between, but that's irrelevant) and delete the one next to it. No problem.
The issue I have comes in when I want to make a rectangle twice as TALL. it ends up bumping everything left of it in the same row as it a line down. The same happens with a square twice as large (2x2 grid units).
Here's the code in jsfiddle:
http://jsfiddle.net/zucw9/
Essentially, how can I get either 8,9, and 10 to shift up one space, or for 6,7, and 8 to move into that gap, leaving 9 and 10 where 6 and 7 are right now?
http://jsfiddle.net/zucw9/10/
This solution isn't a very good solution but it works.
(I changed some of the names so i could read it better. (.grid_rect_tall became .grid_tall etc. margin-left:10px; margin-right: 0px etc.. became margin: 5px;)
basically you specify a -ve margin-bottom for the tall one and an extra margin so the other elements don't overlap.
.grid_square, .grid_long, .grid_tall
{
float: left;
margin: 5px;
background: #6CC;
}
#main{
position: relative;
width: 905px;
overflow: hidden;
border: 1px solid black;
padding: 5px;
}
.grid_square{
width: 140px;
height: 140px;
}
.grid_long{
width: 290px;
height: 140px;
}
.grid_tall{
width: 140px;
height: 290px;
margin-bottom: -150px;
}
.rbuffer
{
margin-right: 155px;
}
.lbuffer
{
margin-left: 155px;
}
I'd still go with my comment though and use either: http://960.gs or css3 grid layout: http://w3.org/TR/css3-grid-layout
EDIT:- I thought i better put a why to my comment earlier that this is not a good solution. Simply put: if you want to change the layout of the page you will have to change the classes on the items as well as having to change the css.
Also created one with even more elements to show the possibilities: http://jsfiddle.net/zucw9/11/ (or in em instead of px because i was bored. http://jsfiddle.net/zucw9/15/)
The layout is standard, how it should be displayed. I would recommend to use another div which wraps up the dives that appear before the taller div. This is not a very flexible solution though.
Edit: Move
<div class="grid_square">8</div>
<div class="grid_square">9</div>
<div class="grid_square">10</div>
higher in hierarchy after
<div class="grid_square">2</div>
should fix it.
i hope your thinking like below
code:
<div id="main">
<div class="grid_square">1</div>
<div class="grid_rect_long">2</div>
<div class="grid_rect_tall">3</div>
<div class="grid_square">4</div>
<div class="grid_square">5</div>
<div style="clear:both"></div>
<div>
<div class="grid_square">6</div>
<div class="grid_square">7</div>
<div class="grid_square">8</div>
<div class="grid_square">9</div>
<div class="grid_square">10</div>
</div>
</div>