473,695 Members | 1,927 Online
Bytes | Software Development & Data Engineering Community
+ Post

Home Posts Topics Members FAQ

STRICTly speaking, what is 100%?

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 IE, but
firefox and ie both worked pretty well.
Then I started trying to add a 1em high heading for each section, add
some small margins and padding and everything went downhill
(http://play.psmonopoly.com/autosize1.html).

Can someone please explain what 100% really means, and is there a way
that 100% means all the area available minus the padding of the parent
container?

Thanks!

Mike

May 8 '06 #1
17 2134
Mike wrote:

Can someone please explain what 100% really means,
It means 100% of the content area

http://www.w3.org/TR/REC-CSS2/box.html
and is there a way
that 100% means all the area available minus the padding of the parent
container?


Only in IE :)

--
Brian O'Connor (ironcorona)
May 8 '06 #2
ironcorona wrote:
and is there a way
that 100% means all the area available minus the padding of the parent
container?


Sorry, I just re-read that. That's exactly what it means. If I set an
element's width to 100% it will take up *all* of its parent element's
content area.

--
Brian O'Connor (ironcorona)
May 8 '06 #3
Mike wrote:
Can someone please explain what 100% really means, and is there a way
that 100% means all the area available minus the padding of the parent
container?


It depends what property you are talking about.

In the case of height it means "As tall as the container, providing the
container is not height: auto in which case it becomes height: auto
instead".

In the case of width it means exactly what it sounds like, but remember that
the width is the _content_ width and that padding, border and margin go
outside it.

On elements that are display: block, a width of auto is "whatever space is
left over after border, margin and padding are accounted for".

--
David Dorward <http://blog.dorward.me .uk/> <http://dorward.me.uk/>
Home is where the ~/.bashrc is
May 8 '06 #4
That's what I thought, but it doesn't seem to be working that way. All
is fine, until I add some margin or padding and divs seem to bleed
outside the browser window. Take a look at the sample pages, they're
both pretty simple. Any advice?

Thansk!

Mike

May 10 '06 #5
Mike wrote:
That's what I thought
What is what you thought? http://www.safalra.com/special/googlegroupsreply/
, but it doesn't seem to be working that way. All
is fine, until I add some margin or padding and divs seem to bleed
outside the browser window.


So you have an element with content width of 100% of the parent elements
content area, then you add margin or padding. 1005 + something greater than
zero is going to equal more than 100%.
--
David Dorward <http://blog.dorward.me .uk/> <http://dorward.me.uk/>
Home is where the ~/.bashrc is
May 10 '06 #6
On 8 May 2006 21:47:21 -0700 Mike <mp*****@gmail. com> wrote:

| That's what I thought, but it doesn't seem to be working that way. All
| is fine, until I add some margin or padding and divs seem to bleed
| outside the browser window. Take a look at the sample pages, they're
| both pretty simple. Any advice?

Is this what you are seeing?

https://bugzilla.mozilla.org/show_bug.cgi?id=167408

--
-----------------------------------------------------------------------------
| Phil Howard KA9WGN | http://linuxhomepage.com/ http://ham.org/ |
| (first name) at ipal.net | http://phil.ipal.org/ http://ka9wgn.ham.org/ |
-----------------------------------------------------------------------------
May 10 '06 #7
David wrote:
So you have an element with content width of 100% of the parent elements
content area, then you add margin or padding. 1005 + something greater than
zero is going to equal more than 100%.


Here's an example to illustrate the problem I'm having. I set up two
divs (left-content and right-content), I'd like a 1em margin around
both divs, as well as inbetween them. My goal is to have the content
in these two divs what real estate remains after those margins, and
resize as the browser resizes.

Here's what I did:

· Set html rules to 100% width & height, with 0 margin to establish
inheritance.
· Set body to 100% width & height, but added a 1em margin to surround
the page.
· Created the two content divs "left-content" and
"right-content", set height and width to 100% , added some color,
padding and a little text.
· To establish the 1em "margin" between the two divs, I created
parent divs "left" and "right". Both of these are float:left
so they display side by side, height:100% and width:50%, but I added a
..5em padding in the center to establish the 1em "margin" between
the nested content divs. (code below).

I expected that this would work, but when testing in Foxfire and IE7,
it doesn't. If you reduce #left,#right {width:40%}, you'll see that
the 1em "margin" between the two divs doesn't appear in Foxfire or IE7.
Clearly, my understanding of how this works is off. How would you make
this work?

Thanks!

Mike

Here's my code:

<!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" xml:lang="en" lang="en">
<head>
<style type="text/css" media="screen">
html {
height: 100%;
width: 100%;
margin: 0;
}
body {
height: 100%;
width: 100%;
margin:1em;
}
#left {
padding-right:1em;
}
#right {
padding-left:1em;
}
#left,#right {
float:left;
width:40%;
height:100%;
}
#left-content {
height:100%;
width:100%;
padding:1em;
background-color:red;
}
#right-content {
height:100%;
width:100%;
padding:1em;
background-color:blue;
}
</style>
</head>
<body>
<div id="left">
<div id="left-content">Left Content.</div>
</div>
<div id="right">
<div id="right-content">Right Content.</div>
</div>
</body>
</html>

May 10 '06 #8
Mike wrote:
David wrote:
So you have an element with content width of 100% of the parent elements
content area, then you add margin or padding. 1005 + something greater than
zero is going to equal more than 100%.
Here's an example to illustrate the problem I'm having. I set up two
divs (left-content and right-content), I'd like a 1em margin around
both divs, as well as inbetween them. My goal is to have the content
in these two divs what real estate remains after those margins, and
resize as the browser resizes.

