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 5 of 5
  1. #1
    Regular Coder
    Join Date
    Jan 2005
    Posts
    113
    Thanks
    0
    Thanked 0 Times in 0 Posts

    The Scope of 'clear: both'

    My problem is a little strange, but, here goes.

    I am trying to design table-less forms, using the code provided here: http://www.quirksmode.org/css/forms.html and it works quite well indeed.

    I am, however, having a issue with the clear: both bit of the br style. It seems that if one container has lets say float: left and another does not float and and we place a br with clear: both set in the one that does not float then it will 'move' the 'cursor' down to below the float: left item. Here is a reduced test case:
    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>
    <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
    <title>Untitled Document</title>
    </head>
    
    <body>
    <div style="float: left; width: 100px; height: 400px; background-color: #007700">
    Test
    </div>
    <div>
    	<p>An item<br style="clear: both" />Another item</p>
    </div>
    </body>
    </html>
    As you can see 'Another item' is below the green box.

    This relates to my problem as my site is designed in a similar way (boxes down the side) and a main content div, where the form will be. So you can see that clear: both is indeed a problem.

    Does anyone know any solutions to this? Be it another way of forcing a new-line or how to reduce the scope of the clear statement so that it does not stick its nose in where it is not wanted.

    Regards, Freddie.

  • #2
    The fat guy next door VIPStephan's Avatar
    Join Date
    Jan 2006
    Location
    Halle (Saale), Germany
    Posts
    8,789
    Thanks
    6
    Thanked 1,022 Times in 995 Posts
    I don't really understand what you want because of course an element with the clear property applied to it will be forced down under an element with float. That's what clear is made for. The values left, right, and both are just specifying which float is to be cleared, a float to the left, to the right or both floats.
    If you can elaborate a little more what you are intending to achieve then maybe we can provide a solution. In the meanwhile I'd recommend you do some reading on floats: http://css.maxdesign.com.au/floatutorial/

  • #3
    Regular Coder
    Join Date
    Jan 2005
    Posts
    113
    Thanks
    0
    Thanked 0 Times in 0 Posts
    I am aware how clear works to a less extent. Here is a complete page which demonstrates the problem:
    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>
    <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
    <title>Untitled Document</title>
    <style type="text/css">
    input {
    	display: block;
    	width: 150px;
    	float: left;
    	margin-bottom: 10px;
    }
    
    label {
    	display: block;
    }
    
    label span {
    	display: block;
    	float: left;
    	width: 100px;
    	text-align: right;
    	padding-right: 10px;
    }
    
    br {
    	clear: left;
    }
    </style>
    </head>
    
    <body>
    <div style="float: left; width: 100px; height: 400px; background-color: #007700">
    My nav bar
    </div>
    <div>
    	My main content
    	<form>
    
    	<label for="name"><span>Name</span>
    	<input id="name" name="name"></label><br />
    
    	<label for="address"><span>Address</span>
    	<input id="address" name="address"></label><br />
    
    	<label for="city"><span>City</span>
    	<input id="city" name="city" /></label><br />
    </form>
    </div>
    </body>
    </html>
    Notice how the address input label/option is below the green box, probably due to the fact that clear: both is also clearing the green box as well. I need a work-around to this if possible.

    Regards, Freddie.

  • #4
    The fat guy next door VIPStephan's Avatar
    Join Date
    Jan 2006
    Location
    Halle (Saale), Germany
    Posts
    8,789
    Thanks
    6
    Thanked 1,022 Times in 995 Posts
    Ahh, now I see! Sorry, misunderstood it in the first place.
    OK, If you have the basic structure like this then you just need to float the container div of the form to the left too. This makes the brs' clears count only within that floated element.

  • #5
    Regular Coder
    Join Date
    Jan 2005
    Posts
    113
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Thanks! Setting the form to float left does seem to fix the problem.

    I am off to go and implement it on my site, and will post back if there are any complications.

    Regards, Freddie.


  •  

    Posting Permissions

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