CSS Forum

**Joe3000** · 09-28-2007, 08:24 AM

Say I've got two DIV columns, side by side.

I want one to be 200px on the right and the other to be X% of the space that is left on the right, how would I do that?
t the moment I have this:

Code:

.middle {
    float: left;
    width: *%;
    margin-left: 0px;
    margin-right: 15px;
    padding: 1% 1%;
    text-align: justify;
}

.right {
    float: left;
    width: 200px;
    margin: 0 10px;
    padding: 1% 1%;
    text-align:left;
    
}

This is putting the right div underneath the middle div.

I would like them both on the same horizontal plane.

Thanks

**tripy** · 08:52 AM

I don't think that you can do any computing in css, and if it's floated, it's outside of the normal fow, so it won't work....

Maybe by using inline elements, and not block elements you could do that.
Something like 2 span, 1 being 200px and the other being 100%, but the 2 being not floated nor positioned...

I don't know if this can work, I'm just doing a proposal...

Edit:
Nah... I just tried it, it don't work. Inline elements cannot have a width.
In that case, the easiest way would be to use a table, I'd say.
As it would have 1 cell 200px, and the other would grow to the size available...

Code:

table
+-------+-----------------+
| <div> |      <div>      |
| 200px |       100%      |
+-------+-----------------+

**maxxximus** · 09-28-2007, 10:09 AM

You need to use the negative margin trick.

Belows the code for a sidebar on the right of 200px. The main content fills the rest of the page on the left. When you resize the browser the sidebar stays on the right and the content contracts but always fills the available space.

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<style type="text/css">
<!--

#content {
    background-color: #FF0000;
    float: left;
    padding:0 220px 0 0;


}

#sidebar {
    background-color:#00FFCC;
    float: left;
    width: 200px;
    margin:0 0 0 -205px;
    
}
-->
</style>
</head>

<body>

<div id="content">Main content</div>
<div id="sidebar">Right sidebar coloured green</div>

</body>
</html>

**LadynRed** · 09-29-2007, 01:20 PM

Nooooooooooo.. no tables for layout !!

Maxxximus has a good solution.

**tripy** · 09-29-2007, 03:06 PM

Quote:

Originally Posted by LadynRed

Nooooooooooo.. no tables for layout !!

Maxxximus has a good solution.

I knew I was getting hit for that....
And I will really use maxxximus solution in the future, but I've already used the "table" solution for sites I've done in the paste, because of this.

The negative margin is not something that come instinctively to my mind.
That, and I'm more a programmer than a designer....

**LadynRed** · 09-30-2007, 12:08 PM

I have a site that has a fixed-width column on the left and a semi-stretchy right column (semi in that it's only allowed to stretch to 1000px). It works very well and no negative margins, which I find can be complicated to manage.