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
Related
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.
You can see what I'm going for at http://jsfiddle.net/vW45s/. A center div with two lines of text, and text on the left and right that abuts the text at the bottom of the center div.
I would like the text to be centered on the page (either the main "hello world" or the second line). Right now I'm using an outer div with a specified width and margin: auto. If the width is too large, the text will not appear to be centered; if the width is too small for the inner text, the divs will be stacked: http://jsfiddle.net/vW45s/1/.
Is there a better way to center these three floated divs, while still getting the left and right text to align with the second line of the center div?
Any tips would be appreciated. CSS is not my strong point, but I'm learning.
Floating and centering doesn't mix well. To be able to center something, the browser must be able to determine how wide the element is. To determine it's width, it needs to know how wide the other floating divs are. Their width depends on the width of the element you want to center.
You have these options:
Try to get it to work without assigning a size. It might be possible. Be ready to spend a day or two on this to get it work with Firefox and Chrome and then one week to fix it in IE. ;)
Assign a width to all three divs
Use absolute positioning instead of floating. Make the center column 100% wide and move the side columns in front of it (one left with left: 0 and the other right with right: 0; both will need a definite width). That works until you start resizing the browser window too much (and the side columns start to overlap with the center).
Use a table or display: table-cell because table cells know about their siblings widths without floating. That means you can assign a width to the two side columns and then let the inner column grow.
PS: Yes, I know about the myth that tables are bad. The myth is a gross simplification. It's bad to nest 500 tables to get the design you want if you can get the same result with two divs and some smart CSS. But that doesn't mean you must not use tables at all.
Have you tried adding width: 33% to the left, right, and center divs along with text-align: center?
What is the best way ?
I had a look around and best I could find was specifying the left and right div widths.
Whereas I want the center div width specified, and the left and right to fit around that.
I don't think you are going to be able to do it without using JavaScript.
Example using jQuery:
$('#div1, #div3').css({width: $(window).width()/2});
I have a bunch of thumbnails that I wish to display in my page. The widths of the thumbnails are not necessarily all the same, and neither are the heights. What I'd like to do is arrange them in a tabular format such that elements line up in neat rows and columns with each "cell" being an equal, specified width.
I do not want to use a table as I would like the number of rows/columns to automatically re-size with a browser re-size.
I've tried sticking the images in:
divs of fixed-width with float left. The problem is because of unequal heights, wrapped divs might "catch" on the bottom of a div on the row above.
spans and lis: setting width: 200px or whatever doesn't seem to fix the width; however they do wrap fine.
If you use display: inline-block on your spans or lis, that should allow you to set the width.
http://jsfiddle.net/bnmPR/
You could use lis and make them display:inline-block;
http://jsfiddle.net/jasongennaro/zDC2w/
Drag the window over to see it work.
borders, width, and height added to show effect
you can still use you divs that float left and add this script: http://masonry.desandro.com/
It will push the divs up vertically so that they are beside each other.
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;"