vertically align 2 div's to top of other div 1

sfenx · Sep 15, 2006

Hi, I would like to vertically align the content of 2 div's to the TOP of another div that contains these 2 div's. The body-ID is necessary to draw a border. The problem in Mozilla is also that the right boxtext doesn't stay within the div. Here's what I have for the moment. Any advice would be appreciated.

Code:

<html>
<head>
<style type="text/css">
body {
	text-align: center;
	background-color: #fffff0;
	margin: 0px auto;
}

#body {
  width: 800px;
	border: #000000 solid 1px;
	margin: 15px auto;
	background-color: #eeeeee;
}

#container {
  width: 802px;
  margin: 0px auto;
	border: #000000 none 0px;
	voice-family: "\"}\"";
	voice-family: inherit;
	width: 800px;
}

#container div {
	display: inline;
}

#box_left {
	width: 200px;
}

#box_right {
	width: 600px;
}
</style>
</head>
<body>
<div id='body'>
<div id='container' valign='top'>
	<div id='box_left'><img src='top1.jpg' height='242' width='200'></div><div id='box_right'><img src='top2.jpg' height='99' width='600'><p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exercitation ulliam corper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem veleum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel willum lunombro dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.</p></div>
</div>
</div>
</body>
</html>

Vragabond · Sep 15, 2006

Why have the divs, if you change them to inline elements and just wrap an image within them? And later on put a block level paragraph inside an inline div. I don't know exactly what you're trying to achieve, but it looks like you should just float the first image to the left and second one to the right. Or not even float the second one...

In addition, you're giving your inline divs a width, although inline elements cannot have width. You'll have to rethink your design.

sfenx · Sep 15, 2006

Perhaps your right. What I want is a centered page of 800px width a border. within that page a left menu-column and a right content-column. isn't it more easy to define these columns as divs ? also I don't want any gaps so the 2 columns should enterly fill up the 800px content.

Vragabond · Sep 15, 2006

So, div container will be 800px wide and will have a border and margins on left and right as auto. Inside there will be two divs, floated -- one left and one right. As long as the borders, margins, paddings and widths of the two divs will be exactly 800px, they will width-wise fill the whole container. That's it.

Well, you'll need to clear the floats to make the container extend down to the bottom of the longer of the two columns.

sfenx · Sep 22, 2006

I changed the code and got it to work fine in IE, but in Mozilla I can't seem to draw the border on the body. it just draws a line on top of the div. I think there a problem with the height of that div.
Can someone tell me if my css is correct and if this is the right way to do it ?

Code:

<html>
<head>
<style type="text/css">
body {
	text-align: center;
	background-color: #fffff0;
	margin: 0px auto;
}

#body {
	width: 800px;
	border: #000000 solid 1px;
	margin: 15px auto;
	background-color: #eeeeee;
}

#container {
	width: 802px;
	margin: 0px auto;
	border: #000000 none 0px;
	voice-family: "\"}\"";
	voice-family: inherit;
	width: 800px;
}

#box_left {
	width: 200px;
	float: left;
}

#box_right {
	width: 600px;
	float: right;
}
</style>
</head>
<body>
<div id='body'>
<div id='container'>
	<div id='box_left'><img src='top1.jpg' height='242' width='200'><BR>this is the left column. this is the left column. this is the left column. this is the left column. this is the left column. this is the left column. this is the left column. this is the left column. this is the left column.</div><div id='box_right'><img src='top2.jpg' height='99' width='600'><BR>this is the right column. this is the right column. this is the right column. this is the right column. this is the right column. this is the right column. this is the right column. this is the right column. this is the right column. this is the right column. this is the right column. this is the right column. this is the right column. this is the right column. this is the right column. this is the right column. this is the right column. this is the right column. this is the right column. this is the right column. this is the right column. this is the right column. this is the right column. this is the right column. this is the right column. this is the right column. this is the right column. this is the right column. this is the right column. this is the right column. this is the right column. this is the right column. this is the right column. this is the right column. this is the right column. this is the right column. this is the right column. this is the right column. this is the right column. this is the right column. this is the right column. this is the right column. this is the right column. this is the right column. this is the right column. this is the right column. this is the right column. this is the right column. this is the right column. this is the right column.</div>
</div>
</div>
</body>
</html>

Vragabond · Sep 22, 2006

Floated elements do not contribute to the height of their parent element -- they will simply hang over. IE wrongly does extend the parent to fit them in, that is why it looks ok in that browser. Other browsers require a non floated element to contribute to the overall height of the parent. Easiest thing to do is to include a dummy div at the bottom of your inner floated divs (still within the container) and give it [tt]clear: both;[/tt]. Other option is to use [tt]overflow: auto;[/tt] on the container, but this option does not give uniform results.

sfenx · Sep 24, 2006

thanks Vragabond. the dummy div did it. Great !

Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

vertically align 2 div's to top of other div 1

sfenx

Programmer

Vragabond

Programmer

sfenx

Programmer

Vragabond

Programmer

sfenx

Programmer

Vragabond

Programmer

sfenx

Programmer

Similar threads

Part and Inventory Search

Sponsor