SitePoint Sponsor |
|
User Tag List
Results 1 to 11 of 11
-
Sep 13, 2007, 20:48 #1
- Join Date
- Dec 2003
- Location
- USA
- Posts
- 2,582
- Mentioned
- 29 Post(s)
- Tagged
- 0 Thread(s)
Get a div to watch something float
Hello,
http://www.aggis-topography.com/azureronin
Basically, I have a <div> and then have floating <divs> inside. One of those floating <div>s I want to have a variable size, and I want the div that contains it to grow accordingly. However, since the div is floating, it won't.
How can I correct this situation?
Here is a quick view of the core pieces of this code:
Code:<div id="main"> <div id="header"></div> <div id="menu" class="float_left"></div> <div id="content_area" class="float_right"> <div id="inner_content_area" class="float_left"> <div id="content"></div> <div id="footer"></div> </div> <div id="ronin" class="float_right"></div> </div>
The core of this question is basically "can I make something floating affect the size of it's parent"?
I know I could redo my CSS to use positioning elements instead of making it float, which I may have to do.
Thanks.Xazure.Net - My Blog - About Programming and Web Development
Follow Me on Twitter!
Christian Snodgrass
-
Sep 13, 2007, 21:02 #2
- Join Date
- Oct 2005
- Location
- Brisbane, QLD
- Posts
- 4,067
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
That's a bad idea - it means the overall size of your layout could change from page to page dependent on the contents and there'll be no consistency.
-
Sep 13, 2007, 21:08 #3
- Join Date
- Dec 2003
- Location
- USA
- Posts
- 2,582
- Mentioned
- 29 Post(s)
- Tagged
- 0 Thread(s)
That was meant to be the point. There would be a min-height set to allow to be the smallest, but then it would grown vertically in order to display more content.
Is that considered a "bad design" now a days in favor of having just the content div scroll?Xazure.Net - My Blog - About Programming and Web Development
Follow Me on Twitter!
Christian Snodgrass
-
Sep 13, 2007, 21:29 #4
- Join Date
- Oct 2005
- Location
- Brisbane, QLD
- Posts
- 4,067
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
Sorry, I think I misunderstood you. I thought you were talking about the width of the container changing based on the width of the float, but you're actually talking about your container not containing the floats. What you need to do is clear your floats.
-
Sep 13, 2007, 21:33 #5
- Join Date
- Dec 2003
- Location
- USA
- Posts
- 2,582
- Mentioned
- 29 Post(s)
- Tagged
- 0 Thread(s)
Ah, thank you.
Xazure.Net - My Blog - About Programming and Web Development
Follow Me on Twitter!
Christian Snodgrass
-
Sep 13, 2007, 22:01 #6
- Join Date
- Dec 2003
- Location
- USA
- Posts
- 2,582
- Mentioned
- 29 Post(s)
- Tagged
- 0 Thread(s)
Hmmm, I still have a problem.
If I use overflow: hidden, it just hacks off the extra (of course).
If I use overflow: auto, it gives the main section a scroll bar (as expected). But I want the scrollbar to be the typical scrollbar, not one in the middle of the page.
As for display: table and display: table-cell, they seem to have no effect, except for expanding it about 10 pixels.
It is most obvious on this page: http://www.aggis-topography.com/azureronin/p/products
Am I missing something?Xazure.Net - My Blog - About Programming and Web Development
Follow Me on Twitter!
Christian Snodgrass
-
Sep 13, 2007, 22:31 #7
- Join Date
- Dec 2003
- Location
- USA
- Posts
- 2,582
- Mentioned
- 29 Post(s)
- Tagged
- 0 Thread(s)
I solved my problem. The problem was I was under a minor misconception. I knew that non-floating parents wouldn't wrap floating children, but it seems that floating parents also won't wrap non-floating children. I need to add "display:table" to both main and inner_content_area.
Thanks.Xazure.Net - My Blog - About Programming and Web Development
Follow Me on Twitter!
Christian Snodgrass
-
Sep 13, 2007, 23:02 #8
- Join Date
- Mar 2005
- Location
- USA
- Posts
- 5,482
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
No. It's because you set a height on #inner_content_area when you really wanted a min-height. Adding display:table had the same affect.
I recommend that you read these:
Internet Explorer and the Expanding Box Problem
Min-Height for IE/Win
The overflow declaration
Other than floating the parent of the floated element(s) too, which often isn't a good option, the PIE/Aslett approach is best for containing floated elements. The page Tyssen linked to demonstrated it, but left out the part needed for IE5.0/Win.
Here's the complete version:
Code:.clearfix:after { content: "."; display: block; clear: both; height: 0; visibility:hidden; } .clearfix {display: inline-block;} /* Hide from IE5/Mac \*/ * html .clearfix {height: 1px;} .clearfix {display:block;} /* End hide */
We miss you, Dan Schulz.
Learn CSS. | X/HTML Validator | CSS validator
Dynamic Site Solutions
Code for Firefox, Chrome, Safari, & Opera, then add fixes for IE, not vice versa.
-
Sep 13, 2007, 23:08 #9
- Join Date
- Oct 2005
- Location
- Brisbane, QLD
- Posts
- 4,067
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
I also wouldn't recommend using display: table as a float containment technique because I've seen it cause other unwanted problems in Firefox.
-
Sep 14, 2007, 01:07 #10
- Join Date
- Mar 2005
- Location
- USA
- Posts
- 5,482
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
Yeah, if I remember correctly, it can cause problems in at least some versions of Safari sometimes too.
P.S. Hello Tyssen.We miss you, Dan Schulz.
Learn CSS. | X/HTML Validator | CSS validator
Dynamic Site Solutions
Code for Firefox, Chrome, Safari, & Opera, then add fixes for IE, not vice versa.
-
Sep 18, 2007, 10:38 #11
- Join Date
- Dec 2003
- Location
- USA
- Posts
- 2,582
- Mentioned
- 29 Post(s)
- Tagged
- 0 Thread(s)
Thanks for the help.
Although, after going through all this it looks like we'll be switching back to our original plan to go with a content box that keeps it's size and just have overflow scroll within it.Xazure.Net - My Blog - About Programming and Web Development
Follow Me on Twitter!
Christian Snodgrass
Bookmarks