CSS Help
 
Forums: » Register « |  User CP |  Games |  Calendar |  Members |  FAQs |  Sitemap |  Support | 
User Name:
Password:
Remember me
Go Back   Dev Shed Forums > Web Design > CSS Help
Reload this Page

CSS Positioning Dilema

Discuss CSS Positioning Dilema in the CSS Help forum on Dev Shed.
CSS Positioning Dilema Cascading Style Sheets (CSS) forum discussing all levels of CSS, including CSS1, CSS2 and CSS Positioning. CSS provides a robust way of applying standardized design concepts to your web pages.

Reply
Add This Thread To:
  Del.icio.us   Digg   Google   Spurl   Blink   Furl   Simpy   Y! MyWeb 
« Previous Thread | Next Thread »  
Thread Tools Search this Thread Rate Thread Display Modes
 
Unread Dev Shed Forums Sponsor:
  #1  
Old January 26th, 2004, 06:37 PM
melsana's Avatar
melsana melsana is offline
Contributing User
Dev Shed Newbie (0 - 499 posts)
  
Join Date: Nov 2003
Location: MD
Posts: 373 melsana User rank is Corporal (100 - 500 Reputation Level)melsana User rank is Corporal (100 - 500 Reputation Level)melsana User rank is Corporal (100 - 500 Reputation Level)melsana User rank is Corporal (100 - 500 Reputation Level) 
Time spent in forums: < 1 sec
Reputation Power: 6
Send a message via AIM to melsana
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.
Reply With Quote
  #2  
Old January 26th, 2004, 06:55 PM
Winters Winters is offline
Bad Coder
Dev Shed Intermediate (1500 - 1999 posts)
  
Join Date: Jul 2003
Posts: 1,848 Winters User rank is First Lieutenant (10000 - 20000 Reputation Level)Winters User rank is First Lieutenant (10000 - 20000 Reputation Level)Winters User rank is First Lieutenant (10000 - 20000 Reputation Level)Winters User rank is First Lieutenant (10000 - 20000 Reputation Level)Winters User rank is First Lieutenant (10000 - 20000 Reputation Level)Winters User rank is First Lieutenant (10000 - 20000 Reputation Level)Winters User rank is First Lieutenant (10000 - 20000 Reputation Level)Winters User rank is First Lieutenant (10000 - 20000 Reputation Level) 
Time spent in forums: 1 Week 6 Days 13 h 13 m
Reputation Power: 188
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> 
Reply With Quote
  #3  
Old January 26th, 2004, 07:01 PM
Akh's Avatar
Akh Akh is offline
|<.+#f@#+.&.|
Dev Shed Frequenter (2500 - 2999 posts)
  
Join Date: Mar 2002
Location: norway
Posts: 2,689 Akh User rank is Colonel (50000 - 60000 Reputation Level)Akh User rank is Colonel (50000 - 60000 Reputation Level)Akh User rank is Colonel (50000 - 60000 Reputation Level)Akh User rank is Colonel (50000 - 60000 Reputation Level)Akh User rank is Colonel (50000 - 60000 Reputation Level)Akh User rank is Colonel (50000 - 60000 Reputation Level)Akh User rank is Colonel (50000 - 60000 Reputation Level)Akh User rank is Colonel (50000 - 60000 Reputation Level)Akh User rank is Colonel (50000 - 60000 Reputation Level)Akh User rank is Colonel (50000 - 60000 Reputation Level)Akh User rank is Colonel (50000 - 60000 Reputation Level)Akh User rank is Colonel (50000 - 60000 Reputation Level) 
Time spent in forums: 4 Weeks 7 h 23 m 52 sec
Reputation Power: 600
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>
Reply With Quote
  #4  
Old January 27th, 2004, 12:33 PM
melsana's Avatar
melsana melsana is offline
Contributing User
Dev Shed Newbie (0 - 499 posts)
  
Join Date: Nov 2003
Location: MD
Posts: 373 melsana User rank is Corporal (100 - 500 Reputation Level)melsana User rank is Corporal (100 - 500 Reputation Level)melsana User rank is Corporal (100 - 500 Reputation Level)melsana User rank is Corporal (100 - 500 Reputation Level) 
Time spent in forums: < 1 sec
Reputation Power: 6
Send a message via AIM to melsana
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)
Reply With Quote
  #5  
Old January 27th, 2004, 02:14 PM
melsana's Avatar
melsana melsana is offline
Contributing User
Dev Shed Newbie (0 - 499 posts)
  
Join Date: Nov 2003
Location: MD
Posts: 373 melsana User rank is Corporal (100 - 500 Reputation Level)melsana User rank is Corporal (100 - 500 Reputation Level)melsana User rank is Corporal (100 - 500 Reputation Level)melsana User rank is Corporal (100 - 500 Reputation Level) 
Time spent in forums: < 1 sec
Reputation Power: 6
Send a message via AIM to melsana
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.
Reply With Quote
Reply

Viewing: Dev Shed Forums > Web Design > CSS Help > CSS Positioning Dilema

« Previous Thread | Next Thread »

Thread Tools  Search this Thread 
Search this Thread:

Advanced Search
Display Modes  Rate This Thread 
Linear Mode Linear Mode
Rate This Thread:


Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts
vB code is On
Smilies are On
[IMG] code is On
HTML code is Off
View Your Warnings | New Posts | Latest News | Latest Threads | Shoutbox
Forum Jump


Forums: » Register « |  User CP |  Games |  Calendar |  Members |  FAQs |  Sitemap |  Support | 
  
 





© 2003-2008 by Developer Shed. All rights reserved. DS Cluster 6 hosted by Hostway. 
Stay green...Green IT