I'm using absolute positioning to have 100% height of the screen. I also want to limit the resizing of my page so I add min-width in my header and content divs. The problem I'm facing is that once resizing reaches the min-width boundary, right side margin disappears. Any suggestions how to make it work?
HTML:
<div id="header">Header</div>
<div id="content">Content</div>
CSS:
html, body{
background: blue;
padding:0px;
margin:0px;
}
#header{
height:30px;
background: yellow;
position: absolute;
top:20px;
right:20px;
left:20px;
min-width:500px;
}
#content{
background:green;
position: absolute;
top:50px;
right:20px;
left:20px;
bottom:20px;
min-width:500px;
}
jsfiddle
I found a solution my self. The problem is that if you apply min-width on the element which has padding or margin, that padding or margin collapses when you resize the window. So the solution was to wrap that element inside root element and set min-width on the root element.
P.S. I also tried box-sizing approach suggested by Sam but effect was almost the same: margin shrinks but doesn't disappear all. Applying min-width on outer element solves the issue as well.
Here is an example
updated fiddle
You can use the CSS box-sizing property to accomplish this in modern browsers (IE8+)
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've got the following problem:
I want to have a relative container element that contains some child elements each with margin.
If i dont set the height of the container, it resizes height / width by its containing children.
Problem is that it seems to ignore the margin on them.
here some code:
css:
.container{
position:relative;
}
.child {
position:relative;
float:left;
width:200px;
height:50px;
margin-bottom:20px;
}
html:
<div class="container">
<div class="child">hello world</div>
</div>
The container should now resize height to 50+20 = 70px,
so if i put another element below it should be ok but it isn't.
Margin seems not to resize containers height, how to change this?
Not getting your question quiet well but you are probably missing to clear your floats...
Demo
.container{
position:relative;
border: 1px solid #f00;
overflow: hidden;
}
Alternatively you can also use clear: both;
Demo
Depending on the effect you are trying to achieve, either:
1) Add 'overflow:hidden' to the .container div
or
2) Use padding-bottom instead of margin-bottom on the .child div
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.
So I'm putting together some alert system for a website I'm building. Layout is pretty simple:
<style>
#alert{
position:absolute;
padding:10px;
display:table;
margin:0 auto;
}
</style>
<div id="alert">
Hey user, I have a very important message for you.
</alert>
Now, if an element isn't absolutely positioned I normally use display:table to make sure it only takes the necessary amount of width, but absolutely positioning it kind of ruins that.
Is there a way to make it so that the element only takes the necessary amount of width, but still be absolutely positioned?
EDIT:
Basically what I am looking for is an absolutely positioned element that has dynamic width, and is centered.
This seemed to do the trick:
<style>
#alert {
position:absolute;
width:100%; /* Keep in mind this is for an entire page */
height: 16px; /* Match the font-size of the alert */
text-align:center;
cursor:pointer;
}
#alert #inner_alert {
display:inline-block;
padding:10px;
}
</style>
<div id="alert">
<div id="inner_alert">Here is the message!</div>
</div>
This will produce a centered element that will only be as wide as it needs to be and is absolutely positioned.
Hey now you can used left or right properties as like this
#alert{
position:absolute;
padding:10px;
left:0;
right:0;
top:0;
bottom:0;
}
hey now you can define your value in left right top bottom as according your layouts
if you define position absolute than define your div width or height
now you can used this one live demo http://jsfiddle.net/YvMAJ/