Fixed and flexable.

Discussion in 'Web Design and Development' started by Cabbit, Aug 15, 2008.

  1. Cabbit macrumors 68020

    Cabbit

    Joined:
    Jan 30, 2006
    Location:
    Scotland
    #1
    i am trying to work out how to make 2 divs where 1 is fixed width and the other is flexible.

    <--- 250 px ---><--- 100% width flexible with browser width --->

    It is done with the middle content of this site but i am more comfortable coding php than html.

    The code i have just now works for safari and firefox but for ie it pushes the right div below the left one.
    HTML:
    #left {
    	float: left;
    	width: 250px;
    	border: 1px solid #000;
    	}
    #right {
    	display: block;
    	width: 100%;
    	border: 1px solid #000;
    	}
    
     
  2. SrWebDeveloper macrumors 68000

    SrWebDeveloper

    Joined:
    Dec 7, 2007
    Location:
    Alexandria, VA, USA
    #2
    One easy way is to simply remove "width: 100%;" from the "right" selector.

    You'll end up with this:

    HTML:
    #left {
        float:left;
        width: 250px;
        border: 1px solid #000
        }
    #right {
        display: block;
        border: 1px solid #000
        }
    
    I tested in latest versions of MSIE, NS, Opera, FF and Safari.

    DIV's by default expand the entire client width within the document flow but MSIE apparently sees specifying 100% for width as an explicit fill, meaning it ignores the float in the "left" selector and simply fills the entire client width forcing it to act like its block level. Bug or "feature", depends on how you look at it - but alot of people are used to working with percentages for table cells to stretch things out, and then... this happens! heh

    On a side note, might not want to use left/right as selector names, gets kinda confusing since they're used for other purposes in CSS and HTML.

    -jim
     
  3. Cabbit thread starter macrumors 68020

    Cabbit

    Joined:
    Jan 30, 2006
    Location:
    Scotland
    #3
    few problems with it coded like that

    in ie it looks like
    [​IMG]

    and in safari and firefox
    [​IMG]
     
  4. SrWebDeveloper macrumors 68000

    SrWebDeveloper

    Joined:
    Dec 7, 2007
    Location:
    Alexandria, VA, USA
    #4
    Me thinks you're putting the left div INSIDE the right div, i.e.

    HTML:
    <div id="right">stuff in right
       <div id="left">stuff in left</div>
    </div>
    But when you originally said:

    That shows me you want the left next to the right, not inside. Wouldn't you agree?

    Which explains why I used (and tested successfully, as noted):

    HTML:
    <div id="left">stuff in left</div>
    <div id="right">stuff in right</div>
    
    :D:D:D

    Please show me your HTML if you meant something else.

    -jim
     
  5. Cabbit thread starter macrumors 68020

    Cabbit

    Joined:
    Jan 30, 2006
    Location:
    Scotland
    #5
    nope the divs are not inside each other.

    HTML:
    <!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" xml:lang="en" lang="en">
    	<head>
    		<title></title><!-- Page title -->
    		<style type="text/css" media="all">
    			#left {
    				float: left;
    				width: 250px;
    				border: 1px solid #000;
    			}
    			#right {
    				border: 1px solid #000;
    			}
    		</style><!-- Stylesheet in site root directory -->
    	</head>
    	<body>
    		<div id="left">
    			<p>prr mew mew</p>
    		</div>
    		<div id="right">
    			<p>prr prr la la</p>
    		</div>
    	</body>
    </html>
    
    in ie it looks like
    [​IMG]

    and in safari and firefox
    [​IMG]
     
  6. SrWebDeveloper macrumors 68000

    SrWebDeveloper

    Joined:
    Dec 7, 2007
    Location:
    Alexandria, VA, USA
    #6
    Aaaah, you're using P tag inside the div, that causes your problem. The solution is to create some additional CSS to apply "margin: 0" to the P tag. Unfortunately, this also removes the margin space you'd expect around the content, which is why you added the P tag in the first place. So, the margin space could be added in a wrapper div for each section as one possibility, I'm sure you can think of others. Or drop the P and simply use padding instead in your div's (the P tag is a form of a styling tag I think, and it's good practice to separate content from style). Just an .02 on that last part, of course.

    I'd like to hear from others on this, maybe there is a more eloquent solution that not only aligns the div's properly but also handles the P tags properly in both div's, and on all browsers!

    -jim
     
  7. notnek macrumors 6502

    notnek

    Joined:
    Oct 25, 2007
    #7
    make sure you clear out the margin and padding. i add it on every site i do. clear those, then pad your p element. i tested in safari, firefox 3, and ie7 and it works in everyone.

    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" xml:lang="en" lang="en">
    	<head>
    		<title></title><!-- Page title -->
    		<style type="text/css" media="all">
    			* { margin: 0; padding: 0; }
    			p { padding: 2px; }
    			#left {
    				float: left;
    				width: 250px;
    				border: 1px solid #000;
    			}
    			#right {
    				border: 1px solid #000;
    			}
    		</style><!-- Stylesheet in site root directory -->
    	</head>
    	<body>
    		<div id="left">
    			<p>prr mew mew</p>
    		</div>
    		<div id="right">
    			<p>prr prr la la</p>
    		</div>
    	</body>
    </html>
     
  8. SrWebDeveloper macrumors 68000

    SrWebDeveloper

    Joined:
    Dec 7, 2007
    Location:
    Alexandria, VA, USA
    #8
    Almost.

    Look carefully at the content in the right div with your code, notnek. It is left justified, ignoring the padding you set for the P tag. Change that padding value to 20 in your code to exaggerate the effect so you can see what I mean, left div looks great, right div content pushed to the left margin. This is true in FF 3.0.1 Mac and MSIE 7.0 XP Home.

    [ content left ][content right --------------------------------- ]

    This behavior is in all the examples posted by the OP as well, one of the two div's behaves like this when the P tag is used.

    Great effort, notnek, honest. Try again?

    -jim
     
  9. notnek macrumors 6502

    notnek

    Joined:
    Oct 25, 2007
    #9
    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" xml:lang="en" lang="en">
    	<head>
    		<title></title><!-- Page title -->
    		<style type="text/css" media="all">
    			* { margin: 0; padding: 0; }
    			p { padding: 5px; }
    			#left {
    				float: left;
    				width: 250px;
    				border: 1px solid #000;
    			}
    			#right {
    				margin-left: 251px;
    				border: 1px solid #000;
    			}
    		</style><!-- Stylesheet in site root directory -->
    	</head>
    	<body>
    		<div id="left">
    			<p>prr mew mew</p>
    		</div>
    		<div id="right">
    			<p>prr prr la la</p>
    		</div>
    	</body>
    </html>
    order of screens: 2.png IE7, 3.png FF3 Windows, 4.png FF3 Mac, 5.png Safari 3.1.1

    this solves the problem of having one fixed div and one flexible div while keeping padding for your p element. if you wanted to use the left and right divs as containers only, you can create divs and just pad them accordingly. really anything will work as long as you clear out the margin and padding to start, and move the right div further right than the width of the fixed div. hope this helps the OP.

    and SRD, thanks for pointing out my error, I've developed a site recently that had this problem, and had forgotten i needed to push the flexible div over.
     

    Attached Files:

  10. SrWebDeveloper macrumors 68000

    SrWebDeveloper

    Joined:
    Dec 7, 2007
    Location:
    Alexandria, VA, USA
    #10
    It does help the OP, thanks for working hard on this one.

    The key is indeed to clear the margins and padding first, then either offset margins as you did or consider absolute positioning which is another approach the OP can take.

    Great job!!!

    -jim
     

Share This Page