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....

    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.
    SEMrush
    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,666
    Likes Received:
    1,563
    Best Answers:
    226
    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,666
    Likes Received:
    1,563
    Best Answers:
    226
    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
  8. cLogik

    cLogik Active Member

    Messages:
    159
    Likes Received:
    28
    Best Answers:
    0
    Trophy Points:
    90
    #8
    Don't give advice when you don't know what you're talking about, and you are without doubt clueless. float is just as "bad" practice as using table.

    OP: Don't listen to the amateur-wanna-be-programmer, the first advice you got, is the correct one. Using display: table in CSS is NOT the same as using a table, the CSS version is mimicking the behavior of a table, and is exactly what you need.

    For the world: I realize this thread is old, very old, you can blame DigitalPoint's "Popular right now" section for that.
     
    cLogik, Jan 24, 2018 IP
  9. Phil S

    Phil S Member

    Messages:
    61
    Likes Received:
    19
    Best Answers:
    4
    Trophy Points:
    35
    #9
    Shots fired! :D
    Seriously though, how many people out there may dare to call @deathshadow a clueless amateur? He's been ripping you guys a new one for as long as I can remember. I'm surprised he still does it.
     
    Phil S, Jan 26, 2018 IP
    Spoiltdiva likes this.
  10. deathshadow

    deathshadow Acclaimed Member

    Messages:
    8,666
    Likes Received:
    1,563
    Best Answers:
    226
    Trophy Points:
    515
    #10
    Typically those who weren't even a twinkle in their father's eye when I wrote my first program, or were unaware of and/or failed to take into account the restrictions we were under eight to ten years ago... and given this thread is eight years old; yeah, that.

    Same types who use stylesheet <link> without media targets, think bootcrap actually made things easier slopping presentational classes on everything, telling semantic markup to go f*** itself, use JavaScript to do stuff CSS has been able to handle since the late 1990's, throw that X-UA rubbish at modern code missing the ENTIRE reason M$ added it to IE in the first place, still use clearfix like it's still 2003, is utterly and completely ignorant of how to use numbered headings properly doing nonsense like dumping out H4 with no H3 or H2 for them to even indicate the start of subsections of, slopping out multiple H1 everywhere EXCEPT the element that should be the H1 without even using the ONLY tags that let you do that, shoving windwos down users throats with target="" despite some TWO DECADES of our being told not to do that, broken forms without fieldsets and span doing label's job, and every other "I cans haz teh intarwebs" bit of derpitude so common to scam artists, nubes, and just plain rubes.

    Side note, @cLogic, that BootWHMCS train wreck is still yours, right?

    But if the youngling wants to step to me, bring it.

    Given that display:table ALWAYS forces a code order that may or may not be appropriate to the content (there are tricks for making float do out-of-order), can even with table-layout:fixed (which probably should have been used there) can still result in NOT giving you the widths you declare -- again depending on the content -- and that eight years ago worrying about IE6 was still a legitiimate concern (and I STILL have clients where that's their most recent browser -- thanks Windows Mobile/Embedded in ROM at many major banks and healthcare facilities!) I would stand by that statement WHEN there are alternatives that can deliver the same functionality... in half the CSS. No joke, I'll stack 333 bytes of code (if you remove my big comment) against 605 bytes any day of the week!

    But that probably means nothing to you, who is likely the type of developer who sees nothing wrong with the halfwit garbage mentally enfeebled tools like turpdress and mind-numbingly idiotic halfwit frameworks like bootcrap have the unmitigated gall to vomit up and call HTML.

    Though nowadays looking back on this, I failed to mention all the OTHER failings like the pixel metric fonts, fixed pixel widths, fixed pixel heights -- epic /FAIL/ at web development for MOST types of content. Seriously if you don't know what's wrong with font-size:14px, pack it in and stop building websites. The WCAG says to use EM, so use 'em!

    But again without knowing what the content is NONE of us has any business saying what the proper markup is, much less how to style it. "modern" content-first that center DIV likely would need to be source-order center, with all the headaches that entails of either needing an extra wrapping DIV, screwing around with hackery like "holy grail", going to flex-box, or the "CSS3 Grid Layout Module" -- and living with the fact that if you use the latter two have zero legacy browser support and coding appropriately.

    In hindsight I do wonder just exactly what the 'content' would be of those DIV, or even if they are content elements. In a modern site that could actually have been a job for generated content or multiple backgrounds with NO extra DIV. At 20px wide about the only thing they'd be good for is hooks for image containers of some sort... hell APo might even be an answer then depending on the content. I mean they're 20x20, what the *** is going in those for CONTENT, and if it's not content then they probably don't even belong in the markup!

    Being eight years ago with the OP likely long-long-long gone and past this, we'll likely never know what the actual usage scenario was.

    Oh and yeah, that "popular right now" crap is useless junk. I actually have a custom stylesheet for stylish that just gets rid of that entire sidebar and reclaims the space for ACTUAL content I give a **** about.

    -- edit -- oh, actually he DID say in the original post this was for images, in which case yeah, I'd be axing most of the DIV, and likely being presentation MOST of it doesn't even belong in the markup. CSS3 multiple-backgrounds we can do it on the DIV. border-image would let us do it on the border of whatever the content is, generated content could do it with a single div, and if legacy support is a concern either APo or pad-stack. In that way ALL the advice given in this thread back then -- even my own -- was garbage!

    But after 8 years, a lot of changes in not just methodology, but also mindset.

    Though that makes your defense of it even MORE comical.
     
    Last edited: Jan 26, 2018
    deathshadow, Jan 26, 2018 IP
  11. cLogik

    cLogik Active Member

    Messages:
    159
    Likes Received:
    28
    Best Answers:
    0
    Trophy Points:
    90
    #11
    You just proved your own stupidity, trying to overwhelm me with a bunch of crap. I've been doing this for 17 years, I spend my time improving myself, instead of trying to look like a tough guy on, well, whatever you can call DP.

    If you write your code like you write your posts. May God help you.

    Btw; TL;DR
     
    cLogik, Jan 29, 2018 IP
  12. deathshadow

    deathshadow Acclaimed Member

    Messages:
    8,666
    Likes Received:
    1,563
    Best Answers:
    226
    Trophy Points:
    515
    #12
    Bwhahahaha... oh man, comic gold. Claims I proved my "stupidity" then immediately goes all TLDR mouth-breather... likely because despite your accusations you have nothing you can actually back it with apart from the typical "wah wah, is not".

    Honestly, I don't mind you calling me stupid, but for f*** sake back it with something made out of meat not straw.

    I've been programming computers for four decades, developing websites for near on 18 years, and I know bullshit when I see it. So far, everything you posted in this thread is most decidedly tripping my BS alarm.

    You want to argue the point I made eight years ago, or anything I say now, EXPLAIN IT! Otherwise you're just acting like a petulant five year old -- or worse an orange cheeto-fingered commander in halt-tweet.

    Or is that "two hardz fur teh TLDR" twitter-generation?

    Though I kind of doubt your 17 year number, since 17 years ago people on forums used to bitch about a 32k post-size limit being too small; today we have mouth-breathing halfwits who go "what on earth are we going to do with 288 characters?!?". Hate to see how you'd react if I posted a LONG reply.
     
    deathshadow, Jan 30, 2018 IP