homepage Welcome to WebmasterWorld Guest from 54.166.110.222
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Become a Pro Member

Visit PubCon.com
Home / Forums Index / Code, Content, and Presentation / CSS
Forum Library, Charter, Moderator: open

CSS Forum

    
Issues Rendering Wide boxes
Can't get margin to appear if box is wider than browser window
nbdas




msg:1176949
 1:05 pm on Mar 7, 2006 (gmt 0)

I'm trying to render a design that has content sitting in a box 1000px wide with an additional 1px border in all directions. The design also offsets the box by 20px in all directions.

I'm having real trouble rendering this in the Mozilla based browsers (PC Firefox 1.5 / Mac Safari 1.3). The simplest solution I thought would be:
#pghold {margin:20px; width:1000px; border:1px solid #c6c6c6;}

However, where the browser window is smaller than the width of the box, I can't get it to add the 20px margin: the border is flush to the edge of the window.

I tried nesting divs with one parameter each (this has an additional advantage of avoiding the box model problem)i.e.
#pg1 {margin:20px;}
#pg2 {width:1000px;}
#pg3 {border:1px solid #c6c6c6;}
<div id="pg1"><div id="pg2"><div id="pg3">hello</div></div></div>

Still no luck. I've tried swapping the margin for padding, and the edge of the box still stubbornly sits on the edge of the browser window. I just can't get the 20px margin to replicate.

IE is fine (which makes me worry that my code really must be wrong!). My Mac has a higher screen resolution: if I expand my browser window to full size, then again, the problem dissappears.

Has anyone seen this before? Am I doing something fundamentally wrong or is this some kind of bug?

I've been going around in circles for a while now so any feeback would be much appreciated!

 

JAB Creations




msg:1176950
 7:31 pm on Mar 7, 2006 (gmt 0)

I'm trying to render a design that has content sitting in a box 1000px wide with an additional 1px border in all directions. The design also offsets the box by 20px in all directions.

Ok, not a problem! Except I'm not going to give you a static layout unless you keep the 20% of the 800x600 surfers in mind. A well designed (X)HTML page will not have elements with very high static values for width, typically 300px is as about as high as you want to set the width to from my understanding.

Here is what I have done; position, all four positions used as margins. With this layout use bottom/left/right/top in place of your margins.

<html>
<head>
<style type="text/css">
body {
margin: 0px;
}
div.body {
border: 1px solid #000;
bottom: 20px;
left: 20px;
position: absolute;
right: 20px;
top: 20px;
}
</style>
</head>

<body>

<div class="body">

<span>stuff</span><br>

</div>

</body>
</html>

I've tried swapping the margin for padding, and the edge of the box still stubbornly sits on...

I think you should refresh on the box model...
[w3.org...]

Anyway this should work in Firefox 1.5 and 1.0x fine as well as Opera 7+. I can't test IE but you'll want to use Internet Explorer Conditional Comments to adjust it to your liking; send me a sticky if you can't find IECC online. It's the only correct way to make IE work without destroying the code for all the other (good) browsers. ;)

Hope this is at least in the direction of your goal.

John

JAB Creations




msg:1176951
 8:19 pm on Mar 7, 2006 (gmt 0)

Also a followup...

I use overflow to emulate frame scrolling behaviour...which would let your visitors scroll the content and not loose site of your menus. I've cut the height/width and added a bunch of filler to make an example. If you have a lot of content to give you a visual of that...

<html>
<head>
<style type="text/css">
body {
margin: 0px;
}
div.body {
border: 1px solid #000;
bottom: 200px;
left: 200px;
overflow: auto;
position: absolute;
right: 200px;
top: 200px;
}
</style>
</head>

<body>

<div class="body">

<span>stuff</span><br>
<span>stuff</span><br>
<span>stuff</span><br>
<span>stuff</span><br>
<span>stuff</span><br>
<span>stuff</span><br>
<span>stuff</span><br>
<span>stuff</span><br>
<span>stuff</span><br>
<span>stuff</span><br>
<span>stuff</span><br>
<span>stuff</span><br>
<span>stuff</span><br>

</div>

</body>
</html>

I was going to mention something else but my goofy roommate came in and I forgot it IoI.

John

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / CSS
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved