CSS: Left float falls below right float - Condition: browser/monitor size

bobleny · 06-05-2007, 08:26 PM

If you take a look here:
http://www.firemelt.net/crow

The CSS can be viewed here:
CSS Validator
or here:
http://www.firemelt.net/crow/css.css
------------

You will see a header above two floating elements.
The right floating element has a fixed width of 140px.
The left element has a width of 78% of its parent element, the header.

The problem is that, if you have a big monitor or a high resolution, the space between the right and left floating elements is way too wide.

It is just the opposite for small monitors or low resolution, they actually start to overlap and then eventually, the left float will fall beneath the right float.

The problem is simple, the left element is 78% of the headers width. The larger the monitor/resolution, the wider the header, the wider the header the wider the left element is. However, the right float will remain 140px.

If the header is 500px wide, then the left float is 390px wide. The right float remains 140px wide. There is now a space of -30px; the left float would now be under the right float.

However, if the header is 1300px wide, the left float would be 1014px wide. The right float remains 140px wide, leaving a space of 146px between the two. It now looks bad.

If you don't like math, just resize your browser, you'll see what I mean.
-----------

So, for the long awaited question, how do I fix this? I really don't know what to do...

Thanks!

bobleny · 06-07-2007, 12:17 AM

I don't know if this is even possible to do that, but I am willing to try it if anyone has any ideas.

I tried making the right float 20%, but I ended up with the same results, and a stretched out side box...

Any ideas?

rmedek · 06-07-2007, 01:32 AM

You're starting to overthink this a bit. Start by removing the float and width rules from #text_body; then you'll see sort of what the default float behavior is.

Then all you need to do is prevent #text_body from expanding 100% (and underneath the float) — you can do this by adjusting the margins. "margin: 10px 160px 0 0;" should start you off.

Hope this helps…

bobleny · 06-07-2007, 04:31 PM

Oh, never thought to do that... That should work, but I ran into a bit of a problem.

This is what happened when I took the width and the float out.
CSS:

Code:

#text_body
{
	margin: 10px 170px 5px 1px;
}

Here it is again but this time with the float left in.
CSS:

Code:

#text_body
{
	margin: 10px 170px 5px 1px;
	float: left;
}

rmedek · 06-07-2007, 04:55 PM

You have a "clear: both" in .text_body_box_text that's mucking things up. It's causing .text_body_box_text to clear the right column. Change that to "clear: left" and you'll see what you're after.

Having said all that, your HTML could use a little help. You've got a serious case of divitis.

bobleny · 06-07-2007, 05:53 PM

Thanks, that seems to have worked. I should have posted my HTML code, I guess I forgot...

------

Quote:

Originally Posted by rmedek

You have a "clear: both" in .text_body_box_text that's mucking things up. It's causing .text_body_box_text to clear the right column. Change that to "clear: left" and you'll see what you're after.

That clear both, was so that .text_body_box_text would clear both .text_body_box_time and .text_body_box_date. Changing "clear: both;" to "clear: left;" doesn't seem to have hurt it any.

Quote:

Originally Posted by rmedek

Having said all that, your HTML could use a little help. You've got a serious case of divitis.

What do you mean? I used as few <div> tags as possible... I'm open to suggestions, and would like to here what you have to say about it.

See:

Code:

<!DOCTYPE html PUBLIC '-//W3C//DTD XHTML 1.0 Strict//EN' 'http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd'>
<html xmlns="http://www.w3.org/1999/xhtml">
	<head>
		<link href="css.css" rel="stylesheet" type="text/css" />
		<title>Home - Go MAD</title>
	</head>
	<body>
		<div id="main_body">

			<!-- Start of Header -->
			<div id="header">
				<div id="header_nav">
					<div class='nav_selected'>Home Page</div><a href='index.php?page=base' class='nav_links'>Knowledge Base</a>
				</div>
			</div>
			<!-- End of Header -->


			<!-- Start of Right Panel -->
			<div id="right_panel">
				<div class="right_panel_box">
					<div class="right_panel_text_lable">Related Links</div>
					<div class='right_panel_link'><a href='http://www.google.com' class='right_panel_link'>Google</a></div>
					<div class='right_panel_link'><a href='http://www.yahoo.com' class='right_panel_link'>Yahoo!</a></div>
				</div>

				<div class="right_panel_box">
					<div class="right_panel_text_lable">Login</div>
					<form>
						<div class='login_input'><input type='text' name='username' size='15' value='Username' /></div>
						<div class='login_input'><input type='password' name='password' size='15' value='Password' /></div>
						<div class='login_input'><input type='submit' name='login' value='Login' onClick='login_check(this.value)' /></div>
					</form>
				</div>
			</div>
			<!-- End of Right Panel -->


			<!-- Start of Text Body -->
			<div id="text_body">
				<div class='text_body_box_declare'>Date / Time</div>
				<div class='text_body_box'>
					<div class='text_body_box_date'>June 03, 2007</div><div class='text_body_box_time'>3:31 PM</div>
					<div class='text_body_box_text'>
						The date / Time fields have been fixed! This means that when you have text like this, it will be under the date and time rather that between the date and time; It looks a lot better.
						<br /><br />
						Mean while, I am working on the Admin Panel. You won't be able to see it, but it will be nice. You will just have to take my work on it!
						<br /><br />
						Later, I will add a calender to the right side of this. It will come in handy!
					</div>
				</div>
				
				<div class='text_body_box'>
					<div class='text_body_box_text'>
						Page 1
					</div>
				</div>
			</div>
			<!-- End of Text Body -->
			
		</div>
	</body>
</html>