I have a layout that should have a sidebar on the right hand side of the content area.
The sidebar should display 100% height of its container (#content), but for an unknown reason this content area doesn't have any height, therefore the sidebar isn't appearing.
Any help is appreciated.
Thanks in advance,
Tom
Here's my code:
http://jsfiddle.net/tomperkins/G4f6u/
You are using height: 100% for all elements surrounding it, so it is inheriting the size from the html element. As it doesn't have any size specified, neither does any of the children relying on it.
Use this to make the html and body element fill the window:
html, body { height: 100%; }
I made a few changes dealing with the positioning of the sidebar - which I changed to absolute and added a min-height so that if the contents of it were empty it would still be visible.
Link
Not sure if this is what you were looking for - but it might help.
Set static height on your .content (in px) and you will see the sidebar
Here is an answer from a layman: The problem is that you've got two child <div>s which are both floated, meaning they are outside the regular flow of the document. This causes them to be excluded from the height calculations of their parent, in this case, the <div> with class "content".
You may fix this by adding a <div> after those two floats with style "clear:both" (I believe). This is not the "best" way to fix this particular problem, as it is adding non-semantic markup to your page, but it is fairly easy to understand and implement. Cheers!
Edit: see Container div ignores height of floated elements and then follow the link in the answer to read more.
Related
Here is the link to the portfolio page I'm currently working on in react. When you collapse a div the content gets scrunched and I'm not sure what the solution to this is. I thought it was "white-space: nowrap;" but that doesn't seem to be doing anything for me. I'm sure it's something super simple but can't pinpoint what's happening.
Appreciate any help. Thank you!
https://goresometimes.netlify.app/
This happens as the width of your content drawer is 100% and the content flows dynamically to this width. You'll want to use fixed width like width: 100vw on relevant container elements instead. The actual value needs to be adjusted according to what you need*
remove height:100% on .navbox also remove in media query
I have created a page that has a min-height of 100% with a footer, as outlined http://peterned.home.xs4all.nl/examples/csslayout1.html
It works for the page-filling div, but I would like to have elements inside it which also take up all the height available to them.
Attempts:
Adding height: 100% to them does not work. They will use the parent's height but there are other elements and padding etc so that's the wrong height.
Making them absolute and set top: 0px; bottom: 0px;. This will make the div fill up the entire height, but if content is added the div doesn't get higher.
If this explanation is unclear, I have an example here: http://markv.nl/stack/quine.php
So the parent dictates a minimum height, as does the content. The highest of them should be selected. I've found this a formidable challenge; is it possible without javascript?
Thanks in advance!
It is possible without javascript. But you should not use absolute positioning with this problem. Use this solution to have footer stick to the bottom of the page. And make content div min-height: 100%. With more content it expand and push the footer down and with little content footer will be at the bottom of the page and content div will be pushed up to the footer.
After a lot of fiddling, I am quite confident that what I want to do is impossible. Correct me if I'm wrong.
In my case, it turned out a fix was possible. I used the position: absolute to create the background pattern. Above that, I added the content in a width:100% div to make the page scale.
It'll only work for some applications, but I think a general solution is not possible.
I have a strange problem....
Div should expand to 100% of available space by default, but its not the case.
I don't understand what's going on, even if I put display:block it's behaving as automatic width (relative to content).
I appreciate any help.
Thanks in advance.
http://jsfiddle.net/T3arP/
The effect I need to achieve is let the box with green border absoluted or fixed to top of its container, so you can scroll keywords but title will remain there.
When you absolutely position something (that's using position: absolute or position: fixed) width: auto no longer expands it to the container's width. The rules from which the width is actually determined are complicated*. That's why many people consider it a good practice to set a specific width on those elements (absolutely positioned ones, that is).
*you can find out about those rules at http://www.w3.org/TR/CSS2/visudet.html#abs-non-replaced-width)
As has been said, once you absolutely position an element, it loses the parent's tag association in a sense. So you could do something like this maybe.
http://jsfiddle.net/T3arP/1/
I have a header class which has a background and a header-center class which provides the nav content for the header. My problem is that if the window is smaller than the header-center width, the header background doesn't span the entire top when you scroll over. Stackoverflow seems to have the same problem, try resizing it and you'll see what I mean - they gray background doesn't expand over to the search box. How would I go about fixing this?
Thanks!
if the background is inside a container with a width of 100% and any parent container, including the <body> or <html> don't have a width set in the CSS then you will experience this behaviour. as 100% will be 100% of the browser viewport. Change this to a fixed width and it should stretch to fill the fixed width.
What you need to do is set a display: inline-block on your body tag. If you do this to stack-overflow's site. It fixes the problem.
This method is called "shrink-to-fit".
Here's a fiddle with the problem. DEMO
As you can see when you scroll the div doesn't expand the width of the whole screen anymore.
and here's a fiddle without the problem. DEMO
This has been answered similarly elsewhere by user473598 here How to make div not larger than its contents? you don't technically need the element to be a span though. buti-oxa's answer is worth noting as well as it notes that using this method is some what costly as it means formatting the element at least twice. Since it's being applied to the body it doesn't seem like that bad of a deal in your situation.
I have a page design I'm trying to implement with a header (menu bar) and underneath that a div with static width in css.
This div contains two divs - #contentArea and #menuArea, each of which have a header, middle and footer (header and footer have background images while middle fits to the content).
I've applied float: left and correct static width to #contentArea and #menuArea which works well, but I'd like to force these two to the same height. I looked to inline/inline-block solutions, but these seem to cause a lot of headaches for IE6/7. Unfortunately this design needs to display reasonably (not necessarily perfectly) back to IE6/FF3.
I've put a simple page demonstrating what I'm doing on my home server at http://home.theevilpenguin.org/c-Help/Index
Can anyone recommend a way to accomplish this or something to look into?
Thanks
You could try setting the attribute height: 100%; on the pageMenuArea div. That should make it the same height as the containing div pageBody.