We help IT Professionals succeed at work.

CSS Postioning Puzzle - 2 - Locking down Dimensions

Sivakatirswami
on
827 Views
Last Modified: 2012-08-13
OK I was able to implement the solution given by Chris Stanyon. I was previewing in Firefox and setting heights of boxes added the text and got everything to line up... sent the URL to the rest of the team... Later someone came in saying "you know I would have done that with a table, I mean lots of professional sites still use tables for layout. The way you have it, if the user changes his fonts size, all the divs will change, you have is nicely lined up in firefox with the font size you like but when I look at it in Safari the boxes don't line up on the bottom.

Well, I  had no answer.  here is what we are getting in Safari (no text included, and we have removed the "results" div we had before) where we want the bottom of the  boxes to always line up.

http://www.himalayanacademy.com/donations/ddd/images/css_positioning_puzzle.gif 

it gets worse if the user make his font small or has a small size, the divs all shrink and everything moves around! Yikes!

http://www.himalayanacademy.com/donations/ddd/images/css_positioning_puzzle-2.gif

Here we go again now with the CSS and HTML as Chris supplied in the accepted solution and some filler text.  Note that once we lock down the boxes sizes (both width and height) such that they cannot change, we will edit the text accordingly. But, this needs to work across browser and regardless of font size changes. So with those expectations, maybe a table *really is* the best tool? I'm hoping you can prove that not to be the case. Meanwhile I will work on fixing the pixel height of the rightcol and leftcol... but still I want to see what anyone else can offer.  If you set exact heights, then if someone increases their font size we get overrun text, right? But a table would just flex and *still* keep things lined up left to right.




<!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">
<head>
<title>CSS Positioning Puzzle</title>

<style type="text/css" >
div {
	border: 3px rgb(135,135,135) solid;
	padding:5px;
	margin-bottom:10px;
}

h1 {
	text-align:center;
}

#wrapper {
	width:1024px;
	margin:0px auto;
	border:0px;
	padding:0px;
}

#leftcol {
	width:504px;
	float:left;
	padding:0px;
	border:0px;
	margin:0px;
}

#rightcol {
	width:504px;
	float:right;
	padding:0px;
	border:0px;
	margin:0px;
}

#comments{
	width:150px;
	margin-right:10px;
	float:left;
}
  
#faq{
	width:300px;
	float:right;
}
  

  
#footer{
	clear:both;
}
</style>
</head>

<body>

<div id="wrapper">
	<div id="header">
		<h1>Header</h1>
	</div>

	<div id="leftcol">
		<div id="intro">
			<h1>Intro</h1>
			<p>Mus, cus, aut qui blaut eum ipsandi taquunt reperrorest magnimi nihilla dolorrorrum exero doloreptiam eum quam sapid moditati deraerr ovitatis rem reped quibus, ius renduntem is earianducias excesti core nus rae a sinimi, quatemquid que conse doluptatur</p>
		</div>
		
		<div id="comments">
			<h1>Comments</h1>
<p>Mus, cus, aut qui blaut eum ipsandi taquunt reperrorest magnimi nihilla dolorrorrum exero </p>		</div>
		
		<div id="faq">
			<h1>FAQ</h1>
			<p>Mus, cus, aut qui blaut eum ipsandi taquunt reperrorest magnimi nihilla dolorrorrum exero doloreptiam eum quam sapid moditati deraerr ovitatis rem reped quibus</p>
		</div>
		
		</div>	

	<div id="rightcol">
		<div id="vote-form">
			<h1>Vote-Form</h1>
			<p>Mus, cus, aut qui blaut eum ipsandi taquunt reperrorest magnimi nihilla dolorrorrum exero doloreptiam eum quam sapid moditati deraerr ovitatis rem reped quibus, ius renduntem is earianducias excesti core nus rae a sinimi, quatemquid que conse doluptatur</p>
			<p>Mus, cus, aut qui blaut eum ipsandi taquunt reperrorest magnimi nihilla dolorrorrum exero doloreptiam eum quam sapid moditati deraerr ovitatis rem reped quibus, ius renduntem is earianducias excesti core nus rae a sinimi, quatemquid que conse doluptatur</p>
			<p>Mus, cus, aut qui blaut eum ipsandi taquunt reperrorest magnimi nihilla dolorrorrum exero doloreptiam eum quam sapid moditati deraerr ovitatis rem reped quibus, ius renduntem is earianducias excesti core nus rae a sinimi, quatemquid que conse doluptatur</p>
			
		</div>
	</div>

	<div id="footer">
		<h1>Footer</h1>
	</div>
</div>

</body>
</html>

Open in new window






Comment
Watch Question

Dave BaldwinFixer of Problems
CERTIFIED EXPERT
Most Valuable Expert 2014
Commented:
Unlock this solution and get a sample of our free trial.
(No credit card required)
UNLOCK SOLUTION
CERTIFIED EXPERT
Most Valuable Expert 2018
Distinguished Expert 2019
Commented:
Unlock this solution and get a sample of our free trial.
(No credit card required)
UNLOCK SOLUTION

Author

Commented:
No Table: absolutely not.. no when I'm this close...

Thanks to Andy Budd's great book CSS Mastery, and his section on elastic layouts (I should have looked there first...) the solution was to use em's for height and percentages for widths.

This site was designed by a young designer in Adobe InDesign...we're trying to encourage him and I told him "just do anything you like, get it approved and I will do the back end."  Now I'm having fun see how close I can match the original. Had I designed it myself I would have done something different, perhaps easier and then not learned anything in the process.

Of course you are both right about "you can't make it bark like a dog and also swim like a fish too..."  and the sacrifice I made was to allow the text to disappear at the bottom of divs, if the user made his window very small, using "overflow: hidden" The only thing I cannot figure out is how to lock the FAQ div in the middle and stop it from dropping out... but it works.

Here is the result as of today. This is to be frank, a copy of an existing fund raising campaign design.  Words are dummy text yet to be finished and the header is still out with the design team.

http://www.himalayanacademy.com/donations/ddd/ddd-entry.irev

The page is being driven by RunRev's fabulous new server engine that uses xTalk in a similar model as PHP, but is a) 20 times faster b) 1/10th time to code and 1/10th the actual code to get the job done. Sorry for the "my favorite tools" advocacy, but it is a dream machine.

Cheers and thanks for taking the time to look into this for me.

Gain unlimited access to on-demand training courses with an Experts Exchange subscription.

Get Access
Why Experts Exchange?

Experts Exchange always has the answer, or at the least points me in the correct direction! It is like having another employee that is extremely experienced.

Jim Murphy
Programmer at Smart IT Solutions

When asked, what has been your best career decision?

Deciding to stick with EE.

Mohamed Asif
Technical Department Head

Being involved with EE helped me to grow personally and professionally.

Carl Webster
CTP, Sr Infrastructure Consultant
Empower Your Career
Did You Know?

We've partnered with two important charities to provide clean water and computer science education to those who need it most. READ MORE

Ask ANY Question

Connect with Certified Experts to gain insight and support on specific technology challenges including:

  • Troubleshooting
  • Research
  • Professional Opinions
Unlock the solution to this question.
Thanks for using Experts Exchange.

Please provide your email to receive a sample view!

*This site is protected by reCAPTCHA and the Google Privacy Policy and Terms of Service apply.

OR

Please enter a first name

Please enter a last name

8+ characters (letters, numbers, and a symbol)

By clicking, you agree to the Terms of Use and Privacy Policy.