...

View Full Version : Help with CSS positioning



yoonkwun
06-03-2007, 05:08 AM
Hi,

I'm trying to make a website with CSS Positioning. I will try to simplify it so the problem is easier to understand.

I want a "Box", in one spot. The dimensions for this Box is, let's say, 200px by 200px with a 1px Border.

Next I want another Box, with the same dimensions and border, right under it.

So, for the first Box, I would put this for my CSS:

.box {
position: absolute;
border: 1px solid black;
left: 10px;
top: 10px;
height: 200px;
width: 200px;
}

And for the HTML:

<span class="box">Box.</span>

Now, I would think that I will just make another "Box", in the CSS, as so:

.box2 {
border: 1px solid black;
height:200px;
width:200px;
}

But this one doesn't have the positioning, so I would do this in the HTML:

<span class="box">Box.<br />
<span class="box2">Box.</span>

And so I would think there would two boxes, one on top of one, with a black border and some text in both.

This is not the case, though, for me.

The "box2", is right on top of the "box", not exactly on top, but very close, so close that I can only see the Border for the "box".

So can anybody please help me with this? Can you tell me if there's something I did wrong in my code?

Thanks in advance.

wicked_ryoko
06-03-2007, 06:14 AM
.box {
position: absolute;
border: 1px solid black;
left: 10px;
top: 10px;
height: 200px;
width: 200px;
}


You just answered the question I've been trying like crazy to figure out. Thanks!!!

yoonkwun
06-03-2007, 06:29 AM
.box {
position: absolute;
border: 1px solid black;
left: 10px;
top: 10px;
height: 200px;
width: 200px;
}


You just answered the question I've been trying like crazy to figure out. Thanks!!!

Hehe, Np.

Now if we could focus on my question...

sdcomputerz
06-03-2007, 07:24 AM
You need to end your first span. Set a left margin for the second box.

Arbitrator
06-03-2007, 09:53 AM
I want a "Box", in one spot. The dimensions for this Box is, let's say, 200px by 200px with a 1px Border.

Next I want another Box, with the same dimensions and border, right under it.You want the flow of one to affect the other. The problem is that absolutely positioned elements are removed from the normal flow and won’t affect the positions of elements in the normal flow. Either put the two “boxes” into a container element and absolutely position the container element or do away with the absolute positioning altogether. I find that a lot of people use absolute positioning when it’s totally unnecessary.



<span class="box">Box.<br />
<span class="box2">Box.</span>As mentioned, you may need to close the first span element. However, if you want these boxes to stack, then it’s likely that you should be using div elements instead, since these have a block‐level display by default and will force new content (like the next box) to display on the next line automatically.


<div id="box">Box.</div>
<div id="box2">Box.</div>

Something to keep in mind is that if you’re using the br element, then there’s likely something that you’re doing that could be done better since CSS pretty much negates the need for that element.

yoonkwun
06-03-2007, 05:16 PM
Either put the two “boxes” into a container element and absolutely position the container element

How would I make a container element? Is it just another element that the dimensions is the size of both boxes?

Arbitrator
06-03-2007, 05:27 PM
How would I make a container element? Is it just another element that the dimensions is the size of both boxes?
<containerElementName>
<div id="box">Box.</div>
<div id="box2">Box.</div>
</containerElementName>Replace containerElementName with your element name of choice (e.g., div et al).

yoonkwun
06-03-2007, 05:41 PM
<containerElementName>
<div id="box">Box.</div>
<div id="box2">Box.</div>
</containerElementName>Replace containerElementName with your element name of choice (e.g., div et al).

Thanks, this worked.

Now let's say...

I want a Third "Box" UNDER Both boxes, Under 200px below both boxes.

BUT, from page to page, the Height of the boxes are gonna vary, but I want to maintain the 200px Under both boxes.

I've been stuck on this for a while now, could you explain to me how this would work?

Arbitrator
06-03-2007, 05:49 PM
Now let's say...

I want a Third "Box" UNDER Both boxes, Under 200px below both boxes.

BUT, from page to page, the Height of the boxes are gonna vary, but I want to maintain the 200px Under both boxes.

I've been stuck on this for a while now, could you explain to me how this would work?Not sure what you mean. Just throw the third box into the container element? If you mean that you want a space of 200 pixels between the second and third boxes, then use margin-bottom: 200px on the second box or set an equivalent top margin on the third box.

Otherwise, explain your issue in more detail.

yoonkwun
06-03-2007, 09:06 PM
Not sure what you mean. Just throw the third box into the container element? If you mean that you want a space of 200 pixels between the second and third boxes, then use margin-bottom: 200px on the second box or set an equivalent top margin on the third box.

Otherwise, explain your issue in more detail.

Oh, of course, margins. Yes that is what I meant. Thanks! :thumbsup:



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum