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 3 of 3
  1. #1
    New to the CF scene
    Join Date
    Jan 2006
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts

    How do I get these DIVs to be the right size?

    I am having trouble getting a couple of DIVs to stay the right size and width. I am converting a layout from using tables to DIVs, and it's all gone well up until this. With the table layout, the boxes that are giving me trouble as DIVs were automatically sized, depending on how much text they contained. With the DIVs, they're coming out at 100%. I can change the size if I set it to a pixel value, but I'd much prefer it to automatically size.

    This is how it used to look:


    This is what it does now:


    This is the code for that section of the page:
    Code:
    <div class=infoboxes>
    
    	<a href="#" onClick="expandcontent('sc1')">Who&hellip;</a>
    		<div id=sc1 class=switchcontent>
    		<blockquote>
    		<b>Stert</b>
    		<br>
    		theanix -at- gmail -dot- com
    		<br>
    		<a href="http://www.myspace.com/hostiletakeovercrew" target=new>myspace.com/hostiletakeovercrew</a>
    		<br>
    		0411 540 373
    		</blockquote>
    		</div>
    <p>
    	<a href="#" onClick="expandcontent('sc2')">What&hellip;</a>
    		<div id=sc2 class=switchcontent>
    		<blockquote>
    		<b>Images</b>
    		<br>
    		<a href="http://www.drukqs.net/" target=new>r. d. james</a>, <a 						
    
    href="http://www.director-file.com/cunningham" target=new>c. cunningham</a>; <a 					
    
    href="http://en.wikipedia.org/wiki/At_the_drive-in" target=new>el paso, tx</a>
    		</blockquote>
    		</div>
    </div>
    And here is the stylesheet:
    Code:
    .switchcontent
    	{
    	text-align: center;
    	width: auto;
    	}
    
    
    .infoboxes
    	{
    	font-size: 10pt;
    	font-family: courier;
    	line-height: 12pt;
    	color: #ffffff;
    	text-align: center;
     	}
    
    blockquote
    	{
    	font-size: 10pt;
    	font-family: courier;
    	line-height: 12pt;
    	color: #ffffff;
    	border: dashed;
    	border-width: 1px;
    	text-align: left;
     	}

  • #2
    The fat guy next door VIPStephan's Avatar
    Join Date
    Jan 2006
    Location
    Halle (Saale), Germany
    Posts
    8,482
    Thanks
    6
    Thanked 981 Times in 954 Posts
    Divs are always expanding to 100% width automatically as opposed to tds in tables collapsing if there's less content. There's nothing you can do about it except of setting a specific width (which isn't very flexible, though).
    You can set "min-width: ??px;" and "max-width: ??px;" but that doesn't work in IE.

  • #3
    New Coder
    Join Date
    Jan 2006
    Posts
    98
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Cool

    hi Stert, there are several ways of doing this, here are two.
    the first positions a specific <div> centrally across the page and gives a uniform layout.
    Code:
    #myDiv{
    position:absolute;
    top:0;
    left:10%;
    right:10%; /*width is implied no need to set */
    /*IE ignores 'right' so use width as well */
    width:90%;
    }
    the second example uses margin to ensure that a class of <div>s is positioned at least 100 pixels away from any other element. this gives a more organic layout.
    Code:
    .nervousDiv {
    margin:100px;
    width:auto;
    }
    a sketch pad and pencil are useful tools when converting from table to div . Dont be scared to experiment with position, top, left,bottom, right, width, height, margin etc
    live every day as if it was your first


  •  

    Posting Permissions

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