CSS Positioning, I can't get it right

  • Danny1337
  • Student
  • Student
  • Danny1337
  • Posts: 70
  • Loc: Norway

Post 3+ Months Ago

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
  • Posts: ?
  • Loc: Ozzuland
  • Status: Online

Post 3+ Months Ago

  • kbergmann
  • Expert
  • Expert
  • User avatar
  • Posts: 659
  • Loc: USA

Post 3+ Months Ago

I'll help after work. Are you floating the boxes currently?
  • Danny1337
  • Student
  • Student
  • Danny1337
  • Posts: 70
  • Loc: Norway

Post 3+ Months Ago

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
  • Posts: 659
  • Loc: USA

Post 3+ Months Ago

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;">
  3. <!-- blue float left holder box -->
  4. <div style="float:left; width:300px; z-index:2; background-color:#0044aa;">
  5. <div>PHP Box for stuff 1</div>
  6. <div>PHP Box for stuff 2</div>
  7. </div>
  8. <!-- black float right box -->
  9. <div style="float:right; position:top right;width:400px; background-color:#000001;">
  10. I<br />
  11. AM<br />
  12. BIGER<br />
  13. RIGHT<br />
  14. BOX
  15. </div>
  16. <div style="clear:both;"></div>
  17. </div>
  • Danny1337
  • Student
  • Student
  • Danny1337
  • Posts: 70
  • Loc: Norway

Post 3+ Months Ago

thanks a bunch! That worked flawlessy! <3
  • Danny1337
  • Student
  • Student
  • Danny1337
  • Posts: 70
  • Loc: Norway

Post 3+ Months Ago

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/

Post Information

  • Total Posts in this topic: 6 posts
  • Users browsing this forum: No registered users and 83 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
 
cron
 

© 1998-2014. Ozzu® is a registered trademark of Unmelted, LLC.