4WebHelp
 FAQ  •  Search  •  User Groups  •  Forum Admins  •  Smilies List  •  Statistics  •  Rules   •  Login   •  Register
Toggle Navigation Menu

 div in a div problem
Post New TopicReply to Topic
View Previous Topic Print this topic View Next Topic
Author Message
OllieMaitland
Junior WebHelper
Junior WebHelper


Joined: 06 Dec 2003
Posts: 25

PostPosted: Tue Dec 09, 2003 3:56 pm (13 years, 11 months ago) Reply with QuoteBack to Top

Hi -

I was so impressed with your new site I have been experimenting with CSS as I have always used tables...

I have got everything to work in IE but having issues with the others, I think the problem is pretty elementary and how i have the divs layout. Basically it seems that the height in the CSS isn't doing anything...

Site : http://dev.byng-designs.com/byng/
CSS : http://dev.byng-designs.com/byng/template.css

Any suggestions?
OfflineView User's ProfileFind all posts by OllieMaitlandSend Personal MessageSend email
SfCommand
Senior WebHelper
Senior WebHelper


Joined: 10 Nov 2002
Posts: 143
Location: UK

PostPosted: Tue Dec 09, 2003 4:16 pm (13 years, 11 months ago) Reply with QuoteBack to Top

I encountered that problem myself, and now can't remember how I cured it.
I think it had something to do with display:inline (mozilla and firebird seem to not change the <div> height to surround the content (even if height has been declared))

________________________________
Miguel

http://community.34sp.com
http://www.miguel.me.uk | http://www.sfcommand.co.uk | http://www.ssdg.org.uk
OfflineView User's ProfileFind all posts by SfCommandSend Personal MessageVisit Poster's Website
adam
Forum Moderator & Developer



Joined: 26 Jul 2002
Posts: 704
Location: UK

PostPosted: Tue Dec 09, 2003 7:34 pm (13 years, 11 months ago) Reply with QuoteBack to Top

I ran your page throught the validator and there's quite a few errors there - my guess is that if you fix 'em it'll work as you want. You also need to specify a character encoding in a <meta> tag, though I chose one to get the validator to work Wink

________________________________
It's turtles all the way down...
OfflineView User's ProfileFind all posts by adamSend Personal MessageVisit Poster's Website
OllieMaitland
Junior WebHelper
Junior WebHelper


Joined: 06 Dec 2003
Posts: 25

PostPosted: Tue Dec 09, 2003 8:18 pm (13 years, 11 months ago) Reply with QuoteBack to Top

ah - ok, an embarrasing amount of errors there, i'll correct them and see what prevails... no doubt i'll be back here Wink
OfflineView User's ProfileFind all posts by OllieMaitlandSend Personal MessageSend email
OllieMaitland
Junior WebHelper
Junior WebHelper


Joined: 06 Dec 2003
Posts: 25

PostPosted: Thu Jan 08, 2004 7:07 pm (13 years, 10 months ago) Reply with QuoteBack to Top

Just to let anyone know who has this problem, there is a mozilla fix:

http://www.webmasterworld.com/forum83/1725.htm
OfflineView User's ProfileFind all posts by OllieMaitlandSend Personal MessageSend email
adam
Forum Moderator & Developer



Joined: 26 Jul 2002
Posts: 704
Location: UK

PostPosted: Thu Jan 08, 2004 8:10 pm (13 years, 10 months ago) Reply with QuoteBack to Top

heh, it wants a login...care to plagerize...er, I mean quote the content? Smile

________________________________
It's turtles all the way down...
OfflineView User's ProfileFind all posts by adamSend Personal MessageVisit Poster's Website
Daniel
Team Member



Joined: 06 Jan 2002
Posts: 2564

PostPosted: Thu Jan 08, 2004 8:16 pm (13 years, 10 months ago) Reply with QuoteBack to Top

I just visited the link and don't get asked to login... Question

________________________________
Image
OfflineView User's ProfileFind all posts by DanielSend Personal Message
OllieMaitland
Junior WebHelper
Junior WebHelper


Joined: 06 Dec 2003
Posts: 25

PostPosted: Thu Jan 08, 2004 8:17 pm (13 years, 10 months ago) Reply with QuoteBack to Top

hmmm - works with a referrer from google:

http://www.google.co.uk/search?hl=en&ie=UTF-8&oe=UTF-8&q=%22the+stretching+div+problem%22&meta=
OfflineView User's ProfileFind all posts by OllieMaitlandSend Personal MessageSend email
adam
Forum Moderator & Developer



