The Web Design Group

... Making the Web accessible to all.

Welcome Guest ( Log In | Register )

 
Reply to this topicStart new topic
> floating div tag problem!
kyle246
post Apr 22 2011, 07:58 PM
Post #1


Member
***

Group: Members
Posts: 57
Joined: 29-January 11
Member No.: 13,738



Hello. I do not know why it is not working.

I have two floating div tags ("#maincontent #insidemaincontent #floatleft" and "#maincontent #insidemaincontent #floatright") that are inside another div tag (#maincontent #insidemaincontent)

When I set the heights or put anything in the floating div tags, they do not expand the div tag that they are in (#maincontent #insidemaincontent)

I can't understand why it is not working.

Here is the link
http://thundertutorials.com/tutorials.html

thx,
kyle
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Apr 22 2011, 08:39 PM
Post #2


🌟Computer says no🌟
********

Group: WDG Moderators
Posts: 20,716
Joined: 9-August 06
Member No.: 6



Because floats aren't in the normal flow they don't add to the width or height of their parent element. If there isn't room for them they stick out. Give the parent div a background color or a border and you can see this. If you want the parent div to contain the floats you need to clear them.

http://css-discuss.incutio.com/wiki/Clearing_Space
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
kyle246
post Apr 22 2011, 08:48 PM
Post #3


Member
***

Group: Members
Posts: 57
Joined: 29-January 11
Member No.: 13,738



QUOTE(pandy @ Apr 22 2011, 08:39 PM) *

Because floats aren't in the normal flow they don't add to the width or height of their parent element. If there isn't room for them they stick out. Give the parent div a background color or a border and you can see this. If you want the parent div to contain the floats you need to clear them.

http://css-discuss.incutio.com/wiki/Clearing_Space

okay thanks
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Mobilize Studios
post Apr 22 2011, 09:29 PM
Post #4





Group: Members
Posts: 1
Joined: 22-April 11
Member No.: 14,389



I would recommend a tool called ClearFix ( found here ). It works a lot better than clearing elements that traditional way. To use it, simply apply a class of
CODE
.clearfix
to the container element. In your case, this would be #insidemaincontent. Hope this helps!
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Apr 22 2011, 09:57 PM
Post #5


🌟Computer says no🌟
********

Group: WDG Moderators
Posts: 20,716
Joined: 9-August 06
Member No.: 6



It's Option 2 at the page I linked to.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post

Reply to this topicStart new topic
1 User(s) are reading this topic (1 Guests and 0 Anonymous Users)
0 Members:

 



- Lo-Fi Version Time is now: 29th March 2024 - 05:46 AM