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
Related
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
Sorry for the unclear title,
I just can't figure out exactly what I am asking..
I am learning a lot by seeing the source and "inspecting elements" on any website.
while doing so in this site (where I am learning HTML and CSS) I just failed to understand what makes the <aside> on the left have 100% height of the body.
it has no rule for "height", and it's content is not big enough to make the div expand so much... (it's content covers maybe 10th of the total height..).
to make it clear which part I am talking about, take a look at the following pictures:
this pic is just to show you where in the doc to look for:
and this pic shows the aside in the rendered page (the aside goes all the way down to the bottom of the scroll... please see it in the site to understand a little better :
hope you can help me figure it out :)
Thanks a lot
Note that they are using flex-box.
Specifically, the "wrap-micro group" div is the container, and the aside & section elements share the space inside that container.
By default, flex-box is set to hold the inner elements in a row, and the elements will take up all the space provided. this is why you can't see any css properties that hint to what's actually happening.
You can learn more about flex-box through these excellent guides:
https://scotch.io/tutorials/a-visual-guide-to-css3-flexbox-properties
https://css-tricks.com/snippets/css/a-guide-to-flexbox/
So I have a post-view that I can't get to work properly, and flexbox seemed like the answer from heaven that I was looking for. Except, I can't seem to figure it out properly no matter what...
If you look at this code, there's two vertical divs that should both stretch as more content gets added to either. The div where more content appears grows accordingly, but I want the other div to match in length, and so the bottom edges to be aligned to the bottom of the flex box. The repeating images behind the two founder buttons and the "LOTS OF TEXT" should then fill up empty space down to the bottom where the bottom-edge images are.
I've been at this for a good week now and can't figure it out... I'm sorry if this is a really simple thing or I'm being dense about css, I'm still learning. Any help would be greatly appreciated.
In your .forumviewright class, add this property:
height: 100px;
That brings the baselines together.
Just tested it in Chrome Dev Tools. It works. It also works in FIDDLE. But it doesn't seem to work in the CSSDesk sample you provided.
Whether or not this is the permanent solution you're looking for, you can let me know in the comments below.
EDIT
Your question begins with:
Can't get CSS flexbox to expand properly.
Actually, the flexbox is working fine. Both columns are binded to each other and expand equally, as per the flexbox rules.
If you highlight the child divs (.forumviewleft and .forumviewright) in Chrome Dev Tools or Firefox Inspector, you'll see that both columns are equal height and track each other regardless of content size on either side.
To illustrate this, I've added a background color to each column div so you can see that the flex is working properly. No other changes to the code were made. In this example, no matter how much content is placed in either column, both color-coded columns remain equal height.
https://jsfiddle.net/eympj0yq/2/
Of course, the real problem is that the child container boxes inside these columns aren't tracking each other.
This will require some fundamental adjustments to your code. For a better understanding of this problem and how to fix it, see this post:
Height 100% on flexbox column child
Hope this helps. Good luck!
I'm sorry if the question's title doesn't really make sense but it's a problem sort of difficult to describe with words when English is not your first language. The best way would be to show what I mean by a fiddle.
jsFiddle - problem
In this example I have a container div with overflow: hidden and some top padding. The relatively positioned div with content class in the project is scrolled by jQuery, but it's not relevant now. Let's say that the example shows a situation where the content has been scrolled down a little.
The div has moved upward and sadly the content "ignores" the container's padding, which is correct and expected html behaviour. However in this case I have to "prevent the padding from disappearing". The html structure must remain the same - the content div must be directly inside the container.
I came up with a solution using another div posing as "padding" by using absolute positioning and z-index.
jsFiddle - solution?
My question - is there a prettier way to achieve this result?
The only improvement I'd suggest is from a visual/design perspective:
Instead of having the solid white #fff in your mask class, perhaps an image with a gradient from transparent to background colour (white, in your case), so the text looks like it's going behind something rather than just getting "cut off".
Have uploaded a fiddle here: http://jsfiddle.net/kdFgn/30/
I have a structure that I want to repeat with different content each time. Here's the code (for a Web version of a script):
<div id="1_0" class="lineblock"><div class="whosays"><span>CHARACTER:</span></div><div class="whatsaid"><span>Line...</span></div></div>
The content of the <span> in the whatsaid div changes. Sometimes it fill fit on one line; sometimes not.Using static heights, it looks like this.
So, I want to change the height of the lineblock div and the whosays div based on how tall the whatsaid div needs to be.
Is there a way to do this? Any kind of scripting isn't really an option in this case.
I've tried various combinations of height:auto and height:100%, but nothing's worked.
Thanks in advance!
Graham's links are probably more interesting than what I used here. However, that's works. You can see a demo here : http://jsfiddle.net/uwf8U/1/
The lineblock div will expand to the height of whatever content is inside it. That leaves setting the height of the whatsaid div as the main challenge.
Essentially what you have here is the classic "CSS Equal height column" problem, which as been discussed in several places. Check out the following links:
http://www.alistapart.com/articles/holygrail/
http://www.alistapart.com/articles/fauxcolumns/
http://matthewjamestaylor.com/blog/equal-height-columns-cross-browser-css-no-hacks