Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 6 of 6
  1. #1
    Regular Coder bobleny's Avatar
    Join Date
    May 2007
    Posts
    258
    Thanks
    3
    Thanked 11 Times in 11 Posts

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

    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!
    --www.firemelt.net--
    * No good deed goes unpunished.
    * Cheer up, the worst has yet to come...

  • #2
    Regular Coder bobleny's Avatar
    Join Date
    May 2007
    Posts
    258
    Thanks
    3
    Thanked 11 Times in 11 Posts
    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?
    --www.firemelt.net--
    * No good deed goes unpunished.
    * Cheer up, the worst has yet to come...

  • #3
    Senior Coder
    Join Date
    Nov 2003
    Location
    Minneapolis, MN
    Posts
    2,879
    Thanks
    2
    Thanked 65 Times in 56 Posts
    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…

  • #4
    Regular Coder bobleny's Avatar
    Join Date
    May 2007
    Posts
    258
    Thanks
    3
    Thanked 11 Times in 11 Posts
    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;
    }
    --www.firemelt.net--
    * No good deed goes unpunished.
    * Cheer up, the worst has yet to come...

  • #5
    Senior Coder
    Join Date
    Nov 2003
    Location
    Minneapolis, MN
    Posts
    2,879
    Thanks
    2
    Thanked 65 Times in 56 Posts
    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.

  • #6
    Regular Coder bobleny's Avatar
    Join Date
    May 2007
    Posts
    258
    Thanks
    3
    Thanked 11 Times in 11 Posts
    Thanks, that seems to have worked. I should have posted my HTML code, I guess I forgot...
    ------

    Quote Originally Posted by rmedek View Post
    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 View Post
    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>
    --www.firemelt.net--
    * No good deed goes unpunished.
    * Cheer up, the worst has yet to come...


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •