Solved

CSS Postioning Puzzle - 2 - Locking down Dimensions

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

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 42

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

What Should I Do With This Threat Intelligence?

Are you wondering if you actually need threat intelligence? The answer is yes. We explain the basics for creating useful threat intelligence.

Join & Write a Comment

Suggested Solutions

Browsers only know CSS so your awesome SASS code needs to be translated into normal CSS. Here I'll try to explain what you should aim for in order to take full advantage of SASS.
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 Micro Tutorial users will learn how to embed custom fonts into websites using @font-face in CSS Select a font: Ensure the EULA allows you to use @font-face: Download the font: Get the browser-compatible files you need: Edit your CSS       - Name …
In this tutorial viewers will learn how to customize the background color and font color of highlighted text using the ::selection element in CSS Begin by defining the selected text as an element in CSS by typing "::selection": Style the ::selection…

757 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

19 Experts available now in Live!

Get 1:1 Help Now