Look at this image: http://i.stack.imgur.com/KZCXn.png
I'm using 'float:left' to align contents of my website grid-wise.
On the left side, the space between the two objects is 24px, whereas on the right side it's 10px. It is happening automatically because of using float. I don't want the spaces to be different on both sides if the boxes are of different heights. I want the alignment to be like facebook timeline.
You will need to use something like Masonry: http://masonry.desandro.com/. HTML/CSS can't do it by itself.
Related
Edit: I cannot modify the HTML page at all or else I will automatically get a 0.
My professor just gave us this assignment where we add CSS to an HTML page. We have to follow screenshots, using the right margin, padding, borders, widths, and heights.
For multiple columns, he wants us to use float, which is all fine and dandy, but 3 columns need to be floated to the left and then centered in the page.
So while the screenshot looks like this:
My actual project looks like this:
How am I supposed to float these columns, and keep them centered?
I have set text-align for section#featured, but that only centered the text, not the elements. I can't use the display property, or I'll get points taken off. In the other screenshots he does not specify any margin or padding for the columns, so they are what they are.
They are div elements floated to the left, by the way, so their default display is block. Setting an auto margin does nothing.
Any ideas? Should I just stick it to him and use display instead of float? Because that actually works.
Look at the diagram.
Create a container to represent the dark blue/purple outline. Give it a size. Centre it.
Arrange the three side-by-side elements inside that container.
You can place your elements in a div and center it using css like
#my_div {
display: table;
margin: 0 auto;
}
Look at this
I'm using float:left to align contents of my website grid-wise.
On the left side, the space between the two objects is 24px, whereas on the right side it's 10px.
How do I fill up the extra spaces so that both sides can have 10px margin?
You cannot achieve what you want with just CSS floats unless you make all your panels a fixed height and truncate the content of it's too big.
If you must have different sized boxes, use a JavaScript library like Masonry http://masonry.desandro.com
I am working on a page with some dynamic content. The main layout is in 3 containers within the same fluid row. I want the first container either to display one of two types of lists, or be absent -- varying by the state of the page.
However when I try to remove the element with a jquery function like $("#container-id").hide(), it slides the containers to the right of it left, skewing the layout of the page. Is there a way to remove this container from view without the other containers shifting left?
Here is an example of what is happening:
http://jsfiddle.net/PHaeA/27/
And here is an example of how I want the containers to appear when the first one is absent: http://jsfiddle.net/gLTyF/5/
Thanks!
Sounds like the easiest workaround would be to (if possible) add a div inside the span with the content and hide that instead of the whole column.
Another way might be to override the twitter bootstrap style to make it float right instead of left:
.row-fluid [class*="span"] {
float: right; }
but I'd guess that would be more likely to cause unintended consequences.
If you want the space preserved, you can use
$('#col1').css({visibility:"hidden"});
So i have my header setup fine. Then i have my body. What i want to happen is to have the body split (did that fine, no problem). then on the left side i have my navigation and the right side i have my main body content. My problem is if i use a float for the initial split how do i split the right side in half then? I want 3 sections overall. Left side, then leftRight and rightRight.
My question is, can i put a float inside something this is already floating? If so, then how? if not, then how can i split the right side of my body again?
Here is what i tried: http://people.eecs.ku.edu/~ageoffri/unavitSite/
Yes, you can put floating elements inside other floating elements.
As you discovered, your code has a misplaced div, so you aren't actually nesting your elements.
Basically I want to layout a toolbar with some icons on the left and right and a variable sized text field in the middle. I want the text field to take up the remaining space in the middle. The side sections widths are not known ahead of time, they are determined by the number of visible buttons on each side.
The problem is similar to http://www.alistapart.com/d/holygrail/example_4.html except he side column widths can not be hardcoded.
Is it possible to do this purely in CSS?
It sounds like you need display:table-cell
http://www.w3schools.com/css/pr_class_display.asp
Container can be display:table-row and the children can be display:table-cell. I believe that should work for you.
To answer my own question, if you're using a browser that supports the flexible box layout model, setting the left and right DIVs to "-webkit-box-flex: 0;" and the center DIV to "-webkit-box-flex: 1;" does exactly what I want. The container should have "display: -webkit-box;"