• 0

CSS 'float' attribute.


Question

Hi,

I'm currently using WordPress on my (in-progress) personal website and I'm making a theme from the 'Kubrick' theme that ships with the software. The only problem is that in the CSS the two content areas (Main Area | Sidebar) are controlled with 'float: left' and 'float: right'. While this is fine, on shorter pages the actual content area only goes as far as the sidebar.

So, my question is, is there a. a better way to do the two areas or b. a way to force the background to go as far as any content? I haven't finished re-doing the code yet so cosmetically some of it doesn't match up, but that isn't the most important thing yet.

I'd say my knowledge with XHTML and CSS is basic at best, so I'm sure some flaky thing I've done with CSS has caused this to happen. :p

Here's a link to a problem page.

http://jamesyfx.com/blog/?page_id=2

Thanks for any advice!

Link to comment
Share on other sites

19 answers to this question

Recommended Posts

  • 0

Container divs that only contain floating elements will not expand vertically. You either have to float the container, or doing something like this.

Absolutely ludicrous that this kind of thing won't be resolved until CSS3.

Link to comment
Share on other sites

  • 0

just add overflow:hidden to div#bodyContent

div#bodyContent {   
 color: #292f33; 
   text-shadow: 1px 1px 0px #e1e5e8;    
background: #f6f7f8 url('/../images/contentbackground.png') repeat-x top left;   
 padding: 12px; 
overflow:hidden;}

Link to comment
Share on other sites

  • 0

You need to clear the float. This is why the container isn't expanding with the content.

Just before the div closes for #bodyContent, create <div class="clear"></div> and in your CSS add:

 .clear {
  clear: both;
 }

Link to comment
Share on other sites

  • 0

That simple?! I need to learn CSS better I spose. :shiftyninja:

Thank you.

Link to comment
Share on other sites

  • 0

just add overflow:hidden to div#bodyContent

div#bodyContent {   
 color: #292f33; 
   text-shadow: 1px 1px 0px #e1e5e8;    
background: #f6f7f8 url('/../images/contentbackground.png') repeat-x top left;   
 padding: 12px; 
overflow:hidden;}

Remember he will also need to add a width to trigger hasLayout in IE6.

Link to comment
Share on other sites

  • 0

Yup, I just placed some similar code at the top of the footer template, worked a treat.

Pretty much done with theming WordPress now. Woop Woop! :p

Thank you for assisting. Might as well use up those Rep points I have. :laugh:

Link to comment
Share on other sites

  • 0

People *still* work with IE6 for compatibility?

If my website was for business purposes, I damn sure would.

But since it's just my personal space... I don't even worry about it. All my

friends stay with the times. :)

Link to comment
Share on other sites

  • 0

I don't support IE6 for myself OR my clients (or when I do contract based work for firms.) Majority of the web firms now are ditching support for it. I can understand if you're developing an intranet for a company that still uses IE6.. otherwise you keep supporting it then people have no reason to upgrade.

Anyway that's entirely off topic and the original issue was already resolved. :)

Link to comment
Share on other sites

  • 0

I support IE6 to an extent. The website should be functional and have the basic structure in tact. If all you need to get something working in IE6 is one extra line in the CSS, then I don't see why you wouldn't do it.

Link to comment
Share on other sites

  • 0

I'm definitely not 'supporting' old browsers. The website will still work fine.

If any of it is broken, then just let it stay broken. It'll still be readable and whatnot. Users of IE6 generally won't care what a website looks like in general, I bet.

Link to comment
Share on other sites

  • 0

People *still* work with IE6 for compatibility?

Personally.... **** no (unless it's really necessary) :p

The sooner we creators ditch it the sooner it dies!

Link to comment
Share on other sites

This topic is now closed to further replies.
  • Recently Browsing   0 members

    • No registered users viewing this page.