I'm trying to set the div height of the separate parent columns (and their children) to 100% but it doesn't seem to be working because the div height mysteriously just resets to 0.
The first column has two child boxes (if I'm describing it correctly) which would take 50% (separately) of the page height. The second and third have one child box each which would both take 100% of the page height.
In addition to this I want to add a place holder for the logo on the top left of the page and a footer at the bottom of the page. With all of the above it seems a bit daunting. Would appreciate your advice.
In the end it should look like this:
I've uploaded it here: http://jsfiddle.net/methuselah/qtmJW/
Use height: 100%; on #wrapper
Note : Also remove overflow: hidden; from #wrapper
My fiddle
Edit : New Fiddle
Related
I'm currently working on a webpage.
Basically it's two sections. The main section is taking up all of the screen that the sidebar on the right isn't. The sidebar is fixed and set to 250px wide. The main section is set to 100% width with a margin-right of 250px.
Now I put down a few test blocks to see how it would look, they're 300px x 300px. As you can see, the last block on the top row goes behind the sidebar.
How can I make it go to the next line instead of going behind the sidebar?
Thanks in Advance.
The reason the block is not wrapping is because it is ignoring the margin right.
Without the CSS it is difficult to give an exact solution, but I would suggest a simple solution would be to float the side bar right and the main div left. Then you must remove the margin right on the main div.
This will allow you to keep your fixed pixel size, although using percentage in most causes is more suitable. I hope that helps.
Maybe the reason is width: 100% for the main section?
.main {
width: auto;
margin-left: 250px;
}
From the understanding of your screenshot, I assume you should add "Position" tag to determine the priority of the div and i suggest you to use % instead of px in nested div tags.
http://codepen.io/anon/pen/BFjCE
I am trying to postion the div which is at the bottom of this example to the right of the larger div. They are both being floated left but the 2nd div won't postion next to the bigger one.
I am guessing it is something to do with the sizing and when ever i make it smaller it works.
This image shows what I mean
Well you have answered the question already, size of the div will matter. In case the adjacent divs size sum up more than the available width of the box containing them, it will cascade down. In case you still want them in same row, you would have to give overflow-x
The problem you're having is that the two widths in reality exceed the 100% page width, because you have padding on the widths. The padding is not included in the 60% and 40% widths that you specified for your sections, so the float is going past 100%, and thus the second element has been pushed down.
I did a quit edit to your CSS changing .grid-1-2 from 60% to 50%, and this solved the problem.
.grid-1-2 {
width: 50%;
}
I have overflow-x:hidden placed on the body tag of my page so that any content extending beyond the window will not be visible. No scroll bars show up, however, I can still scroll to the left / right to see the content (kinda defeats the purpose of overflow-x).
-ms-overflow-x: doesn't fix the problem either.
There is a wrapper 900px;
Inside the wrapper, there is a div inside:
width:100%;
padding-right:300px;
position:absolute;
left:200px;
I would like the inner div to hang over the right side of the window without causing it to scroll (and leaving a 200px space the its left).
Any help? Thanks!
Since the width of the div is 100%, there should never be an overflow, since the div will always fit 100% of the viewport (assuming you haven't changed the size of your body tag).
As for the padding, the padding is added on after the width, so you're saying the div is 100% of the width of it's container (the body tag), and the padding is an additional 300px to the right, which will be invisible as it's out of the viewport.
You might want to try giving the div an explicit size width and experiment that way.
It may help to see an example of your markup as well, to get an idea of what you're trying to achieve.
More HTML/CSS would be useful, but given what you have right now, my first thought is that your wrapper is still set to position: static (the default for HTML elements).
If you add position: relative to your wrapper, it will contain the absolutely-positioned element within it, and should constrain it to the overflow restrictions.
Additionally, you may want to look into the box-sizing property and how the W3C box model works. In short, your padding is adding to the width of the element, so it's actually (100% + 300px), which results in a size that is larger than the container.
If you don't want to mess with box-sizing, you can also add max-width: 100% to your absolute div to force it to not grow out of its container.
I'm trying to split a div in two side by side divs. I know that has several examples here, but I already searched and not found one that permit that the divs take all available space in vertical, without any content.
Take a look http://jsfiddle.net/kpDDM/3/
To set a percentage height to your divs, their parent element must have a specific height. In this case it appears you want it based on the viewport height. To achieve this, every ancestor div must have a height of 100%:
*, html, body, .parent {
height: 100%;
}
JS Fiddle: http://jsfiddle.net/kpDDM/6/
Add within your div tags. Because they're 100% rather than fixed pixels, they need something inside to make them visible.
If you want to make the div tags 100% of the page, then you need to state the page is 100% (so the div tags understand what 100% is).
* { height:100%; }
Changing the body and html tags to 100% is not necessary.
Your parent divider takes a %height even though it's parent container, body, does not have an explicit height amount. This infers that your parent divider overrides with height:auto instead, leaving you without the height you wish.
You'll need to declare a fixed height for parent if you wish for this to work. Modern browsers today do not support default explicit height amounts for the parent body.
Thus, you'll need to make sure you explicitly define your html and body dividers heights like so:
html, body {
height:100%;
}
Enjoy and good luck!
There's lots of questions on SO related to this, but the ones I scanned are all for detailed specific situations. What I want to know is, at a conceptual level, what does it mean to say:
<div style='height:100%'>
How high is 100%? 100% of what?
[EDIT]
Followup question: If 100% represents the height of the parent, but the parent is <body> and has no height other than the height of the div, then what does it mean? It seems recursively defined.
100% of the parent container's height.
See here: http://jsfiddle.net/6VRn6/
If you want to use this method to make the div 100% of the page's height, you have to specify the height as 100% of the body and html as well.
body, html {
height: 100%;
}
When you don't specify a html or body height, their heights are the sum of the heights of the elements in it.
Updated demo showing this. We have a 200px div with 2px borders totaling 204px and then a 40px status div. The body height should be 244px. Now, if you add the CSS above to the page, the height will be the height of the bottom right quadrant of the jsfiddle. Try adding it and running the code again. Then resize the result pane and run it again to see the height change accordingly.
100% of the offsetParent. In most cases, that's the document. It can also be an element with position other than static, or a component of a table.
The height:100% means :
Make that div big as the parent!
It just means 100% of the div or class or tag it is enclosed within. Try having an idea somewhat this:
{--parent loop
{
..height 100% of above loop
..
}
}