www.webdeveloper.com
Results 1 to 12 of 12

Thread: How to have 2 DIVs side by side with one aligned to left and one aligned to right?

Hybrid View

  1. #1
    Join Date
    Oct 2006
    Posts
    34

    How to have 2 DIVs side by side with one aligned to left and one aligned to right?

    In Fire fox, it works fine, but in IE, the left div is pushed towards right and forcing the right div jumping to the next line.

    Here is my code:

    CSS:
    Code:
    .itemtitle{
    	margin: 5 15 0 15px;
    }
    
    .itemsubtitleleft{
    	border: 1px solid #999999;
    	float: left;
    	width: 285px;
    	margin: 0 5 5 15px;
    }
    
    .itemsubtitleright{
    	border: 1px solid #999999;
    	float: right;
    	text-align: right;
    	width: 150px;
    	margin: 0 15 5 5px;
    }
    
    
    .itemtitlediv {
    	margin: 10 5 0 5px;
    	width: 480px;
    	cursor: pointer;
    	cursor: hand;
    	border: 1px solid #DDDDDD;
                 float: left;
    }
    HTML

    Code:
    <div class="itemtitlediv">
      <div class="itemtitle">Top Item</div>
      <div class="itemsubtitleleft">bottom left</div>
      <div class="itemsubtitleright">bottom right</div>
    </div>
    Anyone knows why IE puts an additional space in front of the bottom left div?

    It'd be so easy to use table for this. >.<

  2. #2
    Join Date
    Feb 2005
    Posts
    1,018
    IE6 doubles the left or right margin depending on the direction of the float. For example .itemsubtitleleft is floated left and it has a left margin applied to it so the margin is going to get doubled. Vice versa for the the right subtitle. The solution is to add
    Code:
    display:inline;
    to the CSS for those classes. Doing so fixes the double margin bug but has no effect on any other browser because by default a floated element becomes a block level element.
    Last edited by _Aerospace_Eng_; 11-05-2006 at 04:33 PM.

  3. #3
    Join Date
    Oct 2006
    Posts
    34
    Oh. Wow. That fixed it!

    Thank you so much!!

  4. #4
    Join Date
    Feb 2005
    Posts
    1,018
    You should also use units in your CSS. I noticed you lack units on some of your margins. You don't need units on 0 values well because 0 is 0.

    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <title>Untitled Document</title>
    <style type="text/css">
    .itemtitle{
    	margin: 5px 15px 0 15px;
    }
    
    .itemsubtitleleft{
    	border: 1px solid #999999;
    	float: left;
    	width: 285px;
    	margin: 0 5px 5px 15px;
    	display:inline;
    }
    
    .itemsubtitleright{
    	border: 1px solid #999999;
    	float: right;
    	text-align: right;
    	width: 150px;
    	margin: 0 15px 5px 5px;
    	display:inline;
    }
    
    
    .itemtitlediv {
    	margin: 10px 5px 0 5px;
    	width: 480px;
    	cursor: pointer;
    	cursor: hand;
    	border: 1px solid #DDDDDD;
        float: left;
    	display:inline;
    }
    </style>
    </head>
    <body>
    <div class="itemtitlediv">
    	<div class="itemtitle">Top Item</div>
    	<div class="itemsubtitleleft">bottom left</div>
    	<div class="itemsubtitleright">bottom right</div>
    </div>
    </body>
    </html>

  5. #5
    Join Date
    Mar 2006
    Location
    Newcastle NSW Australia
    Posts
    4,033
    What doctype are you using? If no doctype is used, IE is in quirks mode and renders your example in the way you describe - would suggest an HTML 4.01 Strict doctype if you are not using one.

    Cheers
    Graeme

  6. #6
    Join Date
    Oct 2006
    Posts
    34
    Thanks for the suggestion. I didn't use any doctype on my pages. I will add doctype to all my pages. And, also, adding unit to all my numbers.

  7. #7
    Join Date
    Oct 2006
    Posts
    34
    Um.... I have put the strict doctype to my page. But now, in Firefox, every image, regardless of its height, it takes up a whole line height. I can't get a image to be placed right below another image anymore when the image has a height that is smaller than a line.

    for example:

    Code:
    <img src="xxxxx" width="70" height="2" />
    <br />
    <img src="xxxx" width="70" height="5" />
    If I want them to placed together up/down without any space, how do I do it in a strict doctype page?

    Thanks.

  8. #8
    Join Date
    Oct 2006
    Posts
    34
    Um... okay.

    I just found a solution to that. I need to change all the images to "Display: block;"?

    Is there any other way to do this?

  9. #9
    Join Date
    Nov 2003
    Location
    Jerryville, Tejas
    Posts
    11,715
    That's the right way.

  10. #10
    Join Date
    Oct 2006
    Posts
    34
    Okay.... when I tried to validate my code, the strict doctype told me that I cannot use border="0" in my image tag. But the image is a link, and I do not want a border around it. I tried putting "border: 0px none;" style for the images, but the border still shows.

    Is there anyway to remove the border of the image link? or do I need to change the doctype to transitional?

    >.< Anyone knows how to do this?

  11. #11
    Join Date
    Oct 2006
    Posts
    34
    Never mind. My mistake. I put the style class on the DIV tag wrapping the img tag.

    CSS removed the border no problem.

  12. #12
    Join Date
    Nov 2005
    Location
    Central Jersey
    Posts
    48
    This is the simplest way I've found to do it, I'm not sure if it validates.

    <div style="float: right;">Right Content</div><div style="float: left;">Left Content</div>

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

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



Recent Articles