January 26th, 2004, 07:37 PM
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...
<TD width=200>calendar content</TD>
<TD colspan=2>main content</TD>
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.
January 26th, 2004, 07:55 PM
Does this help?
<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
January 26th, 2004, 08:01 PM
by using float you can use the clear:both on the #main,
border: 5px ridge;
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>
January 27th, 2004, 01:33 PM
I tried both ideas and neither worked.
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.
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)
January 27th, 2004, 03:14 PM
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.