[css-d] 2 col layout, left - fixed width, no float (?)
A layout I'm working on right now uses these classes
to position a vertical nav bar to the left of my
content:
.parentLeft {float: left; width: 190px; height: 500px;
margin: 10px 0 10px 5px;}
.parentRight {margin-left: 205px; height: 500px;
margin: 10px 10px 10px; 0}
This works really well, until a large form element
(like a wide textarea) appears in the content. When
the window is resized, the textarea resists the
resize, and the whole content area moves below the
nav.
I know this is normally expected and even desired
bahavior, but in this specific instance, I would
rather there was a little horizontal scrolling. How
can I have a 2 col layout with the left column fixed
width, the right column fluid width, and horizontal
scroll bars on resize, instead of floating?
__
Do You Yahoo!?
Tired of spam? Yahoo! Mail has the best spam protection around
http://mail.yahoo.com
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] border-collapse and padding
Source file: http://james.globalhavens.com/css-discuss/webtop/2col-scroll.html I'm trying to get columns lined up between three stacked tables, the middle one of which is in a scrolling DIV. The scroll bar has pushed the content in, so the %-width columns have adjusted, and no longer line up with the header and footer. To fix this, I've tried to add 19px of padding to the table, to adjust for the scrollbar. This works in Firefox, where I could use border-spacing, but not in IE, where I was forced to use border-collapse. Can anyone think of a CSS way to do this, without adding an extra element to the page? As well, if there any way to declare a background-color for a TR? The padding space won't pick up the color so far, unless I format the table itself, which I'd rather not do. So far, TR and TBODY/THEAD/TFOOT seem to not take the property. Thanks for your help (and a special thanks to David Laakso, who solved the earlier float problem). James __ Do You Yahoo!? Tired of spam? Yahoo! Mail has the best spam protection around http://mail.yahoo.com __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] Problems with 2 Col Floated Layout and scrolling tables
Source file is here: http://james.globalhavens.com/css-discuss/webtop/2col-scroll.html I've been fighting with this two col layout for a while now - left col static width, right col flexible - and I've finally got it working in Firefox. As you'll see, it's not ready in IE. Even though the main parent div on the right side is lining up properly, the bulk of the content is insisting on breaking after the lower edge of the left div. Getting rid of the three "width: 100%" occurences seems to fix that problem, but creates a host of other ones. Does anyone have any ideas? As well, you can see the scrolling table on the right. I've ended up going with the three table and scrolling div solution, becuase I just couldn't get TBODY scrolling working in IE, even with that excellent demo.Now I've got Firefox and IE making different choices about where the scroll bar goes on that div - Firefox put it inside and bumps the content (which I had aligned with a ), and IE hangs the scroll off the right, leaving the content alone, but disrupting the layout. Any tips on making it uniform? Thanks for the help anyone can offer. James __ Do You Yahoo!? Tired of spam? Yahoo! Mail has the best spam protection around http://mail.yahoo.com __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Problems getting one class to show, too many !importants, help!
Thanks for taking a look. I cleaned up the HTML, and
it validates XHTML Transitional now, with valid CSS.
The problem ended up being that I hadn't "float:
left"-ed the webtopMenuIconDiv DIVs; changing that
makes the line appear now. But now, the icons are all
aligned left, and no amount of text-align: center and
margin-left/right: auto will push them back to the
middle (in Firefox - IE is fine).
Any suggestions?
Is it still breaking in Safari? (I'd love to test, but
don't have access to a Mac).
--- Charles Stuart <[EMAIL PROTECTED]> wrote:
>
>
> On May 11, 2005, at 2:16 PM, James Hallam wrote:
>
> > Source file is here:
> >
> >
>
http://james.globalhavens.com/css-discuss/webtop/webtop.html
> >
> > If you look at the HTML at the bottom, there are a
> few
> > DIVs with the class "webtopMenuIconDiv" that are
> > supposed to group the icons on the second row,
> > providing a little padding, and a visible vertical
> > line. This is what I've currently got:
> >
> > #webtopMenuIconDiv {
> > border-right: 1px #D8D2BD solid !important;
> > padding: 0 10px 0 10px !important;
> > background-color: pink !important;
> > }
> >
> > Nothing shows up, however. No spacing, no border.
> > You'll see that the code is starting to become
> > littered with !important, something I'm not so
> happy
> > with.
> >
> > Can anyone spot something I've missed, or offer a
> > suggestion? The content will eventually be
> generated
> > server side, so I really want a container div to
> hold
> > these icons for context, and not just provide the
> line
> > through some other means.
> >
> > I'm working with IE 6 and Firefox 1.0.3 - those
> are
> > are the only targetted browsers for now.
> >
>
> In Safari your circular buttons + labels are in two
> rows, with the
> second row starting at "reinsurance".
>
> Your HTML code appears to be quite sloppy -> empty
> class names, extra
> divs, etc. I would clean this up and then see how
> everything looks.
>
> If it doesn't work in Safari, even though you're not
> targeting it, it's
> an implication of why you're having problems...
>
>
>
>
> HTH
>
>
> best,
>
> Charles
>
>
>
__
> css-discuss [EMAIL PROTECTED]
> http://www.css-discuss.org/mailman/listinfo/css-d
> List wiki/FAQ -- http://css-discuss.incutio.com/
> Supported by evolt.org --
> http://www.evolt.org/help_support_evolt/
>
__
Post your free ad now! http://personals.yahoo.ca
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] Problems getting one class to show, too many !importants, help!
Source file is here:
http://james.globalhavens.com/css-discuss/webtop/webtop.html
If you look at the HTML at the bottom, there are a few
DIVs with the class "webtopMenuIconDiv" that are
supposed to group the icons on the second row,
providing a little padding, and a visible vertical
line. This is what I've currently got:
#webtopMenuIconDiv {
border-right: 1px #D8D2BD solid !important;
padding: 0 10px 0 10px !important;
background-color: pink !important;
}
Nothing shows up, however. No spacing, no border.
You'll see that the code is starting to become
littered with !important, something I'm not so happy
with.
Can anyone spot something I've missed, or offer a
suggestion? The content will eventually be generated
server side, so I really want a container div to hold
these icons for context, and not just provide the line
through some other means.
I'm working with IE 6 and Firefox 1.0.3 - those are
are the only targetted browsers for now.
Thanks for the help!
James
__
Post your free ad now! http://personals.yahoo.ca
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
