SitePoint Sponsor

User Tag List

Results 1 to 6 of 6
  1. #1
    SitePoint Enthusiast
    Join Date
    Oct 2005
    Posts
    34
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Aligning two divs vertically

    Hi guys,

    I am trying to display two forms with several elements on a page. I would like to place the two forms on the webpage so that one is displayed on the left and the other on the right of the screen.
    Something like this



    I have written the following test and the forms are placed correctly inside the left and right divs.

    Code:
    <HTML>
    <Head>
    	<style type="text/css">
    		div.wrapper {
    		position: relative;
    		clear: both;
    		width: 100%;
    		border : 1px solid #000000;
    		}
    		div.left {
    		float: left;
    		width: 50%;
    		background: #ffffff;
    		border : 1px solid #000006;
    
    		}	
    		div.right {
    		float: right;
    		width: 50%;
    		background: #ffffff;
    		border : 1px solid #000001;
    		}
    		
    	</style>
    </Head>
    <Body>
    	<div class="wrapper">Wrapper
    		<div class="left">Left Box Left Box Left Box Left Box Left Box Left Box Left Box Left Box Left Box Left Box Left Box Left Box Left Box Left Box Left Box </div>
    		<div class="right">Right Box Right Box Right Box Right Box Right Box Right Box Right Box Right Box Right Box Right Box Right Box Right Box Right Box Right Box </div>
    	</div>
    </Body>
    </HTML>
    A couple of problems with the above.
    1. In Internet explorer the divs are aligned correctly but in firefox it gets all messy.
    2. As long as the window is maximised then i the divs are aligned vertically correctly. If i resize the browser window then they are no longer aligned vertically. Is there a way to make them always next to each other from left to right even if the window is resized? (try resizing the window for the example i showed above)


    Thanks

  2. #2
    SitePoint Guru
    Join Date
    Nov 2008
    Posts
    622
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    as your divs are having border of 1px, so you should make your div width 49&#37; instead of 50% because 1px border will also be counted.

    secondly keep your wrapper text inside <p></p> tags or any block level tags you like.

    try this

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.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">
    		div.wrapper {
    		position: relative;
    		clear: both;
    		width: 100%;
    		border : 1px solid #000000;
    		overflow:auto;
    		}
    		div.left {
    		float: left;
    		width: 49%;
    		background: #ffffff;
    		border : 1px solid #000006;
    
    		}	
    		div.right {
    		float: right;
    		width: 49%;
    		background: #ffffff;
    		border : 1px solid #000001;
    		}
    		.wrapper p{
    		margin:0px;
    		}
    		
    	</style>
    
    </head>
    
    <body>
    <div class="wrapper"><p>Wrapper</p>
    	
    		<div class="left">Left Box Left Box Left Box Left Box Left Box Left Box Left Box Left Box Left Box Left Box Left Box Left Box Left Box Left Box Left Box </div>
    		<div class="right">Right Box Right Box Right Box Right Box Right Box Right Box Right Box Right Box Right Box Right Box Right Box Right Box Right Box Right Box </div>
    	
    	</div>
    
    </body>
    </html>
    vineet

  3. #3
    SitePoint Wizard Stomme poes's Avatar
    Join Date
    Aug 2007
    Location
    Netherlands
    Posts
    10,276
    Mentioned
    50 Post(s)
    Tagged
    2 Thread(s)
    I want to point out some things in Vineet's excellent solution, in case you miss them:

    He used a Doctype, which you really want to have. Without a doctype (just starting with <HTML>) browsers go into Quirks Mode.
    Why have a doctype?
    W3C's List O'Doctypes

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <title>Always make some good title text</title>
    Second, in the CSS:

    Code:
    		div.wrapper {
    		position: relative;
    		clear: both; <--don't need
    		width: 100%; ,<--we'll adjust this
    		border : 1px solid #000000;
    		overflow:auto;
    		}
    Ziggy, you had "clear" on your wrapper, but clear is something you put on a box to force a newline after floats. So there are no floats above or before Wrapper so it's got no-one to clear!
    Second, floated children means a container like Wrapper isn't going to "see" them. It'll collapse to no height, thinking that it's empty. Except in IE.... IE has a bug where, if you've triggered IE's mysterious Haslayout property (which you did when you set a width on wrapper), it will (incorrectly!) wrap those floats.

    Course you'd only see this if Wrapper had a border or a bg colour or something, but it's good to know.

    Vineet added overflow: hidden which allows Wrapper to wrap (enclose) its floats in all the other browsers (and IE7). This is because, in order for a box to hide any overflowing content, it must be able to tell where its content is... that means it needs to know where those floats are and how big they are. Which means it gets to enclose them like boxes normally do to their children.

    Quote Originally Posted by vineet
    as your divs are having border of 1px, so you should make your div width 49% instead of 50% because 1px border will also be counted.
    Yes, and IE6 has a nice bug where 50% and 50% = 101%... and IE6 has another bug called 3px jog (there's link to it somewhere in one of the CSS sticky threads... take a look at them) and when you float if you add any margins IE6 sometimes doubles them (double-margin float bug). And a few other bugs prolly.

    secondly keep your wrapper text inside <p></p> tags or any block level tags you like.
    Agreed, even though I figured the word "wrapper" was a test or something.

    Quote Originally Posted by ziggy
    2. As long as the window is maximised then i the divs are aligned vertically correctly. If i resize the browser window then they are no longer aligned vertically. Is there a way to make them always next to each other from left to right even if the window is resized? (try resizing the window for the example i showed above)
    Yeah, there is.

    If you make Wrapper have a width that's always wide enough for both those forms to fit side-by-side, then they'll never drop.

    So if each form is (including borders) like 400px wide, then if wrapper is at least 802px wide then instead of floats dropping your users would get a scrollbar if the screen were too small.

    In fact, ideally you'd give widths to your forms that weren't in %... and if you are getting 3px jog you could give them
    margin-left: -6px
    or something.

    http://www.sitepoint.com/forums/show...5&postcount=15
    is good reading if you're going to be messing with floats.

  4. #4
    SitePoint Enthusiast
    Join Date
    Oct 2005
    Posts
    34
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thank you both for your responses.

    - I had originally added the border just so i can see the location of the divs temporarily while designing the page.
    - The actual page that i am designing has form elements inside the divs rather than text as in the example i showed above. The p tag wont work with form elements.

    He used a Doctype, which you really want to have. Without a doctype (just starting with <HTML>) browsers go into Quirks Mode.
    Why have a doctype?
    W3C's List O'Doctypes
    Yes i am aware of Doctype and what it is for. I must admit i dont get involved a lot with web page design as i am mostly a server side J2EE developer. The fact that i have only made 28 posts since 2005 is proof of this On the occasions that i do get involved in the design of web pages i am usually making changes to the body/content of a page and not the whole page.

    The page that i am working on now is the content for an existing page that comes from a "Tiles" template. These templates were designed many years ago and are used by people in the Health industry who believe it or not some are still using IE4.

    The other issue is that changing the template means changing and testing hundreds of other content pages. I dont have a problem with this but due to the politics of project management at work it is not up to me but the project managers. My responsibility is to raise a change request which i have and my boss will decide whether it will be done or not. So far unfortunately this has not be given a high priority.

    I have read a lot of articles and blogs where people make it look like it is a sin to not use a specific facility/feature. I do agree in some cases but in most cases it is not really that simple on the field. For example, i know i will have a very hard time convincing my manager that we use doctype on all our templates because all our pages work fine we've not had any issues given that our pages have been live for > 15 years. He is a strong believer of the "If it aint broke dont fix it" motto.

    I guess its all to do with money and resources. I just wish the bloggers would understand this.. I must admit that i do understand the project managers' point of view where if something works fine then there is no need to change it. I have seen people come up with suggestions for solutions solely on the reasoning that it is new and everybody is using it.

    So as long as something does what it is supposed to do there is no need to change it. Especially if changing it means moving resources from other high priority tasks.

    Here is a good example of the kind of politics involved.

    We specify in our SLA what browser we will support. Our customer will officially only support a specific browser. (Usually what we specify in our SLA).

    If we change our contract to support another browser, the customer will have to upgrade their systems with the new browser. Which means it will cost us to add support for this new browser and our customers wont be happy as who will pay for upgrading their systems?

    I guess in our case it is very specialised as the site is not targetted for your usual joe blogs with an internet connection but rather for a specific audience where every agreement is written on paper and any change has "severe" consequences.

    The use of DOCTYPE is actually one of the minor issues that i am worried about. I've been trying to migrate from JDK1.4 to 1.6 for years now which should not be visible to the customer (or converting from the struts 1 framework to struts 2) and have failed miserably but im still trying.

    Anyway back to my original question :-)

    Second, floated children means a container like Wrapper isn't going to "see" them. It'll collapse to no height, thinking that it's empty. Except in IE.... IE has a bug where, if you've triggered IE's mysterious Haslayout property (which you did when you set a width on wrapper), it will (incorrectly!) wrap those floats.
    I didnt quite understand this. I thought that floated children will float to the edge of its container and not the page.


    If you make Wrapper have a width that's always wide enough for both those forms to fit side-by-side, then they'll never drop.
    I did try this and it works fine if i use px on the wrapper container. The problem with this is that the container will always have a fixed width whereas i would like it to take up whatever space is available to it. I guess the other option is to use the maximum width but im guessing it would be difficult as people dont use the same resolutions on their monitor.


    Thanks for the tip on the clear property. Here is a more realistic example of what i am trying to achieve.

    Code:
    <HTML>
    <Head>
    	<style type="text/css">
    		div.wrapper {
    		position: relative;
    		width: 100&#37;;
    		
    		}
    		div.left {
    		float: left;
    		width: 50%;
    		background: #ffffff;
    		}	
    		div.right {
    		float: right;
    		width: 50%;
    		background: #ffffff;
    
    		}
    		
    	</style>
    </Head>
    <Body>
    	<div class="wrapper">Wrapper
    		<div class="left">
    			<form name="input" action="html_form_action.asp" method="get">
    
    			Type your first name: 
    			<input type="text" name="FirstName" value="Mickey" size="20">
    			<br>Type your last name: 
    			<input type="text" name="LastName" value="Mouse" size="20">
    			<br>
    			<input type="submit" value="Submit">
    
    			</form> 
    
    			<p>
    				If you click the "Submit" button, you will send your input to a new page called html_form_action.asp.
    			</p>
    			
    		</div>
    		<div class="right">
    			<form name="input" action="html_form_action.asp" method="get">
    
    			Type your first name: 
    			<input type="text" name="FirstName" value="Mickey" size="20">
    			<br>Type your last name: 
    			<input type="text" name="LastName" value="Mouse" size="20">
    			<br>
    			<input type="submit" value="Submit">
    
    			</form> 
    
    			<p>
    			If you click the "Submit" button, you will send your input to a new page called html_form_action.asp.
    			</p>
    			
    			
    	</div>
    </Body>
    </HTML>

  5. #5
    SitePoint Enthusiast
    Join Date
    Oct 2005
    Posts
    34
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Here is another very good example of exactly what i mean

    http://news.bbc.co.uk/1/hi/technology/8492862.stm

    The only reason they have not done it is ofcourse the costs involved in rolling that out.


  6. #6
    SitePoint Wizard Stomme poes's Avatar
    Join Date
    Aug 2007
    Location
    Netherlands
    Posts
    10,276
    Mentioned
    50 Post(s)
    Tagged
    2 Thread(s)
    Ah well, from your first post, we all just assume this is a site, possibly starting from scratch, meant for the General Public.

    When you're writing browser-based applications where the users have a certain set environment, you do indeed have much more leeway. There are people who get to build stuff Just for Firefox or just for Safari because they can set the user environment. Also, sometimes you can go around the usual accessibility rules, if you KNOW nobody visiting these sites are using a screen reader for example, or if google is not a consideration.

    I have read a lot of articles and blogs where people make it look like it is a sin to not use a specific facility/feature. I do agree in some cases but in most cases it is not really that simple on the field. For example, i know i will have a very hard time convincing my manager that we use doctype on all our templates because all our pages work fine we've not had any issues given that our pages have been live for > 15 years. He is a strong believer of the "If it aint broke dont fix it" motto.
    It's a sin to not use a doctype for any new sites meant for the general public... and for that matter, for old sites meant for the general public. This is because using a doctype allows you-the-developer to know you're working in standards mode and not also quirks mode, and helps when you're dealing with lord-knows how many possible user agents, some of which aren't even human (bots) and some of which are modified with AT (accessibility technology).

    Second, floated children means a container like Wrapper isn't going to "see" them. It'll collapse to no height, thinking that it's empty. Except in IE.... IE has a bug where, if you've triggered IE's mysterious Haslayout property (which you did when you set a width on wrapper), it will (incorrectly!) wrap those floats.
    I didnt quite understand this. I thought that floated children will float to the edge of its container and not the page
    They do, you're right. To "see" what I'm talking about, make a throw away page with this:

    (head etc)...
    <div id="wrapper">
    <div id="float1">
    <p>Throw enough Lorem Ipsum in here to get several lines of content, or just throw an explicit height on this box.</p>
    </div>

    </div>

    #wrapper {
    width: 500px; /*by setting a width, we're gonna trigger Haslayout in IE*/
    margin: 0 auto;
    background-color: #f00; /*red*/
    }

    #float1 {
    float: left;
    width: 200px;
    height if you want to set some height...
    background-color: #0f0; /*green*/
    }

    After building that, take a look in IE and in FF. Uh, Haslayout was removed from IE8 except I assume when it's in "compatability mode" so I mean IE6 or 7. You should see the centered, red wrapper.

    In all other browsers, you should NOT see the red container. The width is still there, but the CSS rules state that *normally* a box will enclose its children (boxes have normally height: auto, and auto means "determined by the amount of content inside) but when those children are floated, that doesn't happen.

    So developers have come up with lots of ways to make wrappers enclose floats, because a lot oif the time, or most of the time, we want that to happen.

    If in your case the wrapper is invisible (no background, colour or borders) there's pretty much little difference, with the exception that when containers wrap/enclose their floated children you're able to put a bottom margin on that container to push the following content down, and that following content may not have to have "clear" on them.

    An example you can look at in IE6 or 7 and then some Compliant Modern Browser. IE6 doesn't like those pages very much though : )

    I did try this and it works fine if i use px on the wrapper container. The problem with this is that the container will always have a fixed width whereas i would like it to take up whatever space is available to it. I guess the other option is to use the maximum width but im guessing it would be difficult as people dont use the same resolutions on their monitor.
    Well, when you have width: 100% (which, btw, a static box or even a position: relative box doesn't necessarily need that statement... normally that's what a block tries to be anyway, 100% width of its container... in your case, the body element), that's fine but when you start making the viewport smaller (that's when you say you're getting the dropping right?) at some point, there's a minimum width these forms have. Even though the boxes they are in are 50% wide, there's also a point where the forms won't squish any smaller, and then one of them simply has to drop.

    So normally you'd measure at what width they are simply too wide to fit side-by-side (and here, if your wrapper encloses its floats and you have a bg colour on it, it's nice and helps you "see" what's going on), you can set a min-width on that container. So the container can continue to do it's normal width: 100%, except when the viewport gets too small. At that point, a scrollbar is introduced and the floats can stay side-by-side.

    And like I said you could keep the divs 50% width (or the safer 49% and some negative margins to keep everyone lined up) on the divs but set some width on the forms inside. If the divs have a bg colour and the forms don't, nobody would know the difference between the div and the form.

    ... even if you're sure there aren't any people using AT you should still see if you can make the forms more sensible.

    The text above the inputs should be in labels. So far as I know, you've got nothing around that text now so adding labels shouldn't affect anything visually. Labels should ideally have a "for" attribute that matches the id of the input. This lets people in most browsers be able to click anywhere in the label and they can get the focus on the related input (which is very nice for little things like checkboxes and radio buttons).

    Order might or might not matter. The explanation ("clicking this button Does Stuff") at the bottom comes AFTER the button it's talking about, meaning anyone who does surf linearly (like screen reader users) are going to have already encountered the button before hearing/reading what it does. You may not have users like that, but now you know in case you ever do get them later, lawlz.

    These templates were designed many years ago and are used by people in the Health industry who believe it or not some are still using IE4.
    I worked at a small hospital where the patient information was dealt with in the cheapest software the hospital administration could find. It was 10+ year-old Visual Basic and all the developers of it were dead or retired, and the company was very very far away (California). It was extremely difficult to integrate it into the other computer system from Siemens that dealt with patient information and films (this was part of radiography), and it had a lot of trouble dealing with new privacy laws. If the original software had been built better, more robust and flexible, everyone would have saved so much money. As workers, we were always pissed at the system and had dreams of murdering hapless nerds. Lawlz.

    Anyway I could have sworn I just saw some thread around here where someone needed two boxes right next to each other and 50% wide and a more precise solution was presented to them... actually that possibly was even in another forum. If I find it I can post the link.

    Or Paul O'B can step in and show you in a flourish of genius how to get this working in both old and new browsers... I mean, does this have to work in like IE5.5?


Bookmarks

Posting Permissions

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