Back To Website Design Forum

CSS Positioning, I can't get it right

  • Danny1337
  • Student
  • Student
  • No Avatar
  • Joined: May 14, 2006
  • Posts: 70
  • Loc: Norway
  • Status: Offline

Post January 21st, 2009, 4:58 pm

Alright, i've been working on a website for a few days now, and I have a problem with css. I've been doing php for a few years already but I guess the design part is not my thing. Anyways, I've been trying and here's my problem.
I'm making two boxes, one of them contains the recent forum entries links, and the second one, which is supposed to be placed under the first box with a small gap between them, contains links and other stuff, like this:

______
| box1|
|.......|
|.......|
______
| box2|
|.......|
|.......|


However, since the first box contains varying text lenght (due to different thread names), the first box sometimes have to strech down, and overlap the second box. Right now i've set a fixed height on box1, with overflow: hidden; as a temporary solution, but as you know, it's bothering me lol.
Oh and about box2, i'd like it to stretch down to the bottom of the wrapper it is in, if it's possible, since height: 100%; doesn't work.

if you need to see the real thing, here's the site i've been working on http://animazed.net
The boxes are the ones at the right side.

Thanks for your time! Also if you see any kind of bug please tell me about it/ eventually what i can do to improve the site, thanks


edit*
to make it more clearly, what I need is when box1 is stretching down, I need box2 to move down along with it to prevent it from being overlapped.
  • Anonymous
  • Bot
  • No Avatar
  • Joined: 25 Feb 2008
  • Posts: ?
  • Loc: Ozzuland
  • Status: Online

Post January 21st, 2009, 4:58 pm

  • kbergmann
  • Expert
  • Expert
  • User avatar
  • Joined: Dec 04, 2007
  • Posts: 659
  • Loc: USA
  • Status: Offline

Post January 22nd, 2009, 8:38 am

I'll help after work. Are you floating the boxes currently?
  • Danny1337
  • Student
  • Student
  • No Avatar
  • Joined: May 14, 2006
  • Posts: 70
  • Loc: Norway
  • Status: Offline

Post January 22nd, 2009, 9:21 am

Nope, they doesn't appear at the right place if i use float. right now i use position: absolute; which is just a temporary solution. This is box2

Code: [ Select ]
#content_box2
{
    position: absolute;
    top: 180px;
    right: 0px;
    width: 195px;
    background-color:#888;
    text-align:left;
    padding: 2px;
    overflow:hidden;
    color: #ccc;
    font-size: 13px;
    font-weight:lighter;
}
  1. #content_box2
  2. {
  3.     position: absolute;
  4.     top: 180px;
  5.     right: 0px;
  6.     width: 195px;
  7.     background-color:#888;
  8.     text-align:left;
  9.     padding: 2px;
  10.     overflow:hidden;
  11.     color: #ccc;
  12.     font-size: 13px;
  13.     font-weight:lighter;
  14. }
  • kbergmann
  • Expert
  • Expert
  • User avatar
  • Joined: Dec 04, 2007
  • Posts: 659
  • Loc: USA
  • Status: Offline

Post January 22nd, 2009, 5:19 pm

This would work for your purposes. I'll let you tinker with the css. I did all the style inline b/c I am lazy :)

Code: [ Select ]
<!-- outer box -->
<div style="width:700px;background-color:#66ff66; color:#ffffff;">

<!-- blue float left holder box -->
<div style="float:left; width:300px; z-index:2; background-color:#0044aa;">

<div>PHP Box for stuff 1</div>

<div>PHP Box for stuff 2</div>

</div>
<!-- black float right box -->
<div style="float:right; position:top right;width:400px; background-color:#000001;">
I<br />
AM<br />
BIGER<br />
RIGHT<br />
BOX
</div>
<div style="clear:both;"></div>

</div>
  1. <!-- outer box -->
  2. <div style="width:700px;background-color:#66ff66; color:#ffffff;">
  4. <!-- blue float left holder box -->
  5. <div style="float:left; width:300px; z-index:2; background-color:#0044aa;">
  7. <div>PHP Box for stuff 1</div>
  9. <div>PHP Box for stuff 2</div>
  11. </div>
  12. <!-- black float right box -->
  13. <div style="float:right; position:top right;width:400px; background-color:#000001;">
  14. I<br />
  15. AM<br />
  16. BIGER<br />
  17. RIGHT<br />
  18. BOX
  19. </div>
  20. <div style="clear:both;"></div>
  22. </div>
  • Danny1337
  • Student
  • Student
  • No Avatar
  • Joined: May 14, 2006
  • Posts: 70
  • Loc: Norway
  • Status: Offline

Post January 24th, 2009, 3:02 am

thanks a bunch! That worked flawlessy! <3
  • Danny1337
  • Student
  • Student
  • No Avatar
  • Joined: May 14, 2006
  • Posts: 70
  • Loc: Norway
  • Status: Offline

Post January 30th, 2009, 5:17 pm

Sorry for doublepost but I have another question and it's kinda pointless to start a new thread.

I need to stretch the box "Nye Anmeldelser" at the right side, to the bottom of the wrapper. Is this possible?
http://animazed.net/

Page 1 of 1

Post Information

  • Total Posts in this topic: 6 posts
  • Users browsing this forum: No registered users and 183 guests
  • You cannot post new topics in this forum
  • You cannot reply to topics in this forum
  • You cannot edit your posts in this forum
  • You cannot delete your posts in this forum
  • You cannot post attachments in this forum
 
 

© 2011 Unmelted, LLC. Ozzu® is a registered trademark of Unmelted, LLC.