|
| |
|
|
BBurger
Posts: 5
Joined: 12/5/2003
Status: offline
 |
Flow & Margins - 12/6/2003 6:12:40
I'm working on the following page:
http://wind.prohosting.com/~warbard/index.html
Style sheet I'm using is here:
http://wind.prohosting.com/~warbard/warbard.css
The CSS is pretty much working the way I want it, in all the browsers I've tried (Opera/NN/IE/Mozilla), but there's one thing I can't figure out...
How can I keep the main panel (#rightcontent) from flowing back to the left under the side panel (#leftcontent) when leftcontent comes to an end?
I *know* this is possible; I've seen it done on lots of CSS sites - but I can't figure out the syntax on my own! I came up with one float:left trick that worked OK in IE - but messed up in every other browser, so that's out. 
So, how do I leave that space under #leftcontent clear all the way to the bottom of the page?
|
|
|
|
BBurger
Posts: 5
Joined: 12/5/2003
Status: offline
|
RE: Flow & Margins - 12/6/2003 20:44:01
Glad to be here, Deb!
Anyway... my main content is already in a div tag of it's own.
Here's the relevant style:
#rightcontent {
padding-left:1%;
background:#D3C9B4;
margin-right:2em;
}
...and on my webpages it's <div id="rightcontent"> Content stuff... </div>
I had thought that the padding-left would keep it going straight down, but it doesn't.
Adding a "float:left" command to rightcontent does make it go straight down, but ONLY in Internet Exploiter. All the rest of the browsers start the rightcontent below the leftcontent sidebar when I style it this way! That's obviously uncool.
Thoughts, someone?
| |
|
|
|
Peppergal
Posts: 2204
Joined: 9/20/2002
Status: offline
|
RE: Flow & Margins - 12/6/2003 21:13:48
Try setting a width percentage for the Div. I believe that if you don't set one, it will revert to default...which may be 100%. ...so, when the page scrolls below your left content div, it adjusts to 100%? I don't know that it will do that, but it seems like that's what's happening. I'm no expert, and I pretty much succeed after many trials and tribulations. LOL
Look at this page: http://www.design-a-website.com/lvcc/affiliations.htm
All the divs have width percentages assigned to them and I have had no overflow instances like you have on yours.
Internet exploiter...I LOVE it. :-)
< Message edited by Peppergal -- 12/6/2003 9:31:04 PM >
_____________________________
Northeast PA / Poconos/ Lake Wallenpaupack Real Estate
wallenpaupacklakeproperty.com
Karen's Real Estate Blog
| |
|
|
|
BBurger
Posts: 5
Joined: 12/5/2003
Status: offline
|
RE: Flow & Margins - 12/9/2003 23:13:10
Trial-and-error wins again... I swapped the above #rightcontent for this one:
#rightcontent {
width:82%;
float:right;
background:#D3C9B4;
margin-right:2em;
}
... and now it tucks nicely into the corner of the other two divs, just like it should. Floating left wasn't working; float right with a narrower than expected width % worked fine, at least on all the browsers & resolutions I've bothered to test it on.
If anyone wants to see what it looks like currently:
http://wind.prohosting.com/~warbard/games.html
This is one of those "I can make it work, but don't ask me to explain it" moments...
| |
|
|
|
c1sissy
Posts: 5084
Joined: 7/20/2002
From: NJ
Status: offline
|
RE: Flow & Margins - 12/10/2003 7:03:11
quote:
ORIGINAL: BBurger
Trial-and-error wins again... I swapped the above #rightcontent for this one:
#rightcontent {
width:82%;
float:right;
background:#D3C9B4;
margin-right:2em;
}
... and now it tucks nicely into the corner of the other two divs, just like it should. Floating left wasn't working; float right with a narrower than expected width % worked fine, at least on all the browsers & resolutions I've bothered to test it on.
If anyone wants to see what it looks like currently:
http://wind.prohosting.com/~warbard/games.html
This is one of those "I can make it work, but don't ask me to explain it" moments...
BBurger:
Just a thought, but did you try giving your center content a margin-left:20px;(just an example of the amount of pixels) If you try this, it should also help to keep your words from flowing under.
Also, because IE is so forgiving of mistakes etc... try using one of other browsers for checking your styles in. I start with IE and then go to the oters, sort of backwards, but if you try that and get it to look good in them first, then you can most likely tweak it a tad,
Also, make sure that you take advantage of the @import if you are having too much trouble. There is a posting in here soemwhere that has a good bit of information regarding this.
If you are interested in a tutorial, let me know. I jsut took one that gives you the option of a certificate, it is $25.00 for it, but they are pretty good. Let me knwo and I'll post the link for you.
Here are two links for you
http://bluerobot.com/web/layouts/layout1.html
http://www.alistapart.com/
< Message edited by c1sissy -- 12/10/2003 7:05:07 AM >
_____________________________
Deb-aka-c4Ksissy
high panjandurum and alpha female of the silverback tribe
As decreed by Jesper 5-24-2003.
The only stupid question is... the one that is never asked!!
http://directory.css-styling.com
http://fmsforum.com
http://positioniseverything.net/
http://www.tanfa.co.uk/
| |
|
 New Messages |
 No New Messages |
 Hot Topic w/ New Messages |
 Hot Topic w/o New Messages |
 Locked w/ New Messages |
 Locked w/o New Messages |
|
Post New Thread
Reply to Message
Post New Poll
Submit Vote
Delete My Own Post
Delete My Own Thread
Rate Posts
|
|
|
Printable Version 
