CSS Problem

[JavaWizKid]

I'm having trouble with some css on my webpage. I'm trying to get a square to appear 10 pixels from the top and 10 pixels from the bottom, when the browser is resized the box resizes with it, staying at 10 pixels from the top and bottom.

#main
{
	margin-left: 190px;
	margin-right: 10px;
	margin-top: 10px;
	border: 2px solid blue;
	position: relative;
	height: 500px;
	background-color: white;
}

if I add margin-bottom: 10px; it doesn't do what I'm trying to explain.

How can I achieve this?

 

[kgarner]

I don't think that is possible with CSS. You can achieve this with some JavaScript to get the browser window dimensions and then altering the height attribute.

 

[angelwatt]

Try

position: absolute;
top: 10px;
bottom: 10px;

 

[JavaWizKid]

Any way to do it with

position: relative;

 

[XnavxeMiyyep]

It is possible to do with CSS. You will need far more divs than that. I'll see what I can come up with and get back to you.

I do something similar with on http://www.foodmoocher.com/404.php (although I have it go down slightly below to make sure the scrollbar is always there), but my CSS file is probably far too annoying to read as is.

 

[SrWebDeveloper]

This is tested/works in FF3 and MSIE7, including your window resize test:

<style>

body,div#container { 
    border: 0; 
    margin: 0; 
    height: 100%
}

div#box {
    position: absolute;
    top: 10px;
    left: 10px;
    right: 10px;
    bottom: 10px;
    background-color: green;
    border: 1px solid black;

}

</style>

 <div id="container">
     <div id="box">Test</div>
</div>

The CSS posted by others likely won't create the liquid layout you want, i.e. the box resizes automatically when the user changes their window size, plus it works in MSIE too.

The first thing I did was apply full window size to the body. Then inside that I added a div as a container which I find helps maintain the height in children div's in all browsers including MSIE. Then inside that I placed the child div, the box, set with absolute positioning.

The next commands, top/left/bottom/right, each determine how many pixels offset from the margin the box will display. In my example I used 10 pixels each so you can easily see the green box and border with whitespace around it to prove its working. Simply adjust those values as you see fit.

To display the box EXACTLY the way you phrased it in your question (you didn't mention margin space on the left and right) use:

left: 0;
right: 0;
top: 10px;
bottom: 10px;

Instead of my values.

-jim

 

[angelwatt]

Any way to do it with

position: relative;

The way you're describing this box is that it is absolutely 10px from top and bottom, not relative to some other elements. Any reason you need it to be relative?

 

[JavaWizKid]

What's the difference between:

margin-top: 10px;

and

top: 10px;

 

[kgarner]

What's the difference between:

margin-top: 10px;

and

top: 10px;

margin-top adds 10px to the margin property of the box. top tells the browser to put it 10px from the top. so if you had a box that was top:10px and margin-top: 10px it was appear to be positioned 20px formt he top.

 

[SrWebDeveloper]

@JavaWizKid

In CSS margin-top sets the top margin space of an element. Top specifies the top edge, which really means the offset from the top when positioned absolutely (ignoring any real margins that may exist). That's why top/left/bottom/right exist - sometimes developers need to position elements based on the edge (absolute, outside the flow), not the elements near them (relative, within the flow). Absolute positioning is often used due to limitations in CSS rendering heights properly in some browsers or dealing with dynamic heights as is true in this example, as you are really making a liquid layout where the box adjusts as the user adjust the browser window dimensions. Try my code please.

-jim

 

[JavaWizKid]

And what's the difference between:

position: relative;

and

position: absolute;

 

[SrWebDeveloper]

@JavaWizKid

Please see my reply where I discussed relative vs. absolute in context to your specific situation or learn about it here in 10 easy steps, including static positioning. Then it'll make sense to ya. Beyond that, check these out:

W3 Schools CSS Tutorial (excellent)
Starting with HTML and CSS (W3C sponsored site, also excellent)
When you get more advanced, read this tutorial on positioning

And don't hesitate to use Google to find the rest -- we all do it!

-jim

 

[JavaWizKid]

OK thanks, I've done it now.