I have a setup that looks like this:
<html><head><style>
table{
height:100%;
width:100%;
padding:0 20px 20px 20px;
min-height:540px;
min-width:720px;
}
tr.head{
height:35px;
background:black;
}
td.left-bar{
background-color:green;
width:220px;
}
td.spacer{
width:10px;
}
td.right-bar{
background-color:blue;
}
div.sb-top{
height:20px;
background-color:red;
}
div.sb-bottom{
height:100%;
background-color:yellow;
padding:10px;
}
</style></head><body>
<table>
<tr class="head"><td colspan='3'></tr>
<tr>
<td class="left-bar"><div class="sb-top"></div><div class="sb-bottom"></div></td>
<td class="spacer"></td><td class="right-bar"></td>
</tr>
</table>
</body></html>
However, when I do this both the height and padding on sb_bottom cause it to overflow past the cell. I'm not so concerned about the right/left overflow, but I absolutely must fix the bottom overflow. How can I do this? Thank you!
You could always put an inner wrap inside of sb_bottom and give that the padding. That way it won't overflow.
How about moving the padding to the body instead of the table?
If that does not work, you can put the table in a div and give the div the appropriate margins instead of a padding.
get rid of your height and width 100% requirements... it will spread on its own. also, your min-heights and widths may be playing factors here... you can get rid of those too
This is probably just a hack, but I added padding-bottom to the left-bar and it looks okay.
td.left-bar{
background-color:green;
width:220px;
padding-bottom:40px;
}
I loaded up the sb-bottom div with text and it scrolled off the screen, but I wasn't sure if you wanted the height to be fixed or to be scrollable.
All you need is box-sizing: border-box; on div.sb-bottom.
This would make sure height:100% includes the padding as well in the parent content height. Otherwise, actual height or the div will be height of the parent + padding which will always go beyond the parent content height.
Related
I'm tearing my hair apart here. Does anyone know how i can get a div to fill the screen both horizontal and vertical? I can make it fill it horizontal but it just refuses to fill vertical unless a specify the width in pixels. What am I doing wrong?
This is what I want to accomplish, without have to scroll to get the bottom-padding:
Thank you!
HTML:
<div id="main">
<div class="main_content"></div>
</div>
CSS:
#main {
margin-left:auto;
margin-right:auto;
height:100%;
width:auto;
padding-left:40px;
padding-right:40px;
padding-top:40px;
padding-bottom:40px;
}
.main_content {
width:auto;
height:100%;
background:#fff;
}
When you set a percentage height it is related to its container, that must have an explicit height. If you set height: auto, the container will take the height of its content. The parent of the div must have an explicit height property, you can set in 'px' or in 'em'. You can also set in 'vh'
you can add height:100vh;
Demo : http://jsfiddle.net/6yLhk17h/
Add the below code in your style sheet.
html{
height: 100%;
}
I'm using the ASP.NET template and trying to set my content to take the full height of my window, but I can't achieve it. I have one container and 2 sibling divs inside it. Setting the bottom div to height 100% causes it to overflow the container.
I am using Bootstrap too.
I can only lower it's height percentage to lower value, but isn't there a better way?
I added a screenshot and a fiddle:
http://jsfiddle.net/ob1g0752/
HTML:
<div style="height:100%; width:100%; border-style:solid; border-width:2px; position:absolute;">
<div style="margin:5px; width:100%; border-style:solid; border-width:2px; border-color:pink;">
test
</div>
<div style="height:100%;width:100%; border-style:solid; border-width:2px; margin:5px; border-color:yellow;">
test
</div>
</div>
<footer style="display:block;">footer</footer>
CSS:
body
{
min-height:100%;
min-width:100%;
}
html
{
height:100%;
}
EDIT
Sorry, I published an old version of the fiddle, this is the updated one. Watch the yellow border overflows the container.
http://jsfiddle.net/ob1g0752/4/
Removing the margin and padding will help, you can also add box-sizing: border-box; to account for borders and padding when setting widths. Also I'm not sure if you wanted to make your footer stick to the bottom of the page, but I did that along with the other fixes in this fiddle:
http://jsfiddle.net/ob1g0752/2/
You need to add
margin: 0px;
padding: 0px;
to html and body.
Also, your div's have a 2-pixel border and 100% width. This forces a horizontal scroll-bar.
I made this:
HTML:
<body>
<div id="header" >
</div>
<div id="main" >
</div>
<div id="footer" >
</div>
</body>
CSS:
body
{
margin:0px;
}
#header
{
width:100%;
background-color:black;
height:60px;
}
#main
{
width:300px;
border:1px dotted black;
margin:0 auto;
}
#footer
{
width:100%;
background-color:black;
height:40px;
position:absolute;
bottom:0px;
}
http://jsfiddle.net/VpwQQ/2/
But as you can see, the main div doesn't have a height.
Then I replaced my css by that:
body
{
margin:0px;
}
#header
{
width:100%;
background-color:black;
height:60px;
}
#main
{
width:300px;
border:1px dotted black;
position:absolute;
margin:0 auto;
bottom:60px;
top:80px;
}
#footer
{
width:100%;
background-color:black;
height:40px;
position:absolute;
bottom:0px;
}
http://jsfiddle.net/VpwQQ/1/
But then, the horizontal center doesn't work.
How can I do this design (div centered and that takes all the page in height between the header and footer with a 20 px magin) ?
I'm not sure what you're trying to do, but I'll give my explaination of what's going to happen with your code:
Your #main div doesn't have a height because it doesn't have a height CSS property, nor does it have any content.
You should add either a height: 100px or just add some content and you will see it gets a height.
The reason why I ask what you want to do is because you're not very clear as to what you want your final product to look like.
You're going to have another problem with the footer. If you use position absolute it sticks to the bottom at the moment. Set the height of the #main div to something ridiculously high and you'll see that when you have to scroll down the page the footer stays where it is. See http://jsfiddle.net/VpwQQ/3/
You should use position: fixed but this will keep it on the bottom of the WINDOW and not the DOCUMENT. So then you get into the problem of having to use Javascript in order to measure the document height and setting positions appropriately. Not sure what you're trying to do, but if you're just trying to lay out a website then use standard relative positioning to push the footer down naturally below the #main div.
Edit:
See http://jsfiddle.net/VpwQQ/4/ if you're just trying to set up a normal website layout.
If you want the footer to "stick" to the bottom of the page all the time then you will need to use position: fixed but I don't think this works across all browsers. See http://jsfiddle.net/VpwQQ/6/
Lastly, to get both footer and header to "stick" see http://jsfiddle.net/VpwQQ/8/
I added a div inside #main.
Main now has a 100% width.
Inside, put a div of 300px, with no absolute position.
I forked your fiddle: http://jsfiddle.net/8U9P6/
Personnally I prefer the javascript solution and not using the absolute position. But this solution seems to work.
Add and overflow to contain the content in the inside div: http://jsfiddle.net/M2nZc/
Note that the page will not grow as it is absolute position.
You can't use automatic margins on an absolutely positioned element, as it's not in the document flow any more.
Use width: 100% on the #main div, then put another element inside it that you center using automatic margins.
Demo: http://jsfiddle.net/Guffa/VpwQQ/9/
Note: You may need to use height: 100% on the body and html elements for the bottom sizing to work on the #main element.
Once you fill your #main div with content, it will automatically gain height according to the content. You can simply fill it with a few paragraphs of lorem ispum to simulate content. You can now remove the absolute position and positioning CSS.
Centering a div using the "0 auto" shorthand only works when the parent element (which, for the #main div, is the body element) has a defined width. To do this, try giving your body element a width of 100%. Doing this is something that you might want to make a habit of in you CSS.
To have your #main div always be 20px below the #header div, simply add 20px of margin-bottom to your #header div. Do the same below the #main div to space the footer.
Summed up (without the footer at the bottom, for now) your CSS might read something like this:
body {
width: 100%
margin: 0px;
}
#header {
width: 100%;
height: 60px;
margin-bottom: 20px; /*here we space the header 20px from the next element*/
background-color: black;
}
#main {
width: 300px;
margin: 0 auto 20px auto; /*we append the margin to include 20px of spacing at the bottom*/
border:1px dotted black;
}
#footer {
width:100%;
height:40px;
background-color:black;
}
Example: http://jsfiddle.net/WEx3j/
If you want the footer to be 'sticky' (always be at the very bottom of your website), I advise you to employ this method.
I hope this clarified a few things.
You can see the fiddle here: http://jsfiddle.net/easeS/4/
Here is the html/css I have:
#main div
{
float:left;
width:30px;
margin-right:10px;
}
#main
{
overflow:hidden;
width:100px;
height:50px;
border:1px solid;
}
<div id="main">
<div>test1</div>
<div>test2</div>
<div>test3</div>
</div>
I'm not sure why but it bumps the third div down to a new line instead of hiding it. Any suggestions?
The 3rd div bumps down because there's not enough space for it to float.
Your 3 divs added up together (inc. margin) is equals to 120px;
The wrapper (#main) is 100px.
Therefore bumping the 3rd div down.
If I understood your question correctly...
What you want to do is hide it the 3rd div, for you to do this, you'd need to:
Add another wrapper div and give it a bigger width. Have a look at my example here
No need to add extra wrapping divs...
Try this instead:
#main div
{
display:inline;
width:30px;
margin-right:10px;
}
#main
{
overflow:hidden;
width:100px;
height:50px;
border:1px solid;
white-space: nowrap;
}
Just changed the float rule to display: inline on the divs and added white-space: nowrap to #main.
Is because your divs in your div#main are confined only to those dimensions specified in the style of div#main. To float to infinity and beyond, they need to have a space where to float. You can wrap your divs in a container with a very high height.
Try with this demo.
Im creating a website with paragraph content in it. What I have here is the which is my container div and the actual content that is 100% of the height of mainContent, but only 50% of the width. I want there to be 15px padding around the actual content inside of the aboutLeft. My problem is that when I use overflow:auto to for the scrollbars I am extending my content 30px outside of the #mainContent div and I have no clue why its doing this. Any suggestions to change this would be great.
Thanks, meepz
http://i.stack.imgur.com/JLICh.jpg
#outerDiv #mainContent{
position:relative;
height:560px;
margin:0;
padding:0;
background-color:#fff;
border-style: solid;
border-width:1px;
}
#mainContent #aboutLeft{
padding:15px;
position:absolute;
width:55%;
height:560px;
left:0;
top:0;
overflow:auto
}
You need to add a wrapper DIV that you set the width on, then put your div with overflow:auto inside it since block level elements will take up 100% the width of their containing element.
This will solve your issue.