CSS Help needed

leafypiggy

Manager of Pens and Office Supplies
Staff member
Messages
3,819
Reaction score
163
Points
63
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)
 
Last edited:

xav0989

Community Public Relation
Community Support
Messages
4,467
Reaction score
95
Points
0
Just add
HTML:
<div style="clear: both"> </div>
right before the post closing div. You should always have a clearing div when using floats.
 

leafypiggy

Manager of Pens and Office Supplies
Staff member
Messages
3,819
Reaction score
163
Points
63
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. :p
 

xav0989

Community Public Relation
Community Support
Messages
4,467
Reaction score
95
Points
0
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. :p
You lost me pal!
 

misson

Community Paragon
Community Support
Messages
2,572
Reaction score
72
Points
48
You should always have a clearing div when using floats.
For reference, other ways of clearing floats.


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. :p
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.
 
Last edited:

leafypiggy

Manager of Pens and Office Supplies
Staff member
Messages
3,819
Reaction score
163
Points
63
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.
 

leafypiggy

Manager of Pens and Office Supplies
Staff member
Messages
3,819
Reaction score
163
Points
63
#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

Member
Messages
508
Reaction score
0
Points
16
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

Community Paragon
Community Support
Messages
2,572
Reaction score
72
Points
48
#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

Manager of Pens and Office Supplies
Staff member
Messages
3,819
Reaction score
163
Points
63
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. :p

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...
 
Last edited:

misson

Community Paragon
Community Support
Messages
2,572
Reaction score
72
Points
48
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

Manager of Pens and Office Supplies
Staff member
Messages
3,819
Reaction score
163
Points
63
I think I See what you mean. I'll be working on this tonight.
 
Top