ansaurus

Question

Content area not expanding with the content within it!

Answer 1

+2 A:

Before doing anything else, pick a doctype. The one you have right now defaults to quirks mode in all browsers which, quite frankly, is going to give a lot of interesting results depending on what browser you are viewing the site in.

I'd recommend html 4.01 strict, but some people like the xhtml strict option as well. Either way, make sure the doctype is formatted correctly. Otherwise it's still going to default to quirks.

Once that is done you'll have a set of rules that are dependable that you can work with.

UDPATE: Okay, now that you have a good doctype. Add another div inside the league_menu_links to clear the floats from the league_link_wrap divs. exa:

<div id="league_menu_links">
<div class="league_link_wrap">some text</div>
<div class="league_link_wrap">some text</div>
<div class="league_link_wrap">some text</div>
<div style="clear:both;"></div>
</div>

That will signal to the browser that the floated divs are to be contained by that outer div and cause the outer div to expand accordingly

Chris Lively 2010-05-07 16:39:44

Hmm, As far as I knew using the doctype in that way was safe for HTML5. Ill try html 4.01 strict as you suggest

TankDriver 2010-05-07 16:42:31

I think is is safe, but you're not selecting any specific doctype at all so it defaults to quirks. Chris sounds more knowledgeable on this.

ANeves 2010-05-07 16:51:00

Yeah I set it to 4.01 strict and my validation is getting all kinds of errors showing up now that I have no clue how to fix.I have only been doing HTML/CSS with divs and CSS for about a week. I used to use tables and inline styling so it was pretty bad lol

TankDriver 2010-05-07 17:06:58

Thanks a lot! Seems like everyone suggested this just as I found it (except the other place I found it used a br rather than an empty div.

TankDriver 2010-05-07 17:58:15

Answer 2

+1 A:

Since you're floating the elements inside the #league_menu_links div, it is not expanding with it's children.

One hack-around would be to add an empty div with clear:left; as the last element child of #league_menu_links, like so:

<div id="league_menu_links">
    <div class="league_link_wrap">
        ...
    </div>
    ...
    <div style="clear: left;"></div>
</div>

I also suggest using ul and li instead of divs, in that situation. It is a list of items, after all.

ANeves 2010-05-07 16:43:51

Well I tried ul, li and it was not lining up the way I wanted it (horizontally) and no matter what I seemed to do I could not get it to lineup properly. So I went to using a div so I can get the alignment you see there.I used the list-style-image and added the bullet however the spacing around the bullet was more than the size of the bullet image and the links to the right side would have the bullet overlapping the left side links.I will try the empty div with clear:left;thanks!

TankDriver 2010-05-07 16:51:30

I tried adding a empty div with the class of .league_menu_clear within the div of #league_menu_links and it did not do anything, so I tried to move it to wrap around both the billeted links and the content above it and that also did nothing. Maybe i misunderstand what you meant by "element child of #league_menu_links"

TankDriver 2010-05-07 16:59:56

also tried adding a div with no class and adding #league_menu_links div with clear: left; and that just threw it off more and also moved the red module text to the right instead of where it is now.

TankDriver 2010-05-07 17:03:27

I edited with an example. Also, for reading when you have time and will, a very good article about styling lists: http://www.alistapart.com/articles/taminglists/

ANeves 2010-05-07 17:46:31

yes, right as you updated this I found another post that suggested using a <br> with a class that contained clear: both;I am not sure if clearing just the left will work or not however adding <br class="clear"> with .class { clear:both; } worked perfectly!Thanks!

TankDriver 2010-05-07 17:49:08

To line up lists horizontally you can use the css rule `li { display: inline; }`. To manage the space available for the bullet you can change the padding-left of the `li`. Seems like you had a problem with using `float: left;` instead of `display: inline;`.

ANeves 2010-05-07 17:50:11

@TankDriver: clearing just the left will work, because the items you want to take into account are only floated left.

ANeves 2010-05-07 17:51:56

@TankDriver: You might consider just putting a html level style on the BR tag itself to clear:both; Saves typing time and is pretty much always what you want the BR tag to do anyway.

Chris Lively 2010-05-07 18:02:01

@ANeves so html br { clear: both; } something to that effect? update: added that and works great! Thanks.

TankDriver 2010-05-07 18:29:15

(meh, weekends) @TankDriver - no, that was ChrisLively's suggestion. I suggest using: an empty div with a particular class - `<div class="clearPreviousItems"></div>`; and the corresponding css - `.clearPreviousItems{ clear: both; }`. That's a bit of a semantic hack, but it's a necessary evil. Using `br` causes side-effects: try adding 10 `br` in the end, and you'll see that space gets added. Try adding ten empty `div` in the end, and you'll see that no space gets added because they collapse when they have no content.

ANeves 2010-05-10 09:46:34

Answer 3

A:

Instead of using the clearfix method, many people also add a style declaration of overflow: hidden; to your div#league_menu_links.

This will make that div know the height of its children and wrap around them. The one downside to this is if in the future you give that wrapping div a defined height, then the content will appear to be cut off.

Braxo 2010-05-07 17:53:01

Thanks! I will add overflow: hidden; to my #league_menu_links as well as add the empty div with the clear: left; just to be sure I have all the bases covered.

TankDriver 2010-05-07 18:00:23

ansaurus

tags:

views:

answers:

Content area not expanding with the content within it!

related questions