SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    Quake 1 Addict CreedFeed's Avatar
    Join Date
    Feb 2002
    Location
    Milwaukee, WI
    Posts
    296
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Float Div To Right Of Main Content Container

    Here's what I'm trying to do. I have a main content container centered in the browser screen left/right. I want to float a box to the right of the centered content container. See the code below for example.

    I got this working, however a scrollbar appears when the browser is made smaller than the width of the container + the floated box. I'd only like a scrollbar to appear when the browser is made smaller than the width of the container only.

    So if my centered content container is 900 pixels wide, I'd only like a scrollbar to appear when the window is less than 900 pixels, ignoring the width of the floated box to the right.

    Thoughts?

    Here's the code I current have:

    HTML 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" dir="ltr" lang="en">
    <head>
    <style type="text/css">
    #container {
    	position:relative;
    	width:900px;
    	height:600px;
    	margin:0 auto;
    	background-color:#000;
    }
    #box {
    	position:absolute;
    	width:160px;
    	height:300px;
    	right:-200px;
    	background-color:brown;
    }
    </style>
    </head>
    <body>
    
    	<div id="container">
    		<div id="box"></div>
    	</div>
    
    </body>
    </html>
    -- Steve Caponetto
    Quake 1 Resurrection :: CreedFeed

  2. #2
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,199
    Mentioned
    456 Post(s)
    Tagged
    8 Thread(s)
    It works OK doing this out to the left, but not so well to the right. Check out this recent thread on a similar topic:

    http://www.sitepoint.com/forums/css-...ng-739925.html

  3. #3
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,367
    Mentioned
    180 Post(s)
    Tagged
    6 Thread(s)
    You'd need to do something like this.

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.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">
    #page {
        width:900px;
        margin:auto;
        text-align:left;
        background:#000;
        color:#fff;
        padding:10px;
        position:relative;
        z-index:2;
    }
    #adholder {
        width: 100%;
        overflow: hidden;
        position: absolute;
        top: 10px;
        left: 0;
    }
    #adinner {
        width:920px;
        margin:auto;
    }
    .adright {
        width:160px;
        position: relative;
        margin:0;
        height:600px;
        overflow: hidden;
        background:brown;
        z-index:99;
        float:right;
        left:180px;
    }
    </style>
    </head>
    <body>
    <div id="adholder">
        <div id="adinner">
            <div class="adright">Advert goes here</div>
        </div>
    </div>
    <div id="page">
        <h1>Centred page content goes here</h1>
        <p><a href="#">test</a></p>
        <p>test</p>
        <p>test</p>
        <p>test</p>
        <p>test</p>
        <p>test</p>
        <p>test</p>
        <p>test</p>
        <p>test</p>
        <p>test</p>
        <p>test</p>
        <p>test</p>
    </div>
    </body>
    </html>

  4. #4
    Quake 1 Addict CreedFeed's Avatar
    Join Date
    Feb 2002
    Location
    Milwaukee, WI
    Posts
    296
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks Paul! Works great!!
    -- Steve Caponetto
    Quake 1 Resurrection :: CreedFeed


Bookmarks

Posting Permissions

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