I've been trying to work around a layout I'm trying to do. I'll show the basic layout I'm trying to do:
Ok, what I did was having the red block as a float: left div and the other section which have the black blocks as a display: block div that holds many display: inline-block. My problem is that it looks similar to what I want, but as the beautifull drawing show, there's space on the right that could be used on certain resolutions, and I was thinking that maybe I could center everything horizontally, but it's not really as easy as I thought.
Maybe I'm trying with the wrong "tooling", do you think this should be done with something like a grid?
I've been trying to search for something that match what I want but I had no luck. Thanks in advance for any help :)
EDIT
By design the black divs have a fixed width, and I cannot change that width, this screen should be able to show whatever amount of divs enter, so in this case we have 3 black divs but it could display 2, 4, depending on the screen, but the particular drawing was to illustrate the cases where it can't show 4 and left a huge white space on the right, thus the need to horizontally center the section.
Imagine posting a question to stackoverflow and resolving all of this making the block div that contains the black divs text-align: center; and fixing it.
That's what I did and worked like a charm <3
Related
Someone has requested this for their website. Basically there are 12 cards and when you hover over a card another div is displayed with some content inside it. The 12 cards need to be arranged in a circle. I've managed to do part of this using CSS rotation - but I can't seem to space the cards out. Margin's don't seem to work, I assume that is down to the transform-origin?
I've shown this is the following Codepen: http://codepen.io/moy/pen/oIsLH
Ideally there should be spaces inbetween and below each card/rectangle. Kinda of like a game of 'clock'.
The only way I can come up with is to make the list-items bigger and then put another div inside which would be the 'card'. This would be narrower than the width of the list-item which would create the margins?
Put the transform origin outside of the 'card':
transform-origin: center 600px;
http://codepen.io/moob/pen/rAzdh
I have an issue where elements in divs seemingly align randomly, not responding to any align tag, and where divs create extra space above or below its element. I'm using the 960 grid system and I have not altered the stock CSS file lest my fingers blow it up.
I've put up a test page here, and please excuse some of the dodgy code :-D
It's still in it's very early stages (as am I), but I don't feel I can move on until I can comfortably understand what is causing the issue.
The best example on that page is the bottom horizontal bar and elements underneath. The bar adds a few pixels of dead space, and the elements below that align to different parts of their respective divs.
Why is it that elements seemingly do not standardise their alignment given no instruction, and what causes extra space again where no instruction was given?
My own thought was to relatively position everything individually, but I'm worried this will cause issues and 'break' the grid. Other than that, I unno.
Thanks
One of the issues is that #horizontal-bar-footer has a height of 25px, which more than the hr line needs. Set the height to 0px, then add some padding-bottom to make the footer have a bit of space above it.
This should bring the "a design by tom rankin himself" part up. For the Facebook like buttons, add this to main.css:
.fb_iframe_widget span {
vertical-align: top;
}
I know there are quite a few questions on this already and i've looked around and everyone seems to say make the div absolutely positioned which is not really what i want to do.
Here's a jsbin minimal mockup which demonstrates what I'm trying to achieve.
http://jsbin.com/uqosa6/
What i want is so that the grey div stretches along side the yellow div.
Does anyone know how one would go about this?
Google around for "css equal height columns". Plenty of methods out there. I've used this one (for 3 columns) a fair bit: http://matthewjamestaylor.com/blog/equal-height-columns-cross-browser-css-no-hacks
In the following jsfiddle I have put some html and some css. I'm trying to not have each element wrap when the screen gets smaller. Actually I'm trying to implement the jqueryUI slider inside of my container. I've tried to implement several css fixes to get each element to line up side by side. However they initially wrap. If you play with the size of the results box for the fiddle below you will see that it does in fact wrap.
http://jsfiddle.net/webdad3/UaQQt/
What am I doing incorrectly
Not sure if I understand your question... You want all those seven-line tables arranged on one row, not wrapping under each other? If so, how about something like
.post-content { min-width: 85em; }
If you want them to stay arranged in a 3x3, maybe display:table is what you need...
I don't usually post a link to my site when asking questions, though I don't see another way around it. I apologize in advance.
I'm having difficulties with a specific page. The page consists of Team Members, where each member is its own DIV (also each team member is coincidentally a separate post in Wordpress).
For some reason, the DIVs wrapping each post are clearing left, but no clearing attributes are assigned!
The page is located here: http://engineercreativity.com/samples/comsense/?page_id=15
Please, if you can help, I'd love to hear any input.
Thanks a lot!
Amit
Divs are floating on horizontal axis and not vertically, What you are essentially looking for is a Masonry Plugin, its for jquery and should easily solve your problem.
http://desandro.com/resources/jquery-masonry/
edit:
your divs are not clearing on left, please see the computed layout
the whitespace is not because of divs clearing left, the whitespace is because of line height. When you are having two floating elements in a row, then the row will take height equal to the bigger element, so essentially each row will have white space below the smaller div. This is similar to a HTML Table.
Akinator's fix didn't work for me in FF on Win XP. If you change your float on the "team-member" class to float: left it will fix it. It is being caused by your static image being float left and the rest of the divs around it being float right.
If I understood your question correctly, you have a margin-bottom of 15px in the class .team-member, this gives and extra white space.
It should be set to 0 (or not set)
Is this what you ment?