473,837 Members | 1,469 Online
Bytes | Software Development & Data Engineering Community
+ Post

Home Posts Topics Members FAQ

100% Width and Padding

8 New Member


I'm trying align the date to the bottom-right of my "header" div. The "header" div has a padding of 5px all around. I was able to align the "headerDate " div to the bottom of the container, however, since I couldn't align right, I decided to make it width:100% and text-align:right.

In FF3 & IE7, the "headerDate " div extends past the right edge of it's container by 5px or so. Any ideas why? I figured 100% width would take padding into account. Or perhaps there's an even better method of aligning the date to the right?

IE6 creates a whole different issue where the "logo" div doesn't seem to float properly, pushing the date even farther to the left.

As a side question, does there exist a tool which would allow me to view my page as seen by various browsers (ie. FF3, IE7, IE6, Opera) within one interface?

Feb 9 '09 #1
5 4193
7,435 Recognized Expert Expert
Because 'page div header' has a padding of 5px.
does there exist a tool which would allow me to view my page as seen by various browsers (ie. FF3, IE7, IE6, Opera) within one interface?
Feb 9 '09 #2
8 New Member
So if I wanted 'page div.header' to have a padding of 5px, what's the best way to fix it? Why does it account for padding on the left, but not on the right?
Feb 9 '09 #3
7,435 Recognized Expert Expert
I assume you want the padding to keep the logo off the edge. Just add 'left:0' to the headerDate div.

The reason the padding affects only the one side is because block elements are laid out from top to bottom and left to right. Because it's absolutely positioned, the reference becomes the top and left of its parent div.
Feb 9 '09 #4
8 New Member
You're correct... the padding was solely for the logo. With that in mind, I removed the padding from the 'page div.header' and added it to the logo itself. It looks great now. That said, 'left:0' worked too.

Thanks for all the help. I find it difficult sometimes to visualize what's happening... chalk it up to years of table layouts.
Feb 9 '09 #5
7,435 Recognized Expert Expert
Witch!!! .
Feb 10 '09 #6

Sign in to post your reply or Sign up for a free account.

Similar topics

