Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 10 of 10
  1. #1
    New to the CF scene
    Join Date
    Jun 2007
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Help with CSS positioning

    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:
    Code:
    .box { 
      position: absolute;
      border: 1px solid black;
      left: 10px;
      top: 10px;
      height: 200px;
      width: 200px;
    }
    And for the HTML:
    Code:
    <span class="box">Box.</span>
    Now, I would think that I will just make another "Box", in the CSS, as so:
    Code:
    .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:
    Code:
    <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.
    Last edited by yoonkwun; 06-03-2007 at 05:16 AM.

  • #2
    New Coder
    Join Date
    May 2007
    Posts
    21
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Code:
    .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!!!

  • #3
    New to the CF scene
    Join Date
    Jun 2007
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by wicked_ryoko View Post
    Code:
    .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...

  • #4
    New Coder sdcomputerz's Avatar
    Join Date
    Feb 2007
    Location
    Hawaii
    Posts
    62
    Thanks
    0
    Thanked 0 Times in 0 Posts
    You need to end your first span. Set a left margin for the second box.
    You can never have nothing, because nothing is still something.
    SD Computerz
    Free Domain Names
    Gaming Lagoon - Buying your game time!

  • #5
    Senior Coder Arbitrator's Avatar
    Join Date
    Mar 2006
    Location
    Splendora, Texas, United States of America
    Posts
    3,305
    Thanks
    28
    Thanked 276 Times in 270 Posts
    Quote Originally Posted by yoonkwun View Post
    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.

    Quote Originally Posted by yoonkwun View Post
    Code:
    <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.

    Code:
    <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.
    For every complex problem, there is an answer that is clear, simple, and wrong.

  • #6
    New to the CF scene
    Join Date
    Jun 2007
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by Arbitrator View Post
    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?

  • #7
    Senior Coder Arbitrator's Avatar
    Join Date
    Mar 2006
    Location
    Splendora, Texas, United States of America
    Posts
    3,305
    Thanks
    28
    Thanked 276 Times in 270 Posts
    Quote Originally Posted by yoonkwun View Post
    How would I make a container element? Is it just another element that the dimensions is the size of both boxes?
    Code:
    <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).
    For every complex problem, there is an answer that is clear, simple, and wrong.

  • #8
    New to the CF scene
    Join Date
    Jun 2007
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by Arbitrator View Post
    Code:
    <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?

  • #9
    Senior Coder Arbitrator's Avatar
    Join Date
    Mar 2006
    Location
    Splendora, Texas, United States of America
    Posts
    3,305
    Thanks
    28
    Thanked 276 Times in 270 Posts
    Quote Originally Posted by yoonkwun View Post
    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.
    For every complex problem, there is an answer that is clear, simple, and wrong.

  • #10
    New to the CF scene
    Join Date
    Jun 2007
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by Arbitrator View Post
    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!


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •