CSS Help needed

[leafypiggy]

No clue what I did. Haha. I coded this as static height (for the posts) and when I changed it to a dynamic height, it's all messed up.

Spent 2+ hours trying to fix it, but got nowhere. What really creeps me out is that it works better in Internet Explorer than it does in FF.

Files will be uploaded when I get home. Just don't really have the files on this PC which is connected to the internet atm.

Thought i'd post this before I forgot.

A working version (kinda, still has static height) can be seen at http://24.61.155.176/Christmas/ (It's the "posts" thing that isn't working right. Try changing the values of height for .post and .left to auto..
Edit:
Updated version online at http://24.61.155.176/Christmas/

The old index.html and style.css are located at http://24.61.155.176/Christmas/index.html.bak and http://24.61.155.176/Christmas/style.css.bak

Any help is appreciated. Should look like this: http://neilhanlon.com/Designs/VizoXidy Christmas Blog altered.png (essentially, basic design)

 

[xav0989]

Just add

<div style="clear: both"> </div>

right before the post closing div. You should always have a clearing div when using floats.

 

[leafypiggy]

Sweet! Thanks. Now I just gotta make the left part of the post expand to fill the rest of the post after it overflows the normal thing.

 

[xav0989]

Sweet! Thanks. Now I just gotta make the left part of the post expand to fill the rest of the post after it overflows the normal thing.

You lost me pal!

 

[misson]

You should always have a clearing div when using floats.

For reference, other ways of clearing floats.

The old index.html and style.css are located at http://24.61.155.176/Christmas/index.html.bak and http://24.61.155.176/Christmas/style.css.bak

Appending the ".bak" extension causes browsers to download the files rather than display them. You might want to put the ".bak" before the other file extension.

Sweet! Thanks. Now I just gotta make the left part of the post expand to fill the rest of the post after it overflows the normal thing.

Are you referring to a two-column layout? That is, vertical expansion so both columns are the same height and nothing is cut off. If so, "Multi-Column Layouts Climb Out of the Box" describes one way and links to many others.

 

[leafypiggy]

Yeah, it should do it now... but for some reason it's not.

I've done it before multiple different ways, but none of them seem to work. The Left (candycane pattern) won't expand to fill up the whole post.

 

[misson]

it should do it now...

I'm not seeing why. #posts .post .left is floated, and the parent doesn't use faux-columns.

 

[leafypiggy]

#posts and .post aren't floated, and if they are, they should be.

.left is floated for styling purposes. It wouldn't affect the layout expanding.

 

[coolv1994]

Well if your website is W3C complient with HTML 4.0 or XTML 1.0+ then you can not use a dynamic height for your page. I've tried it before and I would reccommend using HTML 3.0, that is my suggestion.

 

[misson]

#posts and .post aren't floated, and if they are, they should be.

#posts .post .left refers to the one element that matches the selector, as opposed to #posts, .post, .left, which would match multiple. Sorry for taking the short-'n'-unclear route. Perhaps I'll user #posts>.post>.left to emphasize that I'm using a selector.

.left is floated for styling purposes. It wouldn't affect the layout expanding.

Ah, but it does. Not clearing the floating descendents of #posts>.post is what keeps a .post from expanding. Floating #posts>.post>.left keeps you from using the "bottom" attribute, which is the easiest way of stretching the height of an element.

In any case, I'm not seeing anything in the style sheet that will stretch out #posts>.post>.left or its descendents to equalize the height with .post>.post-content.

 

[leafypiggy]

Ah thank you, I didn't know you were referring to the selector.

I'll try that. Thanks.

Kinda embarressed. Never really needed css help before. Haha
Edit:

Well if your website is W3C complient with HTML 4.0 or XTML 1.0+ then you can not use a dynamic height for your page. I've tried it before and I would reccommend using HTML 3.0, that is my suggestion.

Not true at all. XHTML1.1 strict lets you have a dynamic height... Where did you get your information?
Edit:
Sorry for the Triple post.

I've fixed the floating issue (clearing the floats) however the .left element still doesn't float.

@Mission: I'm not sure that I understand what you mean. The block level element .float (#posts>.post>.left) should expand to fill up the rest of #posts>.post, no? Unless everything else I've ever coded i wrong...

 

[misson]

The block level element .float (#posts>.post>.left) should expand to fill up the rest of #posts>.post, no?

Not the vertical space. Vertical sizing has different rules than horizontal sizing. While block level, flowed elements with a width of "auto" generally expand to take whatever horizontal space the parent makes available, floating and flowed block elements will mostly wind up with height based on what their children need. This is a gross simplification; you'll need to read the standard for a description of the full behavior.

I see you've tried .left { height: 100% }. For that to work, you need to set an explicit height on the parent, otherwise the height property becomes "auto". From CSS 2.1, § 10.5 "Content height: the 'height' property":

<percentage>
Specifies a percentage height. The percentage is calculated with respect to the height of the generated box's containing block. If the height of the containing block is not specified explicitly (i.e., it depends on content height), and this element is not absolutely positioned, the value computes to 'auto'.

Trying to use absolute positioning rather than floating is tricky to impossible; don't try it.

Better to read the article (and the articles it linked to) that I posted before: "Multi-Column Layouts Climb Out of the Box". In particular, faux columns should work well on your page, as would the One True Layout. You also might be able to apply table styling to the <div>s. This is quite different from using <table>s for layout as it uses perfectly semantic HTML, though you'll have the table layout algorithms to contend with.

Speaking of semantic documents, the ".left" class isn't a very good choice of name. What if you ever decide you want to position the element above the post? You'll either need to go back and edit every page that uses ".left", or position .left along the top, which is weirder than the standard example (".left { float: right; }" when someone decides they want what used to be on the left to be on the right). Class names should be like HTML elements and describe the data within the element, rather than how the data will be displayed. Consider how you named the other classes: ".post", ".post-content" &c. I know you're running out of names with a "post-" prefix, but try to keep up that pattern.

Another standard behavior causing the layout problems you had is that when calculating the height of

10.6.3 Block-level non-replaced elements in normal flow when 'overflow' computes to 'visible'

Only children in the normal flow are taken into account (i.e., floating boxes and absolutely positioned boxes are ignored, and relatively positioned boxes are considered without their offset). Note that the child box may be an anonymous block box.

"visible" is the default value for overflow. This is why you need to clear the floats, or set overflow to (e.g.) "auto".

 

[leafypiggy]

I think I See what you mean. I'll be working on this tonight.