#1
  1. Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Nov 2003
    Location
    MD
    Posts
    373
    Rep Power
    12

    CSS Positioning Dilema


    I'm trying to create a page with out using HTML tables but am having a tough time getting things to do what I want.

    You can see what I've got so far here.
    You can view the css here.

    The problem I'm having is with the three white div areas.

    The top left one I call "news" the top right one I call "calendar" and the bottom one I call "main".

    If I was using tables I would code it like this...

    <TABLE>
    <TR>
    <TD>news content</TD>
    <TD width=200>calendar content</TD>
    </TR>
    <TR>
    <TD colspan=2>main content</TD>
    </TR>
    </TABLE>

    That would make it so that no matter what height the calendar or news elements were the main content would always fall below both.

    As I have it set now if there is a lot of content in the news window then it looks fine, but if there is only a little content in the news content then main content rides up under the calendar content.

    I've have tried every trick I can think of to no avail. So I need the help of someone a little more CSS savy than I am.

    Also... I have been doing most of my testing in IE6. I have looked at it in NN7 and the general concept is the same but the alignment is off. If you know how to fix that in the proccess I will be greatful.
  2. #2
  3. No Profile Picture
    Super Moderator
    Devshed Specialist (4000 - 4499 posts)

    Join Date
    Jul 2003
    Posts
    4,008
    Rep Power
    2791
    Does this help?

    PHP Code:
    <html>
     <
    head></head>
     <
    body>

      <
    div style="border:1px solid #000;display:inline;">News</div>
      <
    div style="border:1px solid #000;display:inline;">Calender</div>
      <
    div style="border:1px solid #000;display:block;">Welcome to the Wild Bunch 

    Online
    .</div>

     </
    body>
    </
    html
  4. #3
  5. |<.+#f@#+.&.|
    Devshed Loyal (3000 - 3499 posts)

    Join Date
    Mar 2002
    Location
    norway
    Posts
    3,009
    Rep Power
    1224
    Code:
    css:
    
    div#calendar {
      background-color:white;
    	margin:10px;
    	padding:5px;
    	border:5px ridge;
    	float:right;
    	width:200px;
    }
    
    div#main {
      background-color:white;
    	margin:10px;
    	padding:5px;
    	border: 5px ridge;
    	clear:both;
    }
    by using float you can use the clear:both on the #main,

    just remember that the floated element have to come before the element it is supposed to float aside, ie
    <div id="calender"> ... </div>
    <div id="news"> ... </div>
  6. #4
  7. Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Nov 2003
    Location
    MD
    Posts
    373
    Rep Power
    12
    I tried both ideas and neither worked.

    PHP-Newb

    Your idea made the news div go accross about half of the screen and lost its right border. And the calendar div came directly under it rather than beside it.

    Akh

    Your Idea came closer but if you click on the link in my first post you will now see the result of that.

    The news div goes all the way accross the screen and the calendar div is on top of it.

    Any other ideas?
    (Now you can see why I'm calling on your help)
  8. #5
  9. Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Nov 2003
    Location
    MD
    Posts
    373
    Rep Power
    12
    Okay... I've got it working partially.

    I added a float:left to the menu div. Now if I could just get it to fill the extra space. The problem is I don't want to use pixels so that it can adjust to the browser size, but I would like it to fill over to where the calendar is and it might be nice but not as necessary for it to fill down to where the main div is.

    Any advice would be apreciated.

IMN logo majestic logo threadwatch logo seochat tools logo