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

**vparque** · 11-05-2006 02:26 PM

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. >.<

**_Aerospace_Eng_** · 11-05-2006 03:27 PM

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.

**vparque** · 11-05-2006 03:31 PM

Oh. Wow. That fixed it!

Thank you so much!!

**_Aerospace_Eng_** · 11-05-2006 03:35 PM

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>

**Centauri** · 11-05-2006 03:36 PM

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

**vparque** · 11-05-2006 05:36 PM

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.

**vparque** · 11-05-2006 07:16 PM

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.

**vparque** · 11-05-2006 07:19 PM

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?

**ray326** · 11-05-2006 08:41 PM

That's the right way.

**vparque** · 11-05-2006 09:45 PM

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?

**vparque** · 11-05-2006 09:51 PM

Never mind. My mistake. I put the style class on the DIV tag wrapping the img tag.

CSS removed the border no problem.

**22Pixels** · 11-05-2006 10:12 PM

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: How to have 2 DIVs side by side with one aligned to left and one aligned to right?

Thread Tools

Display

Hybrid View

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

Thread Information

Users Browsing this Thread

Bookmarks

Bookmarks

Posting Permissions