Joined: 26 Jul 2002
Posts: 704
Location: UK

PostPosted: Thu Jan 08, 2004 9:36 pm (13 years, 10 months ago) Reply with QuoteBack to Top

Quote:
status: Either we require login from users from your ISP because of abuse, or the thread is marked members only. Please login and then back up to view.

heh, must be NTL...but the google thing worked Smile

________________________________
It's turtles all the way down...
OfflineView User's ProfileFind all posts by adamSend Personal MessageVisit Poster's Website
SfCommand
Senior WebHelper
Senior WebHelper


Joined: 10 Nov 2002
Posts: 143
Location: UK

PostPosted: Thu Jan 08, 2004 10:11 pm (13 years, 10 months ago) Reply with QuoteBack to Top

Nah, just just NThelL, but BY also Smile
I can't even view it from Google Surprised
So care to explain for the poor BY user.

________________________________
Miguel

http://community.34sp.com
http://www.miguel.me.uk | http://www.sfcommand.co.uk | http://www.ssdg.org.uk
OfflineView User's ProfileFind all posts by SfCommandSend Personal MessageVisit Poster's Website
OllieMaitland
Junior WebHelper
Junior WebHelper


Joined: 06 Dec 2003
Posts: 25

PostPosted: Thu Jan 08, 2004 10:29 pm (13 years, 10 months ago) Reply with QuoteBack to Top

From : Suzy ( http://www.webmasterworld.com/forum83/1725.htm )

Quote:

Moz is exhibiting the correct behaviour. Floated elements are not in the flow of the document so the parent element doesn't even know it's got any children Wink
the most common way to workaround this previously was to use a "spacer" div:
<div style="clear: both;"></div>
and this needed to be inserted in the HTML before closing the containing div.

However, there is another way to make a parent element "stretch" to contain its floated children elements using CSS only, which to me makes things much neater..

It uses the :after pseudo-element selector to produce "generated content", then clears this "content" using clear: both; (Note: Moz actually requires something in this content field, hence the need to specify line-height and font-size to "hide it" again.)

see this example:
Code:

CSS:
#container {
position: relative; /* required by NN */
width: 700px;
border: 1px solid #000;
background: #ffe;
margin:0 auto;
padding: 20px;
}
/* the workaround */
/* moz 1.4 requires something in the content field */
#container:after{
content: "."; display: block; line-height: 1px; font-size: 1px; clear: both;}

.leftfloat {
float: left;
width: 350px;
background: #cff;
}

.rightfloat {
float: right;
width: 350px;
background: #cfc;
}
 




HTML:
Code:

<div id="container">
<div class="leftfloat">...left floated div....</div>
<div class="rightfloat">...right floated div...</div>
</div> 
 



IE doesn't support the :after pseudo-element but then it doesn't have to it does what you want (wrongly) anyway!

This should work with your code above fungku..

Suzy
OfflineView User's ProfileFind all posts by OllieMaitlandSend Personal MessageSend email
thetribe
WebHelper
WebHelper


Joined: 10 Nov 2002
Posts: 62
Location: Ashington, Northumberland. UK

PostPosted: Fri Jan 09, 2004 10:42 am (13 years, 10 months ago) Reply with QuoteBack to Top

Excellent, got rid of all my spacers now Smile

________________________________
Phil.
My Musical Preferences
Image
OfflineView User's ProfileFind all posts by thetribeSend Personal MessageVisit Poster's Website
SfCommand
Senior WebHelper
Senior WebHelper


Joined: 10 Nov 2002
Posts: 143
Location: UK

PostPosted: Fri Jan 09, 2004 12:05 pm (13 years, 10 months ago) Reply with QuoteBack to Top

Thanks Ollie, and I love Suzy whoever she is Smile
Time to go get rid of some spacers/<br />s Smile

________________________________
Miguel

http://community.34sp.com
http://www.miguel.me.uk | http://www.sfcommand.co.uk | http://www.ssdg.org.uk
OfflineView User's ProfileFind all posts by SfCommandSend Personal MessageVisit Poster's Website
Display posts from previous:      
Post New TopicReply to Topic
View Previous Topic Print this topic View Next Topic


 Jump to:   




You cannot post new topics in this forum.
You cannot reply to topics in this forum.
You cannot edit your posts in this forum.
You cannot delete your posts in this forum.
You cannot vote in polls in this forum.


Page generation time: 0.080306 seconds :: 17 queries executed :: All Times are GMT
Powered by phpBB 2.0 © 2001, 2002 phpBB Group :: Based on an FI Theme