Re: [css-d] Div with one absolute and one relative boundary
richard hall wrote:
The problem I have in my case, is if I use this
#menu {
float: left;
width:199px;
background-color: #CC;
height:100%;
}
#content {
width:75%;
margin-left: 220px;
top:0;
font-family: Papyrus;
background-color:#FF;
}
div id=menu
/div
div id=content
/div
... Then there is a white space and yellow bar about the graphic at the top
of the menu in firefox and safari and I want the graphic to be flush against
the top of the browser.
http://www.inspirationcenter.net/midamericadharma/float.aspx
However when I use this:
#menu {
width:199px;
background-color: #CC;
height:100%;
}
#content {
position:absolute;
width:75%;
margin-left: 220px;
top:0;
font-family: Papyrus;
background-color:#FF;
}
... It seems to work correctly in firefox (man win), safari, and IE (win)
http://www.inspirationcenter.net/midamericadharma
Richard,
Get rid of the top margin on the h1 inside the div.
http://css-discuss.incutio.com/?page=CollapsingMargin
Zoe
--
Zoe M. Gillenwater
Design Services Manager
UNC Highway Safety Research Center
http://www.hsrc.unc.edu
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Div with one absolute and one relative boundary
The problem I have in my case, is if I use this
#menu {
float: left;
width:199px;
background-color: #CC;
height:100%;
}
#content {
width:75%;
margin-left: 220px;
top:0;
font-family: Papyrus;
background-color:#FF;
}
div id=menu
/div
div id=content
/div
... Then there is a white space and yellow bar about the graphic at the top
of the menu in firefox and safari and I want the graphic to be flush against
the top of the browser.
http://www.inspirationcenter.net/midamericadharma/float.aspx
However when I use this:
#menu {
width:199px;
background-color: #CC;
height:100%;
}
#content {
position:absolute;
width:75%;
margin-left: 220px;
top:0;
font-family: Papyrus;
background-color:#FF;
}
... It seems to work correctly in firefox (man win), safari, and IE (win)
http://www.inspirationcenter.net/midamericadharma
... I tried messing with top-margin=0 but couldn't get it to work ... Any
ideas/thoughs appreciated Richard
On 5/25/06 9:11 AM, Zoe M. Gillenwater [EMAIL PROTECTED] wrote:
Dave Goodchild wrote:
An absolutely positioned element will be positioned relative to its nearest
positioned parent (ie I tend to use a wrapper div with position: relative if
I am going to use absolutely positioned elements, but as I learn more I am
beginning to understand that floated layouts are much more flexible and in
line with the fluid medium we call the web. Am I right guys?
Yes. :-) Even fixed width layouts should employ floats, not absolute
positioning, to avoid the possibilities of overlaps. Only *really*
simple layouts can use absolute positioning safely.
Zoe
--
Richard H. Hall
http://www.umr.edu/~rhall
Save the internet - Preserve Network Neutrality!
http://www.savetheinternet.com
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Div with one absolute and one relative boundary
Dave Goodchild wrote: An absolutely positioned element will be positioned relative to its nearest positioned parent (ie I tend to use a wrapper div with position: relative if I am going to use absolutely positioned elements, but as I learn more I am beginning to understand that floated layouts are much more flexible and in line with the fluid medium we call the web. Am I right guys? Yes. :-) Even fixed width layouts should employ floats, not absolute positioning, to avoid the possibilities of overlaps. Only *really* simple layouts can use absolute positioning safely. Zoe -- Zoe M. Gillenwater Design Services Manager UNC Highway Safety Research Center http://www.hsrc.unc.edu __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] Div with one absolute and one relative boundary
I would like to create a division for content on a web page, where one side
of the division box is always a fixed set of pixels from the left (so it
won't cover the menu which is a set number of pixels), and I would like it
to cover about 80% of the remainder of the page, so it would be fixed on one
side and relative on the other, but I can't get this to work.
I tried
#content {
position:absolute;
left:213px;
width:80%;
top:7px;
height:272px;
}
But it didn't seem to work in any browsers/OS I tested with
Thanks ... Richard
--
Richard H. Hall
http://www.umr.edu/~rhall
Save the internet - Preserve Network Neutrality!
http://www.savetheinternet.com
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Div with one absolute and one relative boundary
have you tried something like:
.menu {
float: left;
width: 100px; /* or whatever */
}
.content {
margin-left: 100px;
}
div class=menu
/div
div class=content
/div
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Div with one absolute and one relative boundary
On 24/05/06, richard hall [EMAIL PROTECTED] wrote:
I would like to create a division for content on a web page, where one
side
of the division box is always a fixed set of pixels from the left (so it
won't cover the menu which is a set number of pixels), and I would like it
to cover about 80% of the remainder of the page, so it would be fixed on
one
side and relative on the other, but I can't get this to work.
I tried
#content {
position:absolute;
left:213px;
width:80%;
top:7px;
height:272px;
}
But it didn't seem to work in any browsers/OS I tested with
Thanks ... Richard
An absolutely positioned element will be positioned relative to its nearest
positioned parent (ie I tend to use a wrapper div with position: relative if
I am going to use absolutely positioned elements, but as I learn more I am
beginning to understand that floated layouts are much more flexible and in
line with the fluid medium we call the web. Am I right guys?
--
http://www.web-buddha.co.uk
dynamic web programming from Reigate, Surrey UK (php, mysql, xhtml, css)
look out for project karma, our new venture, coming soon!
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Div with one absolute and one relative boundary
This worked,
Thanks very much.
The interesting thing, though, is that it worked without the float.
When I put in the float it worked fine in safari and mozilla (mac pc), but
in IE it wanted to make the margin-left so many pixels from the menu
division, rather than from the side of the page.
The page is here, for the record,
http://www.inspirationcenter.net/midamericadharma
... Thanks again ... Richard
On 5/24/06 12:40 PM, cj [EMAIL PROTECTED] wrote:
have you tried something like:
.menu {
float: left;
width: 100px; /* or whatever */
}
.content {
margin-left: 100px;
}
div class=menu
/div
div class=content
/div
--
Richard H. Hall
http://www.umr.edu/~rhall
Save the internet - Preserve Network Neutrality!
http://www.savetheinternet.com
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Div with one absolute and one relative boundary
The interesting thing, though, is that it worked without the float.
that's because you absolutely positioned it when it shouldn't be. :)
change your content to be:
#content {
margin-left: 220px;
height:800px;
font-family: Papyrus;
background-color:#FF;
}
i'd also recommend taking out the set heights for both your menu and
content areas. if someone ever resizes the font size, they might run
into some problems.
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
