Sidebar Sidebar
Become a MacRumors Supporter for $50/year with no ads, ability to filter front page stories, and private forums.

Fixed and flexable.

Cabbit

Cabbit

macrumors 68020
Original poster
Jan 30, 2006
2,128
1
Scotland
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;
	}
 
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
 
few problems with it coded like that

in ie it looks like
Picture%204.png


and in safari and firefox
Picture%205.png
 
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:

<--- 250 px ---><--- 100% width flexible with browser width --->
Click to expand...

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
 
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
Picture%204.png


and in safari and firefox
Picture%205.png
 
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
 
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>
 
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
 
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.
 

Attachments

  • Picture 2.png
    Picture 2.png
    4.6 KB · Views: 66
  • Picture 3.png
    Picture 3.png
    4.2 KB · Views: 69
  • Picture 4.png
    Picture 4.png
    5.7 KB · Views: 69
  • Picture 5.png
    Picture 5.png
    7.9 KB · Views: 79
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
 
You must log in or register to reply here.
Register on MacRumors! This sidebar will go away, and you'll see fewer ads.
Top Bottom
Back