Divs - Wanted: full width - width of seccondary div

yennijb · 02-07-2012, 04:18 AM

I have one div that is floated left that I would like to have expand in width to meet the div that is floating right that is set to 200px wide. Surrounding these two Div's is a 'body holder' div that expands and contracts to a maximum of 1000px and a minimum of 690px.

Is there any way to get the floated left div to meet the floated right div without resorting to static values?

My HTML currently is like this:

Code:

<div class="bodyHolder">
     <div class="body left">
          content weeeee!
     </div>
     <div class = "body rightbar right">
          twitter feed
     </div>
</div>

My CSS looks like this:

Code:

.left
{
	float:left;
}
.right
{
	float:right;
}
.bodyHolder
{
	overflow: auto;
	margin: 2px;
        max-width: 1000px;
	min-width: 690px;
	background-image:url(.../../images/contentholderbg.png);
	color:#153752;
}
.body
{
	overflow:auto;
	background-image:url(.../../images/contentbg.png);
	color:#153752;
}
.content
{
	width:72%;
}
.rightbar
{
	width: 200px;
	text-align:center;
}

the reason this is an issue is because the left floated div, when made large enough to fill the wanted space when the surrounding div is maximized, will push the right floated div down below itself when the surrounding div is shrunken (due to browser size). If it is made small enough not to do this, there is an empty space between them that I want to get rid of. The website I am working on is http://www.yennibrusco.com

Arbitrator · 02-07-2012, 05:34 AM

Quote:

Originally Posted by yennijb

Is there any way to get the floated left div to meet the floated right div without resorting to static values?

Using CSS3 Values and Units' calc() function, this can be done. However, the function is only supported in Firefox and Internet Explorer, I believe. WebKit (i.e., Chrome/Safari) support is expected soon, but it's not there yet. I've no idea what the feature's status is in Opera.

Code:

div.body.left { float: left; width: calc(100% - 200px); }
div.body.rightbar.right { float: right; width: 200px; }

Alternatively, you could un-float the div.body.left element, and swap the positions of the div.body.left and div.body.rightbar.right elements to accomplish the same thing. (To put ordinary, in-flow content side-by-side with floated content, the floated content must come first in the source code.)

Another alternative is CSS-based tables:

Code:

div.bodyHolder { display: table; min-width: 690px; max-width: 1000px; }
div.body.left, div.body.rightbar.right { display: table-cell; }
div.body.rightbar.right { width: 200px; }

abduraooft · 02-07-2012, 05:40 AM

Do it like

Code:

<div class = "body rightbar right">
          twitter feed
     </div>
<div class="body leftbar">
          content weeeee!
     </div>

Code:

.rightbar {
    text-align: center;
    width: 200px;
   float:right;
}
.leftbar{
margin-right:200px;
}

Arbitrator · 02-07-2012, 05:55 AM

Quote:

Originally Posted by abduraooft

Do it like

Code:

...
.leftbar{
margin-right:200px;
}

Yeah, I guess I should have added a margin. I didn't see the OP's last paragraph.

To the OP: without that margin, the un-floated content in the left column will wrap under the right-hand float if there's enough content in the left column to make it taller than the floated column. That will spoil the two-column effect (assuming that's what you're going for).

yennijb · 02-07-2012, 06:12 AM

@Arbitrator Thanks for the help. It seems that calc() doesn't quite function well enough to actually be implemented (i tried in Firefox and Chrome, neither had it work). I suppose I'm just going to have to deal with the space that is between the two div's and leave it at that.

I'm not quite sure why I would want to put my twitter feed on the left side of the page. It's a portfolio website and content is king. There should be a heavy emphasis on the work I've done.

yennijb · 02-07-2012, 06:16 AM

Quote:

Originally Posted by Arbitrator

Yeah, I guess I should have added a margin. I didn't see the OP's last paragraph.

To the OP: without that margin, the un-floated content in the left column will wrap under the right-hand float if there's enough content in the left column to make it taller than the floated column. That will spoil the two-column effect (assuming that's what you're going for).

Ah, okay now I understand why you swapped them. I'm going to attempt this in the morning. I've been fighting CSS for 5 hours now.

Arbitrator · 02-07-2012, 06:36 AM

Quote:

Originally Posted by yennijb

@Arbitrator Thanks for the help. It seems that calc() doesn't quite function well enough to actually be implemented (i tried in Firefox and Chrome, neither had it work).

As I said, Chrome doesn't support it.

I looked into Firefox. It has apparently supported calc() values since version 4 (the current version is 10), but a vendor prefix is required because the value type is defined in a non-final, draft specification. Therefore, you would use -moz-calc().

calc is supposed to be supported in IE9. I'm not sure if their implementation requires a vendor prefix also. (Microsoft's vendor prefix is "-ms-".) As far as I can tell without testing it directly, it doesn't.

Given that, you'd end up with code like:

Code:

width: -moz-calc(100% - 200px); /* Mozilla experimental implementation */
width: -ms-calc(100% - 200px); /* Microsoft experimental implementation (if prefix is needed) */
width: calc(100% - 200px); /* expected final implementation */

Quote:

Originally Posted by yennijb

I'm not quite sure why I would want to put my twitter feed on the left side of the page. It's a portfolio website and content is king. There should be a heavy emphasis on the work I've done.

Floating your Twitter feed to the right will put it on the right-hand side of the page regardless of the source order.

In order to make both columns' top edges line up though, you need to put the right-hand floated column's source code before the left-hand column's source code.