[Last Call] Learn how to a build a cloud-first strategyRegister Now

x
?
Solved

Page layout (3 column DIV layout with header and footer) doesn't fit when padding is added

Posted on 2011-05-06
10
Medium Priority
?
379 Views
Last Modified: 2012-05-11
Hi, well previously I was creating my webpages based on absolute positioning, because it was just easier. But of course you read about all the time how this is frowned upon. So, on my current website I am creating it just based on a flow layout without any positioning defined.

So, in order to do that, i wanted to split up my page somehow. There's table layout and div layout... and of the two it seems div layout is the preferred choice (although table layout is pretty standard also). So, I just applied the CSS below to create a header and footer and 3 column layout applied to my divs.

That all works fine. But then I'm wondering... how do I get controls exactly where I want them? So I'm thinking... ok use padding or margins or borders. So, I apply a padding of 20px to the central column (called '#content') in the css below and then I find that the right column is now thrown below the left and content columns, presumably because previously they all added up to 100% of page width (30% + 40% + 30%) but obviously the padding is not included in those percentages (I assume) and that's why it is now coming to over 100% and the right column doesn't fit in the page anymore.

So, I guess my question is... how am I suppose to do something like that? Ultimately, I'd want a page layout which fits 100% of the page without having to calculate things so that they fit my particular page. Hopefully that's not too confusing...

Any ideas?
#header {
	width:100%;
	height:20%;
	background-color:#FFD700;
}

#footer
{
	clear:both;
	width:100%;
	height:20%;
	text-align:center;
	background-color:#FFA500;
}

#leftcol 
{
	float:left;
	width:30%;
	height: 500px;
}
#content
{
	float:left;
	width:40%;
	height:500px;
}
#rightcol
{
	float:left;
	width:30%;
	height:500px;
}

Open in new window

0
Comment
Question by:AidenA
  • 6
  • 4
10 Comments
 
LVL 38

Expert Comment

by:Tom Beck
ID: 35706519
Use the #content area as a container for your content. To position content inside, use additional divs inside the #content div and apply padding to those inner divs to get clearance between other content holders (left col, right col) on the page.
0
 
LVL 38

Expert Comment

by:Tom Beck
ID: 35706537
In other words don't apply any padding or margins to your content containers directly. They represent your base structure.
0
 

Author Comment

by:AidenA
ID: 35706601
thanks, well i've heard that leads to the thing called 'div hell' which is a lot like 'table hell' i guess, where you just end up with millions of divs?

also, i just figured out how to do it the way i wanted to... which is just to apply the padding as a percentage. I was applying it as a pixel which meant i couldn't calculate anything, but applying it as a percentage means that i can just take off 5 percent from the center column and add 5 percent to the padding

on the other hand... if for some reason i wanted to go back and change my structure and put something else in there, the padding could be an issue...

what you think? you experience this so called div hell or table hell thing?
0
Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
LVL 38

Expert Comment

by:Tom Beck
ID: 35706765
You will more likely to visit div hell if you go down your current path. Using padding as percentage will give different results on different computers. Your page will look very different on a small screen than on a large, high resolution screen.

In my experience, establish a base structure and never deviate from it or modify it with padding or margins then forget about it. When you are adding content consider each content container as an area to fill that is independent of the rest of the web page. You can still mess up your base structure by adding content that is too fat for the container, so you still need to be careful. For example, let text wrap naturally and keep widths to auto whereever possible. Watch out for fat images. Fat images plus padding = width overflow.

As for tables vs. divs, use divs for page layout. Tables are best suited for rendering data in columns and rows. Table structures behave differently than divs when content overflows the set boundaries. Just the number of tags it takes to create a page structure with tables vs. making it with divs should steer you clear of tables for page layout.

Page with table for structure. This is just to create one container:

<table>
<tbody>
  <tr>
    <td>
    </td>
  </tr>
</tbody>
</table>

One container using div:

<div>
</div>

Then when you start nesting tables it gets nuts. Also very hard to troubleshoot later.
0
 
LVL 38

Accepted Solution

by:
Tom Beck earned 2000 total points
ID: 35706975
Other ways t avoid div hell:

 Indent your code so you can visually see when a div is inside another div and just how many levels deep it is.

<div>
    <div>
        <div>
        </div>
    </div>
</div>

 Notate the div tags so when you are troubleshooting a long page of html markup, you can see what each div tag is for. It's more important for the end tags than the beginning because end tags don't have class attributes to clue you in.

<div> <!-- begin outer container -->
    <div>  <!-- begin left col container -->
        blah blah blah
    </div> <!-- end left col container -->
</div> <!-- end outer container -->
0
 

Author Comment

by:AidenA
ID: 35722877
ok thanks, so i guess using lots of divs is ok.... you're just not supposed to start nesting them too deeply? maybe three levels is enough?

also, is it ok then to use absolute positioning on divs, or relative positioning to get things exactly where you want them, or can this lead to problems?

(i'll accept the question there, would appreciate though also if you might be able to help me with those last couple questions thanks!)

0
 
LVL 38

Expert Comment

by:Tom Beck
ID: 35723285
>>maybe three levels is enough?

It's how ever many levels it takes, but for your own sanity keep it to a minimum.

>>is it ok then to use absolute positioning on divs, or relative positioning

I rarely use absolute positioning. I find that relative positioning does what I need to do 99.9% of the time. If you read the spec on those two, they are very similar anyway so I'd rather just stick with the one and forget the other. That being said, I only use position relative to position pop up divs or drop down menus (essentially the same thing). Rarely do I use it to position static content. For that it's usually padding or margin settings and divs that float left (rarely do I float right).

One more tip. Avoid using <p> tags except to separate paragraphs of text. <p> tags add automatic padding. I see a lot of EE posts from web designers who want to know where all the extra space is coming from on their page. Often it's from unnecessary use of <p> tags. You can use divs or span tags and control the padding yourself.

Thanks for the points.
0
 

Author Comment

by:AidenA
ID: 35727425
thanks for that... very helpful. but you've just raised another question then, so you recommend not using paragraph tags? sorry i've been creating webpages for a few years but am totally self taught and never bothered with flow layout before... can you give an example of what you mean there?

is it using a div and then just adding padding and normal writing without any <p> tag? And with the span... that needs to be a part of a tag right? So can you add span to a <p> tag which removes the padding or something?
0
 
LVL 38

Expert Comment

by:Tom Beck
ID: 35728020
Consider the following example. In the first content div I have full control over padding and I get the results I expect. In many EE posts I see <p> tags used as shown in the second content div. This is always part of a more complex page layout and the author is asking why element x has such a large gap between it and an adjacent element when the padding in the containing div is only supposed to be x pixels. If you have a long page of text with multiple paragraphs, <p> tags provide an easy way to format the text into paragraphs with spaces between each. Used in other circumstances, they cause undesirable and unexpected results in page layout.
<style type="text/css">
.bars {width:30%;height:20px;background-color:#f00}
.content {width:30%;height:auto;float:left}
.textDiv {padding:10px}
.text {font-family:Veranda;font-style:italic}
</style>
</head>
<body>
<div class="content">
    <div class="bars"></div>
    <div class="textDiv">       
        <span class="text">Quis ipsum ullamcorper dolore vulputate commodo suscipit eum duis  delenit molestie nostrud qui velit molestie zzril at eum ut volutpat,  consequat feugait aliquip amet. Laoreet illum illum suscipit zzril  nonummy dolore, dolore accumsan. Et, augue at tincidunt wisi duis sed  amet feugiat nulla
        </span>  
    </div>
    <div class="bars"></div>
</div>
<div class="content">
    <div class="bars"></div>
    <div class="textDiv">       
        <p class="text">Quis ipsum ullamcorper dolore vulputate commodo suscipit eum duis  delenit molestie nostrud qui velit molestie zzril at eum ut volutpat,  consequat feugait aliquip amet. Laoreet illum illum suscipit zzril  nonummy dolore, dolore accumsan. Et, augue at tincidunt wisi duis sed  amet feugiat nulla
        </p>  
    </div>
    <div class="bars"></div>
</div>

Open in new window

0
 

Author Comment

by:AidenA
ID: 35728070
ok thanks, sounds good... i'll try it out!
0

Featured Post

Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

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

When it comes to write a Context Sensitive Help (an online help that is obtained from a specific point in state of software to provide help with that state) ,  first we need to make the file that contains all topics, which are given exclusive IDs. …
This article explains how to prepare an HTML email signature template file containing dynamic placeholders for users' Azure AD data. Furthermore, it explains how to use this file to remotely set up a department-wide email signature policy in Office …
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
Video by: Mark
This lesson goes over how to construct ordered and unordered lists and how to create hyperlinks.
Suggested Courses

831 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