Before someone down votes me for asking yet another centering problem. Please read my situation before judging!
I'm familiar with most common techniques for centering stuff but here is my situation. I have a DIV that must be both vertically and horizontally centered within its parent but it must also be fluid and not exceed the width of 890px.
Max-width achieves the fluid-ness that I want but because absolute positioned elements need width rather than max-width my vertical/horizontal centering breaks. At the moment i'm having to sacrifice fluid-ness over centering (or vice-versa) but I NEED both.
I'd like to keep the content within my centered DIV in view at all times, my current code doesn't do this, it hides the content as the window is made smaller http://jsfiddle.net/cCQ2w/
Can anyone propose a solution that might work for me?
I've tried to solve your problem. See this page: http://jsfiddle.net/PGce2/. So it centered horizontally and vertically and it is "fluid" and not exceed the width of 890px.
You can provide a width of 100% with max-width set to 890px.
I have shown [here][1] the sample of a div with both horizontally and vertically align center.
[1]: http://jsfiddle.net/r2qL5sgj/1/
Related
The flex boxes I have are stretching horizontally and not vertically.I am looking at the code and the work Horizontal is not even in there so I am unsure how it's even doing that.
I asked the professor about it and she gave me a hint
For part 2, the boxes need to expand vertically when hovering. So change the orientation to "vertical" and do adjustments for sizes of height in .flexbox , .flexbox > div, .flexbox > div:hover. The book example adjusts width.
If there is overflow, use overflow :hidden in flexbox div. so text will not overflow when the mouse is not hovering.
Hope the above hints will help.
Here is a link to the actual page. Can someone point out what word I need to change?
http://wmelliott.x10host.com/Fig5_13_Redo/Fig5_13_Redo.html
My Work that's moving horizontal rather than vertical
There is a property flex-direction. As i can see in the image you should use flex-direction:column hope that helps.Note that this property would be used in the parent flex container.
I'm building a website with fluid layout and I want avoid things like setting dimensions. I'm having success in almost everything, but I have a div that doesn't work as expected. See this link: http://cssdesk.com/Bshqe.
I expect that "div_botao_comecar_convite_cadastro_b" were placed to the right of "div_descricao_curta_convite_cadastro_b", but it was placed below this div. I want that the div be placed at left.
As I say, I don't want set a width for anyone div. Sorry for bad english. Thanks in advance.
If you don't want to set a specific width but want the children elements aligned horizontally, use css3 flexboxes -
apply display:flex to #div_elementos_convite_cadastro_b and adjust the other css accordingly....
demo
more about flexboxes # CSSTricks
I'm having an issue with the CSS columns property. Namely, I cannot seem to get the container surrounding them to stretch to the width of the columns as seen here: http://jsfiddle.net/niaconis/43k5s/5/
Seems a lot like the similar issue with floats, only horizontal instead of vertical, but the pseudo-element clearfix doesn't help with this one.
How can I get the container to completely wrap the columns?
P.S. I know about the XY Problem, but this is merely a curiosity. I don't care about achieving the layout from the example. I do care about finding out why the container doesn't stretch to wrap its contents.
The absolute positioning of your element is causing the browser to incorrectly calculate how wide it should be when using the columns property. Remove it and the element stretches as it should.
EDIT:
Per Mat's suggestion below, I fiddled with jsFiddle and came up with the "real" problem.
Positioning content absolutely within the center DIV doesn't produce the required results:
http://jsfiddle.net/yxFQK/22/
In order to position children absolutely, the parent needs to be relative, right? But that messes up the nice left/center/right layout:
http://jsfiddle.net/yxFQK/23/
Any ideas? Thank you in advance.
ORIGINAL POST:
We want to have a fixed-width parent DIV with three dynamic-width children DIVs:
The left and right DIVs should size based on content. The center DIV should fill the space between the left and right DIVs:
[[Left][ Center ][Right]]
(or)
[[Big Left][ Center ][Big Right]]
The center DIV should scroll overflow content (so we can't use overflow: hidden).
Also, we would like to change the parent DIV size (using CSS media queries), and have everything continue to fill in nicely:
[[Left][ Center ][Right]]
[[Big Left][Center][Big Right]]
[[Left][ Center ][Right]]
[[Big Left][ Center ][Big Right]]
Any ideas? Thank you in advance.
I don't have enough reputation to comment on your answer so I'm submitting as an answer. Is this what you're looking for?
http://jsfiddle.net/yxFQK/
Remember it's always easier to make a jsfiddle rather than try to explain visually/conceptually. If you frame the problem well it's easier for people to help you out.
I am facing a problem: I have a div tag and images of 100px width each on both sides of the div. Now I want to add a number of div tags stacked over each other in the middle of it and they have to be fluid (using % width) and relative to support multiple resolutions. How can I do it?
JSFiddle Code
The only way to do that with the center being position: relative is by knowing the height of the center divs and adjusting margin-bottom of the div immediately above. Look at http://jsfiddle.net/XMkDt/10/ (this is only a single line, not very useful), and http://jsfiddle.net/XMkDt/26/ (this is equal height divs, but could be adapted to accommodate different heights; note: on my FF win7 the border's align correctly but the text is tweaked by a pixel and I'm not sure why--but for your purposes, it would work).
Note: you would want to make sure z-index: 1 was set to the div that you are actually showing at the time (as you make your opacity change), to lift it above the other divs.
Something like this? You'll need a hell of a lot of empty spaces though to make them fill the width...
EDIT:
New fiddle with fluid width: http://jsfiddle.net/BXW8y/1/