 | |
divs/layout question (FF problem..)
Cascading Style Sheets Layout/presentation on the WWW (comp.infosystems.www.authoring.stylesheets)
 |
| | Thread Tools | Display Modes |
#1
 
| |||
| |||
|
divs/layout question (FF problem..) -
10-21-2007
, 02:58 AM
#2
| |||
| |||
|
|
pls look @ this pg, http://www.mayacove.com/design/divs.html in IE and FF.. in IE it looks fine, but in FF the main div (centered, 800px wide, blue background; in reality the bg will be white..) won't display all the way down... (I tried height:100% for it but it still only went as high as the browser window..) only reason am having this problem is that I want to do a background-image BEHIND the main div.. but it's not cooperating...  in FF the footer also appears in wrong place.. have spent a long time on this..... am almost ready to switch to table-based layout.. it would make this so much simpler.... (this is for a blog, though, and for blogs layouts are always done in divs..) |
In cases like this, it is best to start with valid html. Would
you mind reproducing this with the bare minimum code and styles
that display the problem you have, starting with valid code with
a proper doctype?
--
dorayme
#3
| |||
| |||
|
|
In article <ffetbd$b9e$1 (AT) aioe (DOT) org>, maya <maya778899 (AT) yahoo (DOT) com wrote: pls look @ this pg, http://www.mayacove.com/design/divs.html in IE and FF.. in IE it looks fine, but in FF the main div (centered, 800px wide, blue background; in reality the bg will be white..) won't display all the way down... (I tried height:100% for it but it still only went as high as the browser window..) only reason am having this problem is that I want to do a background-image BEHIND the main div.. but it's not cooperating... in FF the footer also appears in wrong place.. have spent a long time on this..... am almost ready to switch to table-based layout.. it would make this so much simpler.... (this is for a blog, though, and for blogs layouts are always done in divs..) In cases like this, it is best to start with valid html. Would you mind reproducing this with the bare minimum code and styles that display the problem you have, starting with valid code with a proper doctype? |
http://validator.w3.org/check?uri=ht...e&ss=1&group=0
(and took out unnecessary css..)
thank you very much....
#4
| |||
| |||
|
|
pls look @ this pg, http://www.mayacove.com/design/divs.html in IE and FF.. in IE it looks fine, but in FF the main div (centered, 800px wide, blue background; in reality the bg will be white..) won't display all the way down... (I tried height:100% for it but it still only went as high as the browser window..) |
You have specified height: 600px for that div with the white background.
That is what FF is giving you. 600 pixels, just like you said.
If you do not want the content of that div to escape out of the bottom of
the div then do not give that div any height. And why 600 pixels. Are you
trying to anticipate the height of my browser canvas? Well, you have got it
totally wrong :-)
Quote:
|
only reason am having this problem is that I want to do a background-image BEHIND the main div.. but it's not cooperating... in FF the footer also appears in wrong place.. have spent a long time on this..... am almost ready to switch to table-based layout.. it would make this so much simpler.... |
the content div. Why do you give it a width in pixels. That in itself causes
me to suddenly lose interest.
Quote:
|
(this is for a blog, though, and for blogs layouts are always done in divs..) |
--
Richard.
#5
| |||
| |||
|
|
dorayme wrote: In article <ffetbd$b9e$1 (AT) aioe (DOT) org>, maya <maya778899 (AT) yahoo (DOT) com wrote: pls look @ this pg, http://www.mayacove.com/design/divs.html in IE and FF.. in IE it looks fine, but in FF the main div (centered, 800px wide, blue background; in reality the bg will be white..) won't display all the way down... (I tried height:100% for it but it still only went as high as the browser window..) only reason am having this problem is that I want to do a background-image BEHIND the main div.. but it's not cooperating... in FF the footer also appears in wrong place.. have spent a long time on this..... am almost ready to switch to table-based layout.. it would make this so much simpler.... (this is for a blog, though, and for blogs layouts are always done in divs..) In cases like this, it is best to start with valid html. Would you mind reproducing this with the bare minimum code and styles that display the problem you have, starting with valid code with a proper doctype? ok, the page validates now... http://validator.w3.org/check?uri=ht...design%2 Fdiv s.html&charset=%28detect+automatically%29&doctype= Inline&ss=1&group=0 (and took out unnecessary css..) |
Well done and thank you. I think that at the heart of the issue
bugging you is the business, much discussed recently about how
containers do not bestow their heights on floated children. That
is the way the rules on floats work out and most modern browsers
except IE follow these rules. (There are a lot of distractions in
your code (eg. you have height: 600px; on the content that looks
puzzling.) But never mind, essentially you are puzzled by the
colour not extending down in the following abstraction:
<div id="main" style="margin: 0pt auto; background: yellow;
width: 800px; height: 300px;">
<div id="content" style="border: 1px solid #c00; margin: 0pt 0px
0pt 10px; float: left; width: 590px; background-color: #fff;">
Lots and lots of text...(put in a whole lot to see)
</div>
</div>
Essentially you have no content in the main because it is taken
out of the flow.
If you stick in some text after <div id="main"...> but before
<div id="content" ...> you will see the yellow (I changed the
colour, sorry) grow. Or even after the <div id="content"...> but
before final </div>, exactly the same effect - because it is as
if the container is blind to the float, it will not bestow height
on it naturally. And you cannot do it by specifying a height
unless you know the height (and, mostly, in these situations, you
don't on principle).
There are some tricks. I understand that you can stick in <div
style="clear:both;</div> to make the container see a height. Thus:
<div id="main" style="margin: 0pt auto; background: yellow;
width: 800px;">
<div id="content" style="border: 1px solid #c00; margin: 0pt 0px
10px 10px; float: left; width: 590px; background-color: #fff;">
Lorem Ipsum, or Lipsum for short, is simply dummy text of the
printing and typesetting industry. Lipsum has been the industry's
standard dummy text ever since the 1500s, when an unknown printer
took a galley of type and scrambled it to make a type specimen
book. It has survived not only four centuries, but now the leap
into electronic typesetting, remaining essentially unchanged. It
was popularised in the 1960s with the release of Letraset sheets
containing Lipsum passages, and more recently with desktop
publishing software like Aldus PageMaker including versions of
Lipsum.Lorem Ipsum, or Lipsum for short, is simply dummy text of
the printing and typesetting industry. Lipsum has been the
industry's standard dummy text ever since the 1500s, when an
unknown printer took a galley of type and scrambled it to make a
type specimen book. It has survived not only four centuries, but
now the leap into electronic typesetting, remaining essentially
unchanged. It was popularised in the 1960s with the release of
Letraset sheets containing Lipsum passages, and more recently
with desktop publishing software like Aldus PageMaker including
versions of Lipsum.Lorem Ipsum, or Lipsum for short, is simply
dummy text of the printing and typesetting industry. Lipsum has
been the industry's standard dummy text ever since the 1500s,
when an unknown printer took a galley of type and scrambled it to
make a type specimen book. It has survived not only four
centuries, but now the leap into electronic typesetting,
remaining essentially unchanged. It was popularised in the 1960s
with the release of Letraset sheets containing Lipsum passages,
and more recently with desktop publishing software like Aldus
PageMaker including versions of Lipsum.
</div>
<div style="clear:both;</div>
</div>
--
dorayme
#6
| |||
| |||
|
#7
| |||
| |||
|
|
In article doraymeRidThis-F7D288.19255621102007...ptusnet.com.au>, dorayme <doraymeRidThis (AT) optusnet (DOT) com.au> wrote: In my last, I should have typed the > after "both;" to read: div style="clear:both;></div |
<div style="clear:both;"></div>
--
dorayme
#8
| |||
| |||
|
|
In article doraymeRidThis-79990B.19353521102007...ptusnet.com.au>, dorayme <doraymeRidThis (AT) optusnet (DOT) com.au> wrote: In article doraymeRidThis-F7D288.19255621102007...ptusnet.com.au>, dorayme <doraymeRidThis (AT) optusnet (DOT) com.au> wrote: In my last, I should have typed the > after "both;" to read: div style="clear:both;></div o shit... div style="clear:both;"></div |
'Twas a good day for it. Myself, well, in the garden shovelling dirt around
:-(
--
Richard.
#9
| |||
| |||
|
|
"maya" <maya778899 (AT) yahoo (DOT) com> wrote pls look @ this pg, http://www.mayacove.com/design/divs.html in IE and FF.. in IE it looks fine, but in FF the main div (centered, 800px wide, blue background; in reality the bg will be white..) won't display all the way down... (I tried height:100% for it but it still only went as high as the browser window..) In this case (as usual) IE is getting it wrong. You have specified height: 600px for that div with the white background. That is what FF is giving you. 600 pixels, just like you said. |
div... and those are there purely for testing purposes, in real life
I'm not specifying height for ANY divs...
if I take out 'float:left;' for left-div as you suggest, the div is
centered, and putting 'align="left" in the div tag outside css did not
center it..
my gosh, this is working now....
even in FF...http://www.mayacove.com/design/divs.html
not sure what did it.. (I even left float:left for the left-content div,
and it still works now.. and am not sure what changed....
I don'tbelieve this, I spent so much time on this yesterday...
thank you very much...
Quote:
|
If you do not want the content of that div to escape out of the bottom of the div then do not give that div any height. And why 600 pixels. Are you trying to anticipate the height of my browser canvas? Well, you have got it totally wrong :-) only reason am having this problem is that I want to do a background-image BEHIND the main div.. but it's not cooperating... in FF the footer also appears in wrong place.. have spent a long time on this..... am almost ready to switch to table-based layout.. it would make this so much simpler.... You could start by omiting most of your positioning stuff. Why do you float the content div. Why do you give it a width in pixels. That in itself causes me to suddenly lose interest. (this is for a blog, though, and for blogs layouts are always done in divs..) Is that right? :-) |
#10
| |||
| |||
|
|
my gosh, this is working now.... even in FF... http://www.mayacove.com/design/divs.html |
still the predominant brower.)
Why not just do this:
<div id="main">
<div id="header">content</div>
<div id="content">content</div>
<div id="sidebar">content</div>
<div id="footer">content</div>
</div>
And the barebones CSS:
#main {
width: 800px;
margin: 0 auto;
}
#content {
width: 500px; /* or whatever */
float: left;
}
#sidebar {
width: 200px;
float: right;
}
#footer {
clear: both;
}
Clearing the footer will cause #main to contain the floated divs, hence
you'll see the background colour all the way down.
|
« Previous Thread
|
Next Thread »
| Thread Tools | |
| Display Modes | |
Linear Mode
| |
Powered by vBulletin Version 3.5.4
Copyright ©2000 - 2009, Jelsoft Enterprises Ltd.
Copyright ©2000 - 2009, Jelsoft Enterprises Ltd.