Here's what I did:

· Set html rules to 100% width & height, with 0 margin to establish
inheritance.
· Set body to 100% width & height, but added a 1em margin to surround
the page.
· Created the two content divs "left-content" and
"right-content", set height and width to 100% , added some color,
padding and a little text.
· To establish the 1em "margin" between the two divs, I created
parent divs "left" and "right". Both of these are float:left
so they display side by side, height:100% and width:50%, but I added a
.5em padding in the center to establish the 1em "margin" between
the nested content divs. (code below).

A div's default width is auto, or 100% of the container.
As others have noted the total width is the percentage PLUS margin,
padding and border. So 50% width for the two divs used all the width with
no room for the other box features.
I expected that this would work, but when testing in Foxfire and IE7,
it doesn't. If you reduce #left,#right {width:40%}, you'll see that
the 1em "margin" between the two divs doesn't appear in Foxfire or IE7.

You do not understand the CSS box model.
See <http://www.w3.org/TR/REC-CSS2/box.html>.
Change "padding" to "margin".

--
jmm (hyphen) list (at) sohnen-moe (dot) com
(Remove .AXSPAMGN for email)
May 10 '06 #9
Thanks Jim,

Okay, I now understand that 50% is the width of the container, not
factoring in padding, margin or border. Honestly, I'm not sure what
value that is, or why I would ever use it unless I have no other
features. Since I do need those features, and would like to figure out
how to accomplish the following across the width:

margin:1em
padding:1em
width:50% of width - width of features
padding:1em
margin:1em
padding:1em
width:50% of width - width of features
padding:1em
margin:1em

I see two options, and am hoping someone else sees a better way:

(1) use Javascript, and accept that CSS can't go there.
(2) come close by using a smaller percentages.

I gather there is no way to write a CSS rule to have the browser
calculate it all (e.g., 50%-feature width)? Perhaps there's some way
to nest divs in such a way that 100% is truly equal the width I'm
shooting for? If someone can see a solution, please let me know.

thanks!

Mike

May 10 '06 #10

This thread has been closed and replies have been disabled. Please start a new discussion.

Similar topics

4
1580
by: jbailo | last post by:
and it sounds GREAT !!! http://www.virginradio.co.uk/thestation/listen/ogg.html OGG OGG OGG ! ! !
7
1816
by: Neil Zanella | last post by:
OK, this time the compiler's got me a little bit puzzled, simply because it is doing something I am not expecting. My understanding, according to the documentation of std::vector<>::resize(), is that when you specify a second argument the number of elements specified in the first argument is each in turn set to the second argument. void Foo::bar(int x) { static std::vector<int> foo; std::cout << "source: " << x << std::endl;...
3
4153
by: Farouq | last post by:
dragon naturally speaking professional version 6.1 Hi all i have recently downloaded some examples from the dragon website in vb. I have managed to change some code to vba so that it could be used in MS access 2000. But i am stuck on this area, which is: ' Check for a valid speaker TryUsers
3
1392
by: MLH | last post by:
Is the Between ... And operator strictly reserved for use in SQL?
4
2148
by: Jules Winfield | last post by:
I'm using VS2005. I have a solution consisting of twelve projects. All projects are console/service apps except for one which is a WinForms app. There are no web projects. I'd say that I'm at around 125k-150k lines of code in total. My development machine has 2gigs of physical RAM, a hyperthreaded CPU running at 3.6ghz, and plenty of harddrive space on a recently defragged drive. The only installed apps are VS2005 and SQL Server 2005....
6
5798
by: =?Utf-8?B?VGhvbWFzWg==?= | last post by:
Hi, Is it possible to read a file in reverse and only get the last 100 bytes in the file without reading the whole file from the begining? I have to get info from files that are in the last 100 bytes of the file and some of these files are 600Mb -1 GB in size. I am getting "outofMemory.." exceptions on the largest files and the other files take "forever" to get the last 100 bytes. This is the code I have currently that works with...
3
6212
by: jackiemasson | last post by:
Hi, I want to start Dragon Naturally Speaking when the user enters a field on an Access form and stop when they exit the field. I would like to save the audio file to a specific folder and pass the file name from a field value on the form. I also want the text to be inserted into the field. Does Dragon accept command line parameters on starting? Jackie Masson
4
1380
by: David C. Ullrich | last post by:
Mac OS X has text-to-speech built into the interface. So there must be a way to access that from the command line as well - in fact the first thing I tried worked: os.system('say hello') says 'hello'. Is there something similar in Windows and/or Linux? (If it's there in Linux presumably it only works if there
0
8568
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,...
0
9115
Oralloy
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...
1
8845
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,...
0
8825
tracyyun
by: tracyyun | last post by:
Dear forum friends, With the development of smart home technology, a variety of wireless communication protocols have appeared on the market, such as Zigbee, Z-Wave, Wi-Fi, Bluetooth, etc. Each protocol has its own unique characteristics and advantages, but as a user who is planning to build a smart home system, I am a bit confused by the choice of these technologies. I'm particularly interested in Zigbee because I've heard it does some...
0
7660
agi2029
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...
1
6491
isladogs
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...
0
4340
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...
1
3003
by: 6302768590 | last post by:
Hai team i want code for transfer the data from one system to another through IP address by using C# our system has to for every 5mins then we have to update the data what the data is updated we have to send another system
3
1976
bsmnconsultancy
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.