I want to add blank space in between this two columns, and I have tried the padding way with inner , used offset, etc. I can't figure it out.
I am not fuzzy about the amount of space, just that it is clear that there are two columns.
Another important thing, I want it to be centered in the screen. I've been able to get the blank gap with it not being centered, but that doesn't work for me.
http://www.bootply.com/eUwlCeISme#
Thank you!
You want to use a margin to make some whitespace on the sides of the columns, which you cannot do with display: table-cell. Use something like display: inline-block for .row2 instead, apply a margin to .row-centered like margin: 0 2px; or something, and then use a different method to keep the column heights the same, for example min-height: 225px;.
http://i.imgur.com/zK2uVkL.png
Related
I am using Semantic UI grids, I have two columns and they have padding in between them. I have a padding which is good for most cases but I want to remove it in this case, how can I achieve this?
I want both the menu to be attached.
Without the code I can only assume you're talking about the two areas titled Shareito. If you want to remove the space between them without messing up the padding layout of the whole page you could add a negative margin, for example:
.pnl1 {
margin-right: -15px;
}
.pnl2 {
margin-left: -15px;
}
there are many other ways of doing this be it playing with the padding and margins, making the position absolute, etc etc... experiment.
I have some very simple sub-navigation that I'm trying to build across the top of the content area within my web site, but CSS doesn't seem to have any simple solutions for such a common problem: I want either 3 or 4 equally spaced DIVs across the top of the page.
1) e.g. 3 Variable-Width, Equally-Spaced DIVs
[[LEFT] [CENTER] [RIGHT]]
2) e.g. 4 Variable-Width, Equally-Spaced DIVs
[[LEFT] [LEFT CENTER] [RIGHT CENTER] [RIGHT]]
My solution for the first problem with only 3 DIVs was to float the left and right DIVs, and then assign an arbitrary size to the middle DIV and give it "margin: 0 auto". That's not really a solution, but assuming there are no changes to the navigation, it gives a rough approximation of what I want the results to be.
The solution I have for the second problem with 4 DIVs is to simply center a DIV in the same way as before, but then float two DIVs within that, e.g.
[[LEFT] [[LEFT CENTER] [RIGHT CENTER]] [RIGHT]]
But again, this requires applying an arbitrary size to the middle DIV for alignment, and if any language or image changes are made to the site, alignment values will have to be recalculated. As well, it's simply an over-complicated solution that requires merging structure with presentation.
Any help is greatly appreciated.
EDIT 07/20/2012 5:00PM
Alright, I put the "table-cell" solution into place using percents, but I encountered another issue within my slightly more complex implementation: the issue at hand is that each DIV I was referring to is actually a container for two more DIVs which are icon-label pairs, inlined either by float or by display:inline-block.
e.g. http://jsfiddle.net/c3yrm/1/
As you can see, the final element in the list is displayed improperly.
Any help is again greatly appreciated!
EDIT 07/20/2012 7:16PM
Final solution with arttronics' help: http://jsfiddle.net/CuQ7r/4/
Reference: jsFiddle Pure CSS Demo
The solution was to float the individual breadcrumbs while using a simple formula to determine the percentage of breadcrumb width based on the number total breadcrumbs.
You could use percentages, then it just comes down to simple math:
[[LEFT=22%]2% margin><2% margin[LEFT CENTER=22%]2% margin><2% margin[RIGHT CENTER=22%]2% margin><2% marginRIGHT=22%]]=100%/??px
You could then specify a width for its container and use
display:inline;
to keep them inline.
Note: If you use borders to see what the divs are doing that will add space unnaccounted for so you would need to reduce your elements width by 1% or so OR just change their background colors.
ol {
width: 400px;
/*width: 800px;*/
display: table;
table-layout: fixed; /* the magic dust that ensure equal width */
background: #ccc
}
ol > li {
display: table-cell;
border: 1px dashed red;
text-align: center
}
like here: http://jsfiddle.net/QzYAr/
One way I've found to do it is using flex boxes (or inline-flex).
Here is a great explanation and example of how it can be done.
I think in the future, flex boxes will be the superior way of handling this sort of thing, but until other browsers catch up with Mozilla's way of thinking for how to use the flex-basis attribute (with min-content, max-content, fit-content, etc. as values), these flex boxes will continue to be problematic for responsive designs. For example, occasionally the inner content (a_really_really_long_word) can't fit in the allotted space when the window is squished down, and so sometimes some things might not be visible off to the right of the screen if you're not careful.
I think perhaps if you make use of the flex-wrap property, you might be able to ensure everything fits. Here is another example of how this might be done (in Mozilla browsers anyway).
I tend to use flex boxes for letterheads or tables where the width is fairly fixed (not too small) because they usually space themselves nicely; I tend to use nested float and inline-block objects for websites where the content must squish down very small (as suggested in some of the other answers here).
http://jsfiddle.net/ADLrh/
Hopefully you can see what I'm after. The three 'fillers' on the top row have sunk, upsetting the pyramid-like formation. Any idea what's causing this?
EDIT: I should also add that the method I go for needs to be flexible because potentially any filler could be a like button and the actual pyramid is quite a lot bigger.
Indeed, like Guy suggested, you're going to want to use the float property rather than display: inline-block, because inline-block is pretty finicky for vertical alignment when using different types of elements next to each other, with whitespace between them.
However, to keep the "pyramid" form, you'll want to wrap the buttons in another div that IS set to display: inline-block, to allow the whole row to center in the current parent div.
Like in this example: http://jsfiddle.net/syd8L/
Remove the white spaces between the HTML elements. This is not however the case where you should use display: inline-block;. Analyze this example. You could use float instead, then you wouldn't need to worry about whitespaces between HTML elements.
Easiest way would be to add some relative positioning to the buttons on the first row, like this:
http://jsfiddle.net/ADLrh/1/
Where you have display: inline-block, you should also add vertical-align: top.
See: http://jsfiddle.net/thirtydot/ADLrh/2/
i'm really stumped by this current page i'm working on. The layout is a grid.
The page is dynamic so the cells (divs) will be shifting about or even disappearing over time.
Because the location of the last cell will be changing, i want this last cell(div) to always extend horizontally across the remainder of the containing div. The point being to create a gray top border.
here's a link, it's obvious to see what i'm trying to do.
http://www.tomcarden.net/ug-post.html
i thought it would be easy. i thought the last cell (div) if not given a width attribute would naturally take up the remaining space in the row but it's not (?)
the class of this div is .last-cell.
i tried making the width:100% but that doesn't work. that breaks the page. the cell clears and starts a new row, i tried clear:none so it would stay floated to left but that didn't work. this can't be that hard...?? can anyone lend some advice on this?,
big thanks in advance.
Quite tricky, but try adding this:
.last-cell {
width: 100%;
margin-top: -153px;
}
The width: 100%; will indeed make it into one row, bumped by the last picture, but with the negative margin you push it back up. To keep the image on top, apply:
.grid {
z-index: 100;
}
Why would the top two rows of my site load like this and the bottom row perfect?
Bottom Row:
HTML:
https://gist.github.com/1228291
CSS:
https://gist.github.com/1228301
It really depends on how you want to achieve vertical alignment. For instance, you could try something like:
.product-grid .name { height: 40px; }
But this would give you some whitespace between the title and price when the title is only one line.
It looks to me like it's off because the "cells" in the top row have item names that span two lines (thus pushing your buttons down for those items). With the "cells" on the bottom, the images above appear to make them wide enough that the item names fit, if this wasn't the case, that row would also suffer the same problem. You could try setting the names to have a specific height (as #brianreavis suggested) or perhaps adding non-breaking spaces ( ) instead of regular spaces) to the names would force the name div to push out the side.
On a side note, you don't have to use two ID's in a CSS selector (unless you're doing it for specificity reasons). Since the IDs are unique to the whole document, simply calling #welcome instead of #header #welcome should be sufficient.
Because your product titles have different number of lines.
Maybe this structure can inspire you:
http://jsfiddle.net/JeaffreyGilbert/EW6Ax/