Sidebar Sidebar
Become a MacRumors Supporter for $50/year with no ads, ability to filter front page stories, and private forums.

Help with floats

H

harveypooka

macrumors 65816
Original poster
Feb 24, 2004
1,291
0
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...
 
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	
}
 
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.
 
theAesthetics said:
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.
Click to expand...

Not supported on IE 6 though, which as far as I am aware is still extensively used.
 
elppa said:
Simplest thing to do would to give your #container a width of 800px or so.
Click to expand...

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!
 
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.
 
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.
 
harveypooka said:
Arg, I don't want fixed width though.
Click to expand...

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.

angelwatt said:
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.
Click to expand...

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.
 
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.
 
elppa said:
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.
Click to expand...

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/
 
angelwatt said:
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/
Click to expand...

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 ^^
 
elppa said:
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.
Click to expand...

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?
 
harveypooka said:
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?
Click to expand...

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.
 
angelwatt said:
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.
Click to expand...

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! :(
 
You must log in or register to reply here.
Register on MacRumors! This sidebar will go away, and you'll see fewer ads.
Top Bottom
Back