1. Advertising
    y u no do it?

    Advertising (learn more)

    Advertise virtually anything here, with CPM banner ads, CPM email ads and CPC contextual links. You can target relevant areas of the site and show ads based on geographical location of the user if you wish.

    Starts at just $1 per CPM or $0.10 per CPC.

How I can make DIV auto width adjust

Discussion in 'CSS' started by jimmy4feb, Feb 16, 2010.

  1. #1
    Hello Everybody,

    I am making a control in CSS using DIV tags....
    SEMrush
    I want to three DIV Tags in main(container) DIV. In main DIV tag these three DIV tags will be aligned horizontally such as LEFT, CENTER & RIGHT.

    Now I want when I change the width(increase or decrease) of main(container) DIV tag then Left DIV remains on left hand side & right DIV remains on right hand side & Center DIV fit(shrink or stretch) completely itself in between LEFT & RIGHT DIV tags.

    I tried it & I have written this sample code:

    
    <html>
    <head>
    	<style type="text/css">
    		
    		#container
    		{
    			margin-left:0px;
    			margin-top:0px;
    			width:400px;
    			height:20px;
    			position:relative;
    			overflow:hidden;
    		}
    		
    		#leftBox
    		{
    			margin-top:0px;
    			margin-left:0px;
    			background-color:#006699;
    			width:20px;
    			height:20px;
    			float:left;
    			overflow:hidden;
    		}
    
    		#centerBox
    		{
    			margin-top:auto;
    			margin-left:0px;
    			background-color:#CC0000;
    			height:20px;
    			float:left;
    			overflow:hidden;
    			position:relative;
    		}
    
    		#rightBox
    		{
    			margin-right:0px;
    			margin-top:0px;
    			background-color:#006699;
    			width:20px;
    			height:20px;
    			float:right;
    			overflow:hidden;
    		}
    	</style>
    </head>
    
    <body>
    	<div id="container">
    		<div id="leftBox"></div>
    		<div id="centerBox"></div>
    		<div id="rightBox"></div>
    	</div>
    </body>
    </html>
    
    HTML:
    In this code I am not able to set centerBox DIV according to my requirement. Actually I want to place round edge images in LEFT & RIGHT DIV & a image in Center DIV which will repeat itself.

    Any type of help will be appreciated.

    Thanks in advance,

    Jimmy
     
    jimmy4feb, Feb 16, 2010 IP
    SEMrush
  2. AssistantX

    AssistantX Peon

    Messages:
    173
    Likes Received:
    10
    Best Answers:
    0
    Trophy Points:
    0
    #2
    The structure you are trying to create is one of the benefits that is afforded to developers by the properties of a table. Luckily, with CSS 2.1 you can duplicate the properties of a table with others elements (divs).

    To achieve table-like properties with the divs you are using, use CSS and set the container to display: table; and the child divs to display: table-cell;. Using your example code, I have created your desired layout with the properties above.

    
    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
        <style type="text/css">
            
            #container
            {
                display: table;
                width:400px;
                height:20px;
            }
            
            #leftBox
            {
                display: table-cell;
                background-color:#006699;
                width:20px;
                height:20px;
            }
    
            #centerBox
            {
                display: table-cell;
                background-color:#CC0000;
                height:20px;
            }
    
            #rightBox
            {
                display: table-cell;
                background-color:#006699;
                width:20px;
                height:20px;
            }
        </style>
    </head>
    
    <body>
        <div id="container">
            <div id="leftBox"></div>
            <div id="centerBox">Content</div>
            <div id="rightBox"></div>
        </div>
    </body>
    </html>
    
    HTML:
    The code above will work in all major upgraded browsers, however, proceed with caution. The code will not work in IE 7 or below because those versions do not support the table-cell value. Opera and Safari(Chrome) require that the cell with no defined width (centerBox) contains more than whitespace, otherwise, they will treat the cell as if it were display: none;.
     
    AssistantX, Feb 16, 2010 IP
  3. unigogo

    unigogo Peon

    Messages:
    286
    Likes Received:
    8
    Best Answers:
    0
    Trophy Points:
    0
    #3
    unigogo, Feb 16, 2010 IP
  4. deathshadow

    deathshadow Acclaimed Member

    Messages:
    8,440
    Likes Received:
    1,511
    Best Answers:
    221
    Trophy Points:
    515
    #4
    1) the question is an absolute riot. the default behavior of a div is to expand to the available space.

    2) AssistantX's advice of using a table or table-cell is REALLY bad advice. We get to not using tables, so let's use CSS to make it a table; NOT.

    3) That generator unigogo linked to is cute, too bad the code it makes doesn't seem to work in Opera or IE.

    There are two solutions.

    1) Move the content before the two sidebars, give it an extra wrapper, and use negative margins trickery to make the floats 'ride up' - this is how that column generator works (kind-of)

    2) Move the content AFTER the two sidebars, and set margins on the content equal to the two columns.


    Though honestly without seeing real content I cannot say which is the better approach - since you seem to be fixing the height at 20px, there's no reason in either case to resort to table behavior - is the final version going to have those fixed heights, or be dynamic.

    Your lack of content in the examples leaves more questions than it does let any of us provide a clear-cut answer.
     
    deathshadow, Feb 20, 2010 IP
  5. AssistantX

    AssistantX Peon

    Messages:
    173
    Likes Received:
    10
    Best Answers:
    0
    Trophy Points:
    0
    #5
    I do not believe telling someone to use CSS display properties to get table-like qualities is bad advice. I believe you are mistaken about why display: table exists and possibly why use of <table> is discouraged in layout use.

    HTML tags describe what they contain. Tables are HTML tags which are supposed to be used to arrange [tabular] data. As with many HTML tags, the <table> tag hints at its designated use by its name. However, despite being a violation of their designation, many people use tables for their layout in order to use its default properties. Its a violation similar to using <blockquotes> to enclose an image gallery.

    However, CSS is different. CSS is designed to implement styling (presentational), not designed to represent semantics/meaning. Therefore, standardizing a CSS property value that would change a element's meaning would be against CSS's intent. Keeping that in mind, setting display: table would make the element look(display)/act like a table, not declare the section as a table. CSS's emphasis on styling is a reason why its display: table, and not more like section-type: table.

    If you don't accept my reasoning, then you should read the suggestion of w3.org (the group that standardized both CSS and HTML):
     
    AssistantX, Feb 20, 2010 IP
  6. deathshadow

    deathshadow Acclaimed Member

    Messages:
    8,440
    Likes Received:
    1,511
    Best Answers:
    221
    Trophy Points:
    515
    #6
    Yeah, but why use it when you don't have to? But the same could be said for MOST of that CSS... Especially when your method doesn't work in IE6 at all.

    Table-cell is silly when you can just set wrapping behavior on #container, float:left, float:right, and margin the center.

    
    <!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"
    	lang="en"
    	xml:lang="en"
    ><head>
    
    <meta
    	http-equiv="Content-Type"
    	content="text/html; charset=utf-8"
    />
    
    <style type="text/css">
        
    #container {
    	overflow:hidden; /* wrap floats */
    	width:400px; /* also wraps floats */
    	font:16px/20px arial,helvetica,sans-serif; 
    	/* 
    		fixed metric prevents large font systems from busting out
    		the bottom and making it taller. For true cross-browser
    		compatibilty something like faux-columns should probably
    		be applied to this element instead!
    	*/
    	background:#C00;
    }
    
    #leftBox,
    #rightBox {
    	width:20px;
    	height:20px;
    	background:#069;
    }
    
    #leftBox {
    	float:left;
    }
    
    #rightBox {
    	float:right;
    }
    
    #centerBox {
    	margin:0 20px;
    }
    
    </style>
    
    </head><body>
    
    <div id="container">
        <div id="leftBox"></div>
        <div id="rightBox"></div>
        <div id="centerBox">Content</div>
    </div>
    
    </body></html>
    
    Code (markup):
    Though with the fixed height and two small areas, I have to ask is this for rounded corner images or some such? If so, jimmy4feb should probably be using a much leaner approach like sliding doors.
     
    deathshadow, Feb 21, 2010 IP
  7. AssistantX

    AssistantX Peon

    Messages:
    173
    Likes Received:
    10
    Best Answers:
    0
    Trophy Points:
    0
    #7
    I understand there may be better ideas then the one I gave depending on what the person really wants to do. However, I do not believe my idea is overkill. It takes less code than the margin play example (your solution #1), equal amount of property declarations to your latest example if I were to also combine shared styling, and does not add a ton of possibly disruptive properties to the layout.

    If your issue is with browser compatibility, I clearly stated some of the possible compatibility issues. The user can make a judgment on whether those are show-stoppers. I was not trying to give a "be-all, end-all" approach, but I was giving the user a choice for now and the future.

    In either regard, whether you dislike my idea or not, calling my idea "REALLY bad advice" is absurd and discouraging the use of CSS tables because of their HTML table display origins is ignorant.
     
    AssistantX, Feb 21, 2010 IP