by: Chris Leipold | last post by:
Hi, I have a problem with an element of 100% width and a left paddig. The effect I try to achieve is easy, take a look at: http://swing-tanzen-verboten.de/test.html My Problem is, the width of the element h1 is 100%+20px and causes therefore an horizontal scrollbar. Looks not nice. Any ideas how to get the element to a width of 100% with a padding?
by: Piers Lawson | last post by:
If the following is displayed in IE6 or FireFox, the text box forces the second DIV to expand beyond its 15em width. Is there a way to have the text box fit within the DIV (preferably without losing its default borders)? Thank you in advance Piers <!DOCTYPE html PUBLIC '-//W3C//DTD XHTML 1.0 Strict//EN' 'http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd'>
by: jslaybaugh | last post by:
I'm working on an ASP.NET 2.0 application and am having trouble with a very simple table layout. Using ASP.NET 2.0 it defaults to XHTML 1.0 Transitional and I am trying to comply. However, I cannot seem to get my table to render properly, so I pulled out all the server controls and just made a very simple HTML only page and am having the same problem still. The problem can bee seen in the code below. The top row is 100px high and the...
by: Shadow Lynx | last post by:
Consider this simple HTML: <!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>Strict kills my widths!</title> </head> <body> <table style="width:400px; table-layout:fixed;">
by: Mike | last post by:
I'm trying to create a page: Three sections (left, topright and bottomright), each with a heading and scrolling (overflow) content. The size of these sections should be based upon the size of the user's viewable area in their browser. I'm close... really close, but I'm confused over how to mix specific measurements with percentages. When I began, things were quite nice: (http://play.psmonopoly.com/autosize.html). A little clunky in...
by: reycri | last post by:
I have a page that works as I intend in IE but not in Firefox: <html> <head> <title>Overflow Test</title> </head> <body style='overflow:hidden; margin:0; padding:0;'> <table border='0' cellpadding='0' cellspacing='0' style='border-collapse:collapse; width:100%; height:100%;'> <tr><td colspan='2' style='height:3em; border-bottom:1px solid
by: Mike Collins | last post by:
I am trying to create some pages and have them take 100% of the window, but I cannot get 100% to work. If I set the height of my div, the page displays a scroll bar and it looks like I set the height to about 150%. I tried using CSS, now I am trying tables. Can someone show me where I am mixing things up? Thanks. --Master Sheet <%@ Master Language="C#" AutoEventWireup="true" CodeFile="master.master.cs" Inherits="pts" %>
by: sannymak | last post by:
Hello All, I have some problems making the columns 100% and forcing the footer at the bottom. Please refer to the code below and let me know a solution: HTML 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"><!-- InstanceBegin template="/Templates/templatetest.dwt" codeOutsideHTMLIsLocked="false" --> <head> <meta...
by: Christopera | last post by:
Hello, I have built a site that uses two divs, one verticle, and one horizontal as graphic style for the ite. The problem I am having is that if the browser is resized very small the divs are then smaller than the website is wide. I have tried fixed positioning but then i get the dreaded overlap when the browser is smaller than the website. Absolute positioning gets rid of the overlap but then brings on the width issue. Is there a way to...
by: adamjblakey | last post by:
Hi, Right i have just built a site which has 3 divs align to the left and in the outer 2 divs i have a background which i want to be a 100% so when the middle stretches so do the outer 2 but it does not happen. Please can you have a look at my code: 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"> <head>...
by: Hystou | last post by:
Most computers default to English, but sometimes we require a different language, especially when relocating. Forgot to request a specific language before your computer shipped? No problem! You can effortlessly switch the default language on Windows 10 without reinstalling. I'll walk you through it. First, let's disable language synchronization. With a Microsoft account, language settings sync across devices. To prevent any complications,...
by: Oralloy | last post by:
Hello folks, I am unable to find appropriate documentation on the type promotion of bit-fields when using the generalised comparison operator "<=>". The problem is that using the GNU compilers, it seems that the internal comparison operator "<=>" tries to promote arguments from unsigned to signed. This is as boiled down as I can make it. Here is my compilation command: g++-12 -std=c++20 -Wnarrowing bit_field.cpp Here is the code in...
by: jinu1996 | last post by:
In today's digital age, having a compelling online presence is paramount for businesses aiming to thrive in a competitive landscape. At the heart of this digital strategy lies an intricately woven tapestry of website design and digital marketing. It's not merely about having a website; it's about crafting an immersive digital experience that captivates audiences and drives business growth. The Art of Business Website Design Your website is...
by: Hystou | last post by:
Overview: Windows 11 and 10 have less user interface control over operating system update behaviour than previous versions of Windows. In Windows 11 and 10, there is no way to turn off the Windows Update option using the Control Panel or Settings app; it automatically checks for updates and installs any it finds, whether you like it or not. For most users, this new feature is actually very convenient. If you want to control the update process,...
by: agi2029 | last post by:
Let's talk about the concept of autonomous AI software engineers and no-code agents. These AIs are designed to manage the entire lifecycle of a software development project—planning, coding, testing, and deployment—without human intervention. Imagine an AI that can take a project description, break it down, write the code, debug it, and then launch it, all on its own.... Now, this would greatly impact the work of software developers. The idea...
by: isladogs | last post by:
The next Access Europe User Group meeting will be on Wednesday 1 May 2024 starting at 18:00 UK time (6PM UTC+1) and finishing by 19:30 (7.30PM). In this session, we are pleased to welcome a new presenter, Adolph Dupré who will be discussing some powerful techniques for using class modules. He will explain when you may want to use classes instead of User Defined Types (UDT). For example, to manage the data in unbound forms. Adolph will...
by: conductexam | last post by:
I have .net C# application in which I am extracting data from word file and save it in database particularly. To store word all data as it is I am converting the whole word file firstly in HTML and then checking html paragraph one by one. At the time of converting from word file to html my equations which are in the word document file was convert into image. Globals.ThisAddIn.Application.ActiveDocument.Select();...
by: TSSRALBI | last post by:
Hello I'm a network technician in training and I need your help. I am currently learning how to create and manage the different types of VPNs and I have a question about LAN-to-LAN VPNs. The last exercise I practiced was to create a LAN-to-LAN VPN between two Pfsense firewalls, by using IPSEC protocols. I succeeded, with both firewalls in the same network. But I'm wondering if it's possible to do the same thing, with 2 Pfsense firewalls...
by: bsmnconsultancy | last post by:
In today's digital era, a well-designed website is crucial for businesses looking to succeed. Whether you're a small business owner or a large corporation in Toronto, having a strong online presence can significantly impact your brand's success. BSMN Consultancy, a leader in Website Development in Toronto offers valuable insights into creating effective websites that not only look great but also perform exceptionally well. In this comprehensive...

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.