[SOLVED] Issues with div- depending columns

[Luzo]

Hello!

I was having a few issues getting a website looking correctly when I stumbled upon your site. At first I thought I had fixed the problem by viewing some of the older threads around as it looked fine in my HTML editor. However, once uploaded the design does not work as supposed to. Thus, I decided I'd just register and ask for some help.

To the actual point: I am trying to create a content area with two separate columns. One for "content" and one for "news". These columns are named as "left" and "right" in the style sheet, the general content area is called "content". However, when I try to apply this method the right column does not float to the right but is rather put below the left column and I cannot seem to figure out what the problem is.

The full source code and the currently not so well working design can be found at [removed!] where you should also be able to see what I'm trying to achieve more easily (I want the 'News' content to be to the right of the vertical line).

Either way, the code that is used for that particular part is as follows:

CSS:

#content {
	background: #FFFFFF;
	padding: 5px; 
	margin: 10px;
	border: 1px solid #000000;
	font-family: Georgia, serif;
	font-size: 78%;
}

#left {
	float: left;
	width: 70%;
	border-right: 1px solid #000000;
	padding-right: 10px;
}

#right {
	margin-left: 10px;
	margin-right: 15px;
	float: right;
}

.clear {
	clear: both;
}

HTML:

<!-- Start Main Content -->
<div id="content">
	<div id="left"><h1>Welcome!</h1><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus non tempus diam. Ut sagittis tincidunt lectus et congue. Etiam lorem arcu, ornare et placerat a, feugiat nec sem. Praesent vitae libero vestibulum enim ullamcorper venenatis. Maecenas ut enim orci, elementum sodales turpis. Duis porta venenatis elit a mollis. Donec sagittis, enim nec viverra pharetra, enim eros elementum erat, nec sodales tortor quam non nisl. Aenean quam sapien, varius sit amet ornare eget, facilisis eu metus. Aliquam eros tellus, pharetra ut sollicitudin quis, tempor non odio. Phasellus ac felis in leo volutpat tempus vel a turpis. Aliquam felis risus, viverra in tincidunt vel, mollis porta dolor.</p>

	<p>Praesent ut scelerisque purus. Ut ac tortor nec purus eleifend fringilla. Cras sit amet neque tortor, a gravida odio. Quisque ac tellus eu nisi malesuada aliquam vitae ut mi. Proin faucibus pretium porta. Praesent dictum facilisis luctus. Ut a semper velit. Maecenas quis tristique arcu. Aliquam rutrum sollicitudin erat, in tincidunt turpis egestas sit amet. Etiam ligula lacus, adipiscing vitae luctus id, molestie et urna. Praesent eu ante eros, eget tempus nisl. Donec eu odio pharetra massa pulvinar laoreet convallis id diam. Quisque vel ipsum gravida leo auctor ornare. Donec vel quam sem. Nullam semper, est a eleifend dictum, mi nisi tincidunt tortor, eu ornare metus nulla id justo. </p>
	</div>
	<div id="right">
	<h1>News!</h1><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus non tempus diam. Ut sagittis tincidunt lectus et congue. Etiam lorem arcu, ornare et placerat a, feugiat nec sem. Praesent vitae libero vestibulum enim ullamcorper venenatis. Maecenas ut enim orci, elementum sodales turpis. Duis porta venenatis elit a mollis. Donec sagittis, enim nec viverra pharetra, enim eros elementum erat, nec sodales tortor quam non nisl. Aenean quam sapien, varius sit amet ornare eget, facilisis eu metus. Aliquam eros tellus, pharetra ut sollicitudin quis, tempor non odio. Phasellus ac felis in leo volutpat tempus vel a turpis. Aliquam felis risus, viverra in tincidunt vel, mollis porta dolor.</p>
	</div>
	<div class="clear"></div>
<!-- End Main Content --></div>

I also noticed that the vertical line only adjusts after the left columns length, is it possible to automatically adjust it according to whichever content side is the longest?

Thanks in advance!

[meesa]

You need to give right a width (25.859%)

[Luzo]

How exactly did you calculate that? I remember I tried with 30% but it gave me the same result, so I just threw it off thinking the width would not make any difference

Thanks!

[meesa]

You have margins and padding, so that changes how big it can be.

I got the result with trial and error.

[Luzo]

Okay, figured it'd be something like that. Again; thanks a bunch!