Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 7 of 7
  1. #1
    New to the CF scene
    Join Date
    Feb 2012
    Posts
    4
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Divs - Wanted: full width - width of seccondary div

    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
    Last edited by yennijb; 02-07-2012 at 05:17 AM.

  • #2
    Senior Coder Arbitrator's Avatar
    Join Date
    Mar 2006
    Location
    Splendora, Texas, United States of America
    Posts
    3,305
    Thanks
    28
    Thanked 276 Times in 270 Posts
    Quote Originally Posted by yennijb View Post
    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; }
    For every complex problem, there is an answer that is clear, simple, and wrong.

  • Users who have thanked Arbitrator for this post:

    yennijb (02-07-2012)

  • #3
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,861
    Thanks
    160
    Thanked 2,223 Times in 2,210 Posts
    Blog Entries
    1
    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;
    }
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • #4
    Senior Coder Arbitrator's Avatar
    Join Date
    Mar 2006
    Location
    Splendora, Texas, United States of America
    Posts
    3,305
    Thanks
    28
    Thanked 276 Times in 270 Posts
    Quote Originally Posted by abduraooft View Post
    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).
    For every complex problem, there is an answer that is clear, simple, and wrong.

  • #5
    New to the CF scene
    Join Date
    Feb 2012
    Posts
    4
    Thanks
    1
    Thanked 0 Times in 0 Posts
    @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.

  • #6
    New to the CF scene
    Join Date
    Feb 2012
    Posts
    4
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by Arbitrator View Post
    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.

  • #7
    Senior Coder Arbitrator's Avatar
    Join Date
    Mar 2006
    Location
    Splendora, Texas, United States of America
    Posts
    3,305
    Thanks
    28
    Thanked 276 Times in 270 Posts
    Quote Originally Posted by yennijb View Post
    @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 View Post
    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.
    For every complex problem, there is an answer that is clear, simple, and wrong.


  •  

    Tags for this Thread

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •