Solved

CSS Postioning Puzzle - 2 - Locking down Dimensions

Posted on 2010-09-16
3
781 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






0
Comment
Question by:Sivakatirswami
3 Comments
 
LVL 83

Assisted Solution

by:Dave Baldwin
Dave Baldwin earned 100 total points
ID: 33698936
Sites that are using similar code are specifying the font size in the code and are not putting boxes around the text.  Without the boxes, you don't have the perception of misalignment so strongly.  You can't make a page that will automatically do everything.  You need to decide what you can accomodate and what you can't.
0
 
LVL 43

Accepted Solution

by:
Chris Stanyon earned 350 total points
ID: 33700060
As Dave said, you won't get a site that does everything.

If you set specific heights on your DIVs, then it stands to reason that if you change your font size, the layout will change. DIVS flow with the text. If you set a DIV to a height and then increase your font-size, either the div needs to increase in height or the text will be cut off.

As you've set the width of the DIVs, then increasing the font size won't change these widths. Not really sure about why your second image is breaking like that. I've viewed your code in Firefox and Safari, and changing the font-size doesn't change the width of the DIVS. The only way I can see this happening is if your widths are set in EMs - as this is relative to the font-size.

You could add min-height on your DIVs, which will prevent them from shrinking beyond a certain height, but also allows them to grow when the font size increases.

As for using TABLE - don't do it - you'll likely cause more problems  than you solve, along with lack of flexibility and scalability.


 
 


0
 

Author Comment

by:Sivakatirswami
ID: 33706372
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.
0

Featured Post

Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

SASS allows you to treat your CSS code in a more OOP way. Let's have a look on how you can structure your code in order for it to be easily maintained and reused.
Why do we like using grid based layouts in website design? Let's look at the live examples of websites and compare them to grid based WordPress themes.
In this tutorial viewers will learn how to style different bullet points for unordered lists in CSS. Begin with a normal unordered list; the default bullet point is a solid circle: In the CSS, create a defined class of unordered list by typing "ul.S…
The viewer will learn the benefit of using external CSS files and the relationship between class and ID selectors. Create your external css file by saving it as style.css then set up your style tags: (CODE) Reference the nav tag and set your prop…

911 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

16 Experts available now in Live!

Get 1:1 Help Now