floating a variable width element?

Discussion in 'CSS' started by vibrate, Jul 14, 2008.

  1. #1
    Hi, im new to this forum so greetings.

    I have an issue with a menu-bar im creating.

    'Slipbar' has a tiling bg image and takes up the full width of its containing div.

    On the left hand side of this is the page title ('sliptitle)', and on the right in the navigation. This navigation changes depending on whuiich page youre on, and so its width is variable. Each div within this 'slipnav' is a link, with styles applied (dividers, icons), hence the different classes.

    The issue is, obviously I need to float the whole 'slipnav' div to the right, which requitres that i specify a width. However the width is variable depending on the number of sub-divs. If i remove the width: 300px;, the 'slipnav' div pops out of the containing 'navbar' div.

    So i need a way of floating a wariable width div basically.

    Ive tried a few other ideas - applying the 'slipnav.gif' background to the sub-divs / a:links etc, applying text-alight: right to the containing div and only floating the header text etc, but nothing is working.

    Can anyone think of a solution?

    Cheers


    HTML:

    
            <div id="slipbar">
            <div id="sliptitle">
            <p>BETTING SLIP: CONFIRMATION</p>
            </div>
            <div id="slipnav">
            <div id="page1">Page 1</div>
            <div id="page2">Page 2</div>
            <div id="page3">Page 3</div>
            <div id="page3">Page 4</div>
            </div>
            
    Code (markup):
    CSS:

     #slipbar {
            height: 31px;
    	display: block;
    	width: 100%;
    	background: url(../images/yellowBar1.gif);
    	border-left: #FFFFFF 1px solid;
    	border-right: #FFFFFF 1px solid;
    	}
    			
    	#sliptitle p {
    	margin: 6px 0px 0px 10px;
    	font-family: Arial, Helvetica, sans-serif;
    	font-weight: bolder;
    	font-size: 1.5em;
    	float: left;
    	}
    
           #slipnav {
    	float: right;
    	width: 300px;
            background: url(../images/slipnav.gif);
    	}
    Code (markup):
     
    vibrate, Jul 14, 2008 IP
  2. adultwordpressthemes

    adultwordpressthemes Active Member

    Messages:
    102
    Likes Received:
    2
    Best Answers:
    1
    Trophy Points:
    83
    #2
    have you tried setting margins to auto, i know it works for height not sure about width
     
    adultwordpressthemes, Jul 14, 2008 IP
  3. Stomme poes

    Stomme poes Peon

    Messages:
    3,195
    Likes Received:
    136
    Best Answers:
    0
    Trophy Points:
    0
    #3
    Looking at your code, there are some things I think you're misunderstanding.

    Divs are blocks. You don't need to say display: block on divs, nor on floated things, because that is their default. Nor do you need to say width: 100% on divs unless triggering Haslayout in IE, since they are 100% width of their containers by default.

    Your slipnav should be a list of links.

    But all that aside, if a float has no set width, it will "shrinkwrap" to fit the contents inside. I'd need to see what this popping out is?

    If it's only changing based on the amount of HTML, and doesn't change while the user is doing anything ON the page, then setting an id on the body may be your solution.

    <body id="homepage">

    #homepage #slipnav {
    width: 300px;
    }

    on another page
    <body id="aboutpage">

    #aboutpage #slipnav {
    width: 350px;
    }

    and so on. However, I'd need to see visually what it's doing wrong, because you might not need to go this far with the code. Post an image of the sidebar normally, and then popping out?
     
    Stomme poes, Jul 15, 2008 IP