I am trying to lay out a web application and running into problems with divs stretching outside of body and html.
http://jsfiddle.net/dex3703/Pftpu/
The pink inner div extends outside of its container when set to 100% height. Why is this and how do I fix it?
#header has a height of 55px.
#topnav has a height of 65px.
#mainsection has a height of 90%.
#drawer has a height of 50px.
You're trying to assert that 55px + 65px + 90% + 50px = 100%, but you can't do that. It will be true for some height (where the height of your whole content is 1700px, see below), but not all heights:
55px + 65px + 90% + 50px = 100%
55px + 65px + 50px = 10%
170px = 10%
1700px = 100%
EDIT: You can achieve what you want by using relative/absolute positions appropriately. See the following jsFiddle: http://jsfiddle.net/Pftpu/12/
Note that this will still be greater than 100% because of the borders around the entirety of the page. You can wrap them in another div, but I wanted to show this example by only changing the CSS properties relevant to the main issue you were having.
You're mixing pixels and percentages, that'll never work.
#mainsection has 90%, leaving 10% for #header (65px), #topnav (55px) and #drawer (50px). At a window height of, say 700px, that leaves 70px - which is a whole lot less then 65+55+50=170px.
You'd need a height of exactly 10x170=1700px for your layout to work - or in other words: never mix pixels and percentages...
Related
What is the difference between height property and max-height property. It is understandable that if we set the max-height to 50px, the height of the element would not exceed 50px. But if we set only the height to 50px, then also the height would remain 50px. What is the difference ?
It is basically what you said. A div with a height of 50px will always be 50px tall.
A div with a max-height of 50px can be less than 50px tall, but when the content inside of it pushes it down, the div will become no larger than 50px in height.
Suppose you have a div block with id my_block. max_height puts a cap on the maximum allowable height that can be set:
#my_block{
width:20px;
height:60px; // You can try to set the height to 60px, but the max-height of 50px won't let you...
max-height:50px;
border:1px;
border-style:solid;
}
Setting the height to 50px is great but it doesn't make adaptable pages.
Instead setting the height to something like 100% means that it will show different heights on different devices with different screen sizes and will be more adaptable.
Setting a max-height setting the max-height to 50px will keep it adaptable but always under 50px.
For example setting the height to 480px would look fine on an iphone however it would look super small on a laptop. If you set the height to 100% though, it will fill the screen for both :D
how do I have two divs with 50% width side by side and a margin without the second div dropping underneath the first?
Div id style is as follows:
#div3{width:50%; float:left; margin: 2px; background-color:yellow;}
Thanks,
Dan
50% + 50% + margins > 100%
Therefore, the elements wrap. You will need to adjust the width or the margins to stay within the 100% limit.
#div3{width:48%; float:left; margin: 1%; background-color:yellow;}
hows that?
You need to change the width of divs to less than 50% because together they have 50% + 50% + 4x margin 2px. Try to change it to an exact value in pixels or f.e. 49%.
The margin will give extra width to the div elements.
You could try setting the divs to 49% each and giving each div a margin auto.
This will centralise the divs and still give you a small amount of margin dependant on the browsers size.
I always cheated and set them both at 49% width, and then added padding (not a margin). But you want some visual colorblocking, right? If you want one to have a background and one to be no background (relative to the rest of the page) set the yellow one at 50%, and the no-color background one at 49%.
You could look into using the new box-sizing property which subtracts the padding from the width instead of adding it on top like you are experiencing:
div {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
Most browsers don't support the entire spec yet but it can accomplish what you want: http://caniuse.com/#search=box-sizing.
Though I believe that you would have to use padding instead of margin to create the spacing.
I have been trying to make fluid boxes that will squeeze when you resize the window.
but this is whats happening:
When I resize the window the 4th box moves to the bottom and then the width of the boxes shrink. why is the 4th box moves under? what am I doing wrong?
Here's is whats happening:
http://www.dinkypage.com/169785
Here's the source:
http://pastebin.com/raw.php?i=4ZbbXxCq
Help Please
It's because you give the width: 25% to all 4 block, but also give 'padding: 10px' to them so obviously the width need to take more than 100%.
You need to either remove your padding or reduce the width of your block less than the total length of your padding, for example 22%
You need to use box-sizing: border-box. This is because the padding of 10px you have assigned to each of the floated div elements are added on top of the 25% width you have assigned, so the actual sum of the width of all four floated divs will exceed 100% (in fact, it will be 100% + (2*10px)*4 = 100% + 80px
The box-sizing: border-box property will ensure that the height and width you have set for the element will also include the paddings (if any) and/or border widths (if any).
In fact, I would suggest Paul Irish's recommendation using:
* {
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
Since you also have your height explicitly declared, you might want to change the height of the containers to reflect the change in the box model. Since you have a padding-top of 30px and now it will be computed as part of the height of 240px, you should change the height to 240px + 30px (top padding) + 10px (bottom padding) = 280px.
I tried height: 100% but that seems to just be the height of the viewport.
My page scrolls, so I would like for the height to be set to the entire window basically.
Here is a live example - http://jsfiddle.net/gtKBs/750/ (trying to figure out the divider height).
Note, I don't want to move the div, I just want to set the height to the maximum height of the window.
Thanks.
Edit 1
Or even better yet, what I would like to happen is as I scroll the divider stays the same proportion and scrolls with me - i.e. say it is total height of 90%, then as I scroll, I always see the space # top & bottom, indicating that it is just 90% height of the current viewport.
Edit 2
This is what I am trying to do - http://jsfiddle.net/ryBZG/1/ A span 2 divs, span2, span9 where the span2 is a sidebar and the span9 is the content of the page. I want to put a divider between them.
Try to change the CSS of your divider div to the following
.divider{
position:fixed;
left:50%;
top:10%;
bottom:10%;
border-left:1px solid white;
}
As your #bluebox has a fixed width: 550px; I recommend to set your .divider's width to a fixed width (260px), too.
HTH
Andy
i am trying to make a list of divs of same size. I need to do it like this. I allign the divs with float left and let's say 5 divs have space in 1 line, the 6th div will go under it. Now what i need to do is the extra space that remains from this 5 divs on the line, should be divided equally between this 5 divs.
Let's say each div has 200px and the screen has 1100px width. The 5 divs now will have to have 25px between them. 200px + 25px + 200px + 25px + 200px + 25px + 200px + 25px + 200px.
Thank you in advance, Daniel.
You can float left an empty div with the width of 25px in your example or you use a percentage 25px for 1100 would be 2%
What I tried is % widths for your divs, and % widths for the margin. Since you want 5 divs per line the most you could do without space between or border is 20%. In the jsfiddle below, I used 17% width and 2% on the margin-left setting. You can customize a first div style to not pad left if need be.
.cell {
height:30%;
width:17%;
background:#ff0000;
border:1px solid black;
margin-bottom:2em;
float:left;
margin-left:2%;
}
http://jsfiddle.net/aKn4n/
You pretty much keep 5 divs on the first row as you shrink and grow the browser window.
I would personally try giving each div a margin like this:
div{
margin: 0px 12.5px;
}
This will hopefully evenly space all the divs.