2 resizable columns (DIV) 1

nego78 · Oct 4, 2004

Hi

How can i setup a two divs which starts in the same line
both of them are 50% width and height 200px without using absolute positioning ?

My page looks like

Code:

<div style="...">
dhtml menus etc
</div>
<div style="...">
a horizontal line with text
</div>
<div id="lc">
left column
</div>
<div id="rc">
right column
</div>

styles ...

Code:

#lc {
    width: 50%;
    height: 200px;
}

#lc {
    width: 50%;
    height: 200px;
}

in this case right column is below left
i can use a float: left for left column but it doesn't make sense
i tried with block: inline but there wasn't good effect

greetings

Webdesign

dwarfthrower · Oct 4, 2004

Make them into <SPANS>.

The span tag is designed to be an inline element. The div tag is designed to be a block element.

_{Never be afraid to share your dreams with the world.

There's nothing the world loves more than the taste of really sweet dreams.}

nego78 · Oct 4, 2004

It won't work.
Reason ?
Because no matter if i call block span or div - everything depends on style:
display: inline - makes it like span
display: block - makes it like div

But i can't imagine how i should write code without use absolute positioning to make 2 columns

I was wondering - i can use absolute but i don't know where they ends (height may change) and what i should do with elements which can be after this two columns ?

Webdesign

Foamcow · Oct 4, 2004

This should work

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "[URL unfurl="true"]http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">[/URL]
<html xmlns="[URL unfurl="true"]http://www.w3.org/1999/xhtml">[/URL]
<head>
<title>Test</title>
<style type="text/css">
		body {
			margin:0;
			padding:0;
		}

		#left {
			width:50% ;
			background-color: #999;
			float:left;
			}

		#right {
			width:50%;
			background-color: #ccc;
			float:right;
		}


</style>
</head>

<body>
		<div id="left">
			left
		</div>

		<div id="right">
			right
		</div>
</body>
</html>

However, I noticed that in IE6 it "sometimes" doesn't. It depends on the browser width.
My guess is that there is some floating point error when IE calculates a percentage of the browser width.

http://www.foamcow.com

"I'm making time

Foamcow · Oct 4, 2004

Of course, if you don't have to make the 2 columns touch in the middle, just specify the width of one (or both) as 49%.

http://www.foamcow.com

"I'm making time

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!

2 resizable columns (DIV) 1

nego78

Programmer

dwarfthrower

Programmer

nego78

Programmer

Foamcow

Programmer

Foamcow

Programmer

Similar threads

Part and Inventory Search

Sponsor