I'm trying to build a page with 3 columns, the left and right columns must have a fixed width (for example 100px) and height must fixed too (for 100% of screen) and you can't scroll them. The center column must occupy all the remaining space and you can scroll this.
<div class="right"></div>
<div class="center"></div>
<div class="left"></div>
https://jsfiddle.net/2L9686o0/2/
- Red div should occupy the entire area and not as in my example.
I hope you understand what I want to do.
Try this: https://jsfiddle.net/2L9686o0/3/
Basically you need to ensure your body and html elements have 100% height, and then give your centre div a min-height of 100% too.
It doesn't need a fixed position or anything like that, just these styles:
.main-center{
background-color:red;
margin-left: 240px;
margin-right: 240px;
min-height: 100%;
word-wrap: break-word;
}
I also put top: 0 on your left and right divs to ensure they right at the top, else the right-hand one gets pushed down by the content of the centre.
Edit: To force long un-broken text to wrap, add word-wrap: break-word; to the .main-center class. I've updated the example above, and the JS Fiddle: https://jsfiddle.net/2L9686o0/5/
Related
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>
I've been strolling around the internet for a while but I can't seem the find a fix for my problem.
Perhaps you could help me out.
The issue
I am trying to wrap a div around 2 vertically stacked divs. At this moment I have a top div, which is viewport filling (100% height, 100% width) and a bottom div, which is of variable height but with a 100% width.
The top div serves as a container for horizontally and vertically aligned content.
As soon as I apply a wrapper to the two divs, the top one collapses. It stops filling the entire viewport height.
The example
The current HTML looks like this:
<div id="top">
<div id="top_content">Top content</div>
</div>
<div id="bottom">Bottom content</div>
With of course a JSFiddle: http://jsfiddle.net/4u4nqrcv/
The HTML I need looks like this:
<div id="wrapper">
<div id="top">
<div id="top_content">Top content</div>
</div>
<div id="bottom">Bottom content</div>
</div>
Also with a JSFiddle: http://jsfiddle.net/ggsztx78/
You can clearly see top div collapsed
The question
How can I wrap the 2 vertically stacked divs, maintaining the viewport filling height of the top div? I just need to find out exactly what CSS I should apply to the wrapper and possibly the 2 wrapped divs
You can use the viewport unit vh. 100vh = 100% of the viewport height.
http://jsfiddle.net/ggsztx78/3/
#top {
width: 100%;
height: 100vh;
background-color: #f4f;
display: table;
}
Support isn't that bad if you are not using vmin or vmax.
Working JSfiddle
It's easy, you did not set any css parameter to the wrapper, and it needed to also have height and width of 100%, margin and padding set to 0.
#wrapper{
width: 100%;
height: 100%;
margin:0;
padding:0;
}
You need to also give the wrapper a height: 100%.
By setting height: 100% you tell an element to become 100% of the height of its parent. Therefore you need to give all ancestors of the #top-content an height of 100% to make the #top-content take up 100% of the screens height.
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...
I have two div's, one nested within the other. The main div has the css property max-width:100% so that it cant go wider than the users screen. Now, the second div is very wide (1400px), and contains lots of other elements, but not all on the edges need to be seen. So, how (ideally without Javascript) can I have the second wide div centered within the first div, so that when the users screen is only 1000px wide, instead of the first 1000px of the wide div being shown and the remainder cropped, have 200px cropped from the left and right, with the 1000px being taken from the center?
CODE
<div style="max-width:100%">
<div style="position:relative;width:1400px">
<!-- PICTURES, LINKS, ETC -->
</div>
</div>
You can achieve this with a technique called shrink wrapping. You will need an additional div wrapping the large inner div that pulls it relatively to the left. The inner div can correct itself and pull itself halfway over to the right compared to its container. This should have the effect you seek.
<div class="max-width-container">
<div class="shrink-wrap">
<div class="very-wide-inner-div"></div>
</div>
</div>
.shrink-wrap {
float: right;
position: relative;
left: -50%;
}
.very-wide-inner-div {
position: relative;
left: 50%;
width: $some_huge_number;
}
http://jsfiddle.net/2j2mh/
assuming your html looks something like this:
<div class="narrow"><div class="wide">blah de blah</div></div>
think you may be able to do it with something like this:
.narrow {width:1000px; overflow:hidden;}
.wide {width:1400px; position:relative; left:50%; margin-left:-700px;}
the margin-left is half of the width of the .wide div
if you inspect the element in the fiddle you will see it is sat in the middle
http://jsfiddle.net/peteng/dtNKr/4/
I'll try to explain this as best as I can ;)
Basically, I have a sidebar <div id="sidebar"></div> which is floated to the leftside and has fixed position. I planned to have another div just after it that will contain the content, but the problem is that, because sidebar has fixed position the div that I expect to be after it (to the right side) is appearing behind sidebar. This is an issue, because I need to use margin-left: 310px (310px is a width of sidebar) to make another div appear after the sidebar, so instead of occupying 100% width left on the page without a sidebar's 310px it occupies full page and causes align problems.
It's hard to explain, but if you visit my page http://freshbeer.lv/development/en/ you can see white div, it has margin-left: 310px; and width: 100%; inside it there is a grey div with width:700px; and margin: 0 auto;. I expect grey div to be aligned in the middle between 2 images at the background, but as white div is occupying more space than needed it doesn't happen. Could anyone suggest a solution please?
Maybe I am misunderstanding your question, but in #container you can either remove width: 100% or change it to width: auto.
The problem is that it is getting the width of the parent container (which if you go far enough back is taking the width of your browser window) and then adding the margin. So it is 100% + 310px. Hence the reason it is 310px wider than your browser window.
Try this. First, make sure that your side bar is first in your script. Then, do not set the width of your main section. Instead, just say display:block. So something like this:
<html>
<body>
<div style="width:310px; float:left; background:#dddddd; height:500px;"></div>
<div style="margin-left:310px; display:block; background:#ff0000; height:500px;"></div>
</body>
</html>
In the above example, the top div is your side bar, and the second your main body section. I just added the heights so I could see the columns during testing.