Help with floats

Discussion in 'Web Design and Development' started by harveypooka, Aug 25, 2007.

  1. harveypooka macrumors 65816

    Joined:
    Feb 24, 2004
    #1
    So I'm designing my website, http://www.harveypooka.net/.

    I am new to XHTML and CSS so you'll have to bear with me!

    If you have a look at site you'll see I have a menu on the left and the content to the right of it.

    If the window is resized to be small, the content that is floated automatically shifts down below the menu. I don't want this! I want the menu and the content to always be level...what am I doing wrong?

    It's going to be one of those really simple explanations isn't it...
     
  2. elppa macrumors 68040

    elppa

    Joined:
    Nov 26, 2003
    #2
    Simplest thing to do would to give your #container a width of 800px or so.

    One problem you may have then is that if you have any really long strings of text in the "menu" or "full_post" div then they will expand to fit, so 800px may not be enough.

    To solve this I would specify widths (percentages, em or pixels) for the menu and full post divs, then you know how wide your container has to be to fit the two nested elements.

    At the moment you have a width of 99% (this means 99% of the current window width), so as you are finding as soon as the user resizes the window to make it smaller than combined the width of the full_post and menu divs, the full_post div drops below the menu div.

    This is what I'd change

    Code:
    #menu {
    	float: left;
    	width: 10em;
    	margin: 2em 2em 2em 1em;
    	border: 1px solid #999;
    	padding: 1em;
    	background-color: white;
    }
    
    .full_post{
    	float: left;
    	width: 26em;
    	margin: 2em 2em 2em 1em;
    	border: 1px solid #999;
    	padding: 1em;
    	background-color: white;
    }
    
    #container {
    	width: 48em;
    	margin: 0 auto; // take out this line if you don't want it all centred	
    }
    
     
  3. theAesthetics macrumors newbie

    Joined:
    Aug 25, 2007
    Location:
    Columbus, OH
    #3
    Another easy way would be to set a min-width to the body tag. For example:

    body {
    min-width:800px;
    }


    This will keep your elements from 'collapsing' if the browser is resized smaller than the pixel amount you designate.
     
  4. elppa macrumors 68040

    elppa

    Joined:
    Nov 26, 2003
    #4
    Not supported on IE 6 though, which as far as I am aware is still extensively used.
     
  5. harveypooka thread starter macrumors 65816

    Joined:
    Feb 24, 2004
    #5
    Arg, I don't want fixed width though.

    Min width isn't supported by IE 6 so I'm not doing that.

    Any other way around? There must be!
     
  6. angelwatt Moderator emeritus

    angelwatt

    Joined:
    Aug 16, 2005
    Location:
    USA
    #6
    You can try adding this,

    HTML:
    .full_post {
     margin-left: 10.5em;
    }
    This is what I use at my web site. Works like a charm even in crappy IE.
     
  7. CoreWeb macrumors 6502

    Joined:
    Mar 2, 2007
    Location:
    Edge of reason
    #7
    Well, there are a couple of dirty ways to do a min-width on body. A div set to width:800px inside body might do it, and an img set to width = 800 would definitely do it. A better way (no extra markup) might be to use an expression. These only work in IE, of course, so you'd have to use this in an IE only stylesheet, the others would use min-width.

    iesucks.css:
    Code:
    body { width: expression(Math.max((document.documentElement.clientWidth ? document.documentElement.clientWidth : document.body.clientWidth), 800) + "px"); }
    
    style.css
    Code:
    body {min-width:800px}
    /* Other style information */
    
    html.html
    HTML:
    <html>
        <head>
            <link rel = "stylesheet" href = "style.css" />
            <!--[if lt IE 7]>
                <link rel = "stylesheet" href = "iesucks.css" />
            <![endif]-->
        </head>
        <body>
            <!--html code goes here-->
        </body>
    </html>
    
    Be warned that I did not test that code - it may not work perfectly and need a bit of debugging.

    Off of the top of my head that's all I can think of.

    As for supporting IE 6 in general, I kind of do that on my website. My website will work on IE 6, but I have disabled the Javascript.
     
  8. elppa macrumors 68040

    elppa

    Joined:
    Nov 26, 2003
    #8
    At the moment the width = max width of content (which could be anything!) + padding + margins.

    At the moment the widest line is the following:

    HTML:
    Catchy lyrics and possibly true. But the all time best advice in a song is:
    
    Try dropping this in to your site and see what happens:

    HTML:
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
    
    (or see here)

    Unless you put <br /> in every single time you want to wrap to a new line (which will just become a nightmare to manage) you need to specify a width constraint somewhere!

    if you don't, long lines have nothing to wrap to other than the page, which means the content will always drop below the sidebar.

    Maybe look at percentages, say a 30 / 70 split between the sidebar and the main content.

    Absolutely no need to resort to fancy javascript hacks to achieve what you want. There are plenty of ways to create a two column layout using pure CSS, you just need to think through a bit more carefully what you are trying to achieve.

    Excuse my ignorance, but what works? What is that meant to achieve in this example? Because it doesn't look like it's solving anything to me.
     
  9. elppa macrumors 68040

    elppa

    Joined:
    Nov 26, 2003
    #9
    Just thought of another solution:

    full_post doesn't have to float at all, just give it a margin to push it wide of the nav:

    Code:
    #menu {
    	float: left;
    	margin: 2em 2em 2em 1em;
    	border: 1px solid #999;
    	padding: 1em;
    	background-color: white;
    }
    
    .full_post{
    	/* float: left; */
    	/* margin: 2em 2em 2em 1em; */
    	margin: 2em 1em 0 15em;
    	border: 1px solid #999;
    	padding: 1em;
    	background-color: white;
    }
    
    I'd still want give that #menu a fixed width, in case you have a category name that is very long, or the user enlarges the text.
     
  10. angelwatt Moderator emeritus

    angelwatt

    Joined:
    Aug 16, 2005
    Location:
    USA
    #10
    That code will keep your content from falling underneath your menu. Though on its own it won't work, You also need to remove the float:left;. It's unneeded. So you might end up with,

    .full_post{
    margin: 2em 2em 2em 15em;
    border: 1px solid #999;
    padding: 1em;
    background-color: white;
    }

    If you want, you can check out the CSS I use at my site, http://www.angelwatt.com/
     
  11. elppa macrumors 68040

    elppa

    Joined:
    Nov 26, 2003
    #11
    Cool, if you had explained about removing the floats earlier it would have made sense.

    I have suggested doing the same thing as a solution for harveypooka in the post above yours ^^
     
  12. harveypooka thread starter macrumors 65816

    Joined:
    Feb 24, 2004
    #12
    Thanks for your help everyone, it's nice to know that there is support when my HTML brain simply switches off and dies!

    I've opted for Elppa's option (thanks!) and I'll see how that fairs.

    One last question: I've sorted all my validation errors but I'm still get <li> validation errors. They appear to be what WordPress is outputting, but I can't pin point what exactly I've done to ruin the lists...

    Any ideas?
     
  13. angelwatt Moderator emeritus

    angelwatt

    Joined:
    Aug 16, 2005
    Location:
    USA
    #13
    It's because the li must be inside a ul or ol.

    What validator do you use? I used the validator.w3.org one and it gave pretty good advice about the error.

    P.S. Looks like you got your other problem fixed, cool.
     
  14. harveypooka thread starter macrumors 65816

    Joined:
    Feb 24, 2004
    #14
    Using the W3 one also.

    I know it's a list error, it's just that WordPress is outputting the list structure...I can't find any argument in the WP tag to force no styling.

    I guess I'll have to manually put the missing tags in! :(
     

Share This Page