I'm trying to build a layout that roughly looks like this JSFiddle. Now, the problem is:
I have this two wrappers inside my container, one is for the sidebar and the other (wrapper-inner-container) is for the page content itself, both are floated to the left and the wrapper-sidebar has a mechanism to hide and show.
The thing is, when the wrapper-sidebar is visible, the wrapper-inner-container, which has a width of 100vw, should stay floated to the left , on the same line as the wrapper-sidebar and the parent container should remain with the same width of 100vw and simply hide the horizontal overflow. But, as you can see in the JSFiddle, what happens is that since both wrappers in the same line exceed the width of the container, the wrapper-inner-container jumps to the next line, when it was supposed to stay on the same line as the wrapper-sidebar and remain with a width of 100vw. How do I achieve that?
If your purpose is for wrapper-inner-container to take up the remaining space with wrapper-sidebar visible or not. Then you can do this be leaving out the width of wrapper-inner-container and removing float: left. It will then automatically size to 100% available space because it's a block element.
https://jsfiddle.net/bdxs8x9r/4/ (updated)
Also here's an example of how you can achieve it a bit more consistently with flex-box:
The trick here is that wrapper-sidebar has a fixed width and wrapper-inner-container flexes to it's remaining space in the container.
https://jsfiddle.net/bdxs8x9r/3/
To do this, you must be creating a parent container which contains the main container, which you'll set its overflow to hidden and its width to 100vw
then set the main container width to 100vw plus the sidebar size, so this way the sidebar will have the space to push the inner-container into
<style>
.overflow {
width: 100vw;
overflow: hidden;
}
.container {
width: 115vw;
}
.wrapper-sidebar {
float: left;
width: 15vw;
}
.wrapper-inner-container {
width: 100vw;
float: left;
}
</style>
<script>
// do your animation code here
</script>
<div class="overflow">
<div class="container">
<div class="wrapper-sidebar"></div>
<div class="wrapper-inner-container"></div>
</div>
</div>
Related
I have two child divs side by side in a parent div. Left child div has a long list as content. It should be vertically scrollable. Right child div content will be added/removed dynamically. Its height keeps changing.
So I want left child's height to be adjusted to match the height of right child.
Is this doable with CSS
Html
<div id='parent'>
<div id='left-kid'>
Very Long content
<hr>
Overflow: Scroll
</div>
<div id='right-kid'>
Vertically Growing Content
</div>
</div>
CSS
#left-kid {
float: left;
overflow: scroll;
}
#right-kid {
float: left;
}
i think it's not possible, because the height of the right kid is dynamic, so take this height with JS and specify this height on the left kid:
$("#left-kid").css('height', $("#right-kid").height());
You can try to experiment with display:table
#parent{
display: table;
}
#left-kid, #right-kid {
display: table-cell;
}
This will make both columns of equal height regardless of size increases.
Is this doable with CSS
No. Like Bojan Petkovski commented, you need to somehow specify a height, otherwise the content will just expand the container.
#parent > div {
height: 100%; // or some other height
}
The only other way to do this would be with javascript, which can determine the height each time you dynamically change the content like AnTSaSk's answer.
I have two divs horizontally aligned that will wrap (their size gets smaller until the wrapping occurs at some point) when resizing the browser window. The problem is that these two divs won't automatically fill the gap they leave behind
Both have width 48 %, min-width 400px and are floated to left in a div container
Example
DIVCONTAINER
DIV1 ==> There's huge space on the right side because div1 won't auto-stretch after wrapping
DIV2 ==> There's huge space on the right side because div2 won't auto-stretch after wrapping
Is div auto-stretch even possible when wrapping takes place with resizing?
EDIT:
Here's a demonstration of the problem
JSFiddle
<div class="wrapper">
<div class="div1"></div>
<div class="div2"></div>
</div>
.div1, .div2 {float: left; width: 50%; min-width: 400px; height: 100px;}
.div1 {background:red;}
.div2 {background:blue;}
Floated divs will not be able to dynamically occupy the remaining width of a container - they are no longer part of the normal layout of the document.
You can achieve what you're looking for by removing your floats, and then using
table display properties, or
flexbox (if you don't need to worry about <= IE9)
CSS-Tricks' Filling space in the last row will guide you in the correct direction for the flexbox solution.
May be it's because of min-width:400px
If you resize the browser below 800px, that width 48% will not work because of min-width:400px
If you want to wrap both divs into wrapper then wrapper should have 800px or higher than 800px width.
Play with fiddle you will come to know what is happening...increase wrapper width to 800px...
If you take a look at this jsfiddle example: http://jsfiddle.net/2YbpZ/
You can see that both the sidebar and content elements stretch to the bottom of the view-port. This is what I want.
However, when given some content that stretches the page and requires the user to scroll: http://jsfiddle.net/p6qGg/
The sidebar and content divs cut off at the bottom of the view-port. I know why this happens, because 100% refers to the entire height of the parent element which in this case is the view-port, but when I change the markup to have a wrapper div surrounding the two elements and have min-height: 100% this happens: http://jsfiddle.net/Lr6k9/
Similarly, if the content is no longer long enough to not fit the view-port, the sidebar and content divs act as if they have no height assigned at all: http://jsfiddle.net/xsHHv/
So my question is how can I have the sidebar and content divs be the height of the view-port if the content doesn't stretch off the page, or have them the height of the content if it does?
The trick is to give your elements a huge padding-bottom, with a corresponding negative margin-bottom:
html, body {
height: 100%;
}
#wrapper {
min-height: 100%;
overflow: hidden;
}
#sidebar, #content {
float: left;
padding-bottom: 999em;
margin-bottom: -999em;
}
Here's your fiddle: http://jsfiddle.net/Lr6k9/4/
I want to know how this theme gets the effect of the items in the lower right disappearing as the screen gets smaller.
http://themeforest.net/item/jr-photography-wordpress-theme/full_screen_preview/1163891?ref=takeaction
I have items in the lower right but when the screen is too small They move down instead of disappearing like this. Any comments or links how to get this effect would be great! Thank you.
Not media but rather CSS floating solution
I haven't checked source code of the particular site, you're linking, but I've created a simple CSS solution that hides right-hand side elements when there's no more space for them because of the left hand side elements.
Here is a JSFiddle. Resize the window width (or drag the columns in to resize content quadrant width) so the two elements become too wide for the container width. The right-content will automatically disappear.
What it does?
You have footer container with two additional containers, floated left and right. All three of them must define the same height while:
footer defines overflow: hidden so anything that goes beyond lower visible viewport will not be displayed.
other two are then just floated within to left and right
Floating then makes care of everything. When there's not enough space to accommodate floated elements by with they start to render underneath where there's enough space. But displaying underneath hides them because container element has a limited height.
<div class="footer container">
<div class="left container">left content</div>
<div class="right container">right content</div>
</div>
And simple CSS (including just relevant settings):
.container {
height: 2em; /* all containers have the same height */
}
.footer {
overflow: hidden;
}
.left {
float:left;
}
.right {
float: right;
}
I have never thought that writing a simple two column layout is so complicated using css....haha
What I want to do is the following:
When the height of the content div exceed the height of screen size, scroll bar exist only in the content div. The users can only scroll the content div but the sidebar keeps static
The two columns should have the same height
My layout is:
<---------------container------------------->
<-------------------header------------------>
<-----sidebar-------><---------content--->
<------------------footer------------------->
<---End of container------------------------->
Here is my css file:
http://137.189.145.40/c2dm/css/main.css
#WorldContainer
{
width: 1000px;
margin: auto;
overflow: hidden;
}
.ContentColumn
{
float: left;
width: 500px;
overflow: auto;
}
<div id="WorldContainer">
<div class="ContentColumn">
Content goes here!
</div>
<div class="ContentColumn">
Content goes here!
</div>
</div>
That will give you a page where the main div cannot scroll but the two div columns can. They will be side by side. You question wasn't exactly clear so hopefully this is what you were after.
EDIT: In response to you showing the example site.
Your problem is really simple.
All of your divs have a height rule of height: 100%;
When you use percentage height, you are making it a percent of the container it is within, i.e Its parent container. It is NOT a percentage height of the entire window.
Every container is specifying a percentage height so the result is a height of 0.
Give your outermost div a fixed height and the problem will be resolved.
Additional Edit:
If you are concerned with making sure the outermost div always stretches to the bottom of the window then this is a css solution using absolute positioning:
#OutermostDiv
{
position: absolute;
top: 0;
bottom: 0;
}
Using this approach still causes a calculated height even though the outer div doesn't have a hard coded height. This will allow you to use percentage heights on your inner divs and maintain a outer div that stretches from top to the bottom of the visible window.
You'd have to set your container element to overflow:hidden;, and your content div to overflow:scroll; (and possibly do overflow-x:hidden; to hide the horizontal scrollbar). The problem with this is that if your sidebar & content are going to be the same height, then you would have to have TWO scrollbars - one for content, and one for sidebar.
You could probably solve this by using another container element around just sidebar & content, and setting the overflow: scrollbar; overflox-x:hidden; on it instead of sidebar/content.
You can also use display:table and display:table-cell to create columns if you're facing difficulties with float. Here's the CSS:
#container
{
width:960px;
margin:0;
padding:0;
display:table;
}
#sidebar
{
width:300px;
display:table-cell;
}
#content
{
width:660px;
display:table-cell;
}
and the HTML is:
<div id="container">
<div id="sidebar">
<!-- Sidebar Content Here -->
</div>
<div id="content">
<!-- Content Here -->
</div>
</div>
Hope this solves your problem. But display:table doesn't work in some old browsers.