By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
438,625 Members | 2,235 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 438,625 IT Pros & Developers. It's quick & easy.

CSS positioning div wrapping

P: n/a
Ok,

I signed up for a blogger.com account today and when I went to edit
the template design I noticed it is written in pure CSS. At the sight
of this I danced for joy, as I am currently writing a dotnet asp
application that will use css positioning for the content.

I picked apart all of the templates at blogger.com and understand what
they were doing with all of the CSS code. There was only one part that
I did not quite understand...

In most of the templates they were double wrapping tags for any
content areas. example:

css:

#sidebar {
background:#cdb url("http://www.blogblog.com/no897/corner_sidebar.gif")
no-repeat left top;
width:254px;
float:right;
padding:0;
color:#356;
}
#sidebar2 {
margin:0;
padding:2px 20px 10px;
}

Then in the html they have:

<!-- Begin #sidebar -->
<div id="sidebar"><div id="sidebar2">

Same with #main & #main2.

Why are they putting half of the tag in one div and the other half in
another and in the html they always appear one right after the other?
Couldn't they just combine both css into one id and then that would
eliminate the second "wrapped" css id?
Jul 20 '05 #1
Share this Question
Share on Google+
4 Replies


P: n/a
dk***@cfl.rr.com (DKode) wrote:
I picked apart all of the templates at blogger.com and understand what
they were doing with all of the CSS code. There was only one part that
I did not quite understand...

In most of the templates they were double wrapping tags for any
content areas. example:

#sidebar {
width:254px;
}
#sidebar2 {
padding:2px 20px 10px;
}

Then in the html they have:

<!-- Begin #sidebar -->
<div id="sidebar"><div id="sidebar2">

Why are they putting half of the tag in one div and the other half in
another and in the html they always appear one right after the other?
Couldn't they just combine both css into one id and then that would
eliminate the second "wrapped" css id?


It's a workaround for the IE box model bug. In IE4-5.5 (and 6 if you
trigger Quirks mode) the padding is included in the width. In the CSS
specs and hence in most other browsers (and IE6 if you trigger
Standards mode) the padding is in addition to the width. Hence by
setting width and padding on different elements you get the same
presentation in both sets of browsers. There are other solutions to
the same problem but if you don't mind adding <div> soup to your pages
this one is both safe and simple.

Steve

--
"My theories appal you, my heresies outrage you,
I never answer letters and you don't like my tie." - The Doctor

Steve Pugh <st***@pugh.net> <http://steve.pugh.net/>
Jul 20 '05 #2

P: n/a
Thank you!

This explains everything for me.

Is there anywhere I can look up various IE css bugs and solutions to
them? I plan on deploying a rather large (1000 users) application
developed in ASP.NET with all pages being CSS positioned and I want to
make sure I address most of the major bugs in IE 6.

Thanks again!

Steve Pugh <st***@pugh.net> wrote in message news:<p3********************************@4ax.com>. ..
dk***@cfl.rr.com (DKode) wrote:
I picked apart all of the templates at blogger.com and understand what
they were doing with all of the CSS code. There was only one part that
I did not quite understand...

In most of the templates they were double wrapping tags for any
content areas. example:

#sidebar {
width:254px;
}
#sidebar2 {
padding:2px 20px 10px;
}

Then in the html they have:

<!-- Begin #sidebar -->
<div id="sidebar"><div id="sidebar2">

Why are they putting half of the tag in one div and the other half in
another and in the html they always appear one right after the other?
Couldn't they just combine both css into one id and then that would
eliminate the second "wrapped" css id?


It's a workaround for the IE box model bug. In IE4-5.5 (and 6 if you
trigger Quirks mode) the padding is included in the width. In the CSS
specs and hence in most other browsers (and IE6 if you trigger
Standards mode) the padding is in addition to the width. Hence by
setting width and padding on different elements you get the same
presentation in both sets of browsers. There are other solutions to
the same problem but if you don't mind adding <div> soup to your pages
this one is both safe and simple.

Steve

Jul 20 '05 #3

P: n/a
DKode wrote:
Thank you!

This explains everything for me.

Is there anywhere I can look up various IE css bugs and solutions to
them? I plan on deploying a rather large (1000 users) application
developed in ASP.NET with all pages being CSS positioned and I want to
make sure I address most of the major bugs in IE 6.


Check out this site:
http://www.positioniseverything.net/ie-primer.html

--
--
Ben Thomas - Software Engineer - Melbourne, Australia

This message and any attachments is/are intended for the person/s
to whom it was addressed. It may contain privileged or confidential
information. If you have received this message in error, please notify
the sender promptly and destroy the message without copying it or
divulging its contents to any person.

Opinions, conclusions, and other information in this message that do not
relate to the official business of my firm shall be understood as neither
given nor endorsed by it.

Jul 20 '05 #4

P: n/a
I'm also interested in using CSS positioning with ASP .Net. My problem
is I'm fairly new to ASP .Net. I'm sure theres a great object that is
appropriate but ...
Could you please point me to some sample code that shows the best way
to build CSS pages via .Net? Take pitty on me, please!
DKode wrote:
Thank you!

This explains everything for me.

Is there anywhere I can look up various IE css bugs and solutions to
them? I plan on deploying a rather large (1000 users) application
developed in ASP.NET with all pages being CSS positioned and I want to make sure I address most of the major bugs in IE 6.

Thanks again!

Steve Pugh <st***@pugh.net> wrote in message

news:<p3********************************@4ax.com>. ..
dk***@cfl.rr.com (DKode) wrote:
I picked apart all of the templates at blogger.com and understand whatthey were doing with all of the CSS code. There was only one part thatI did not quite understand...

In most of the templates they were double wrapping tags for any
content areas. example:

#sidebar {
width:254px;
}
#sidebar2 {
padding:2px 20px 10px;
}

Then in the html they have:

<!-- Begin #sidebar -->
<div id="sidebar"><div id="sidebar2">

Why are they putting half of the tag in one div and the other half inanother and in the html they always appear one right after the other?Couldn't they just combine both css into one id and then that wouldeliminate the second "wrapped" css id?


It's a workaround for the IE box model bug. In IE4-5.5 (and 6 if you trigger Quirks mode) the padding is included in the width. In the CSS specs and hence in most other browsers (and IE6 if you trigger
Standards mode) the padding is in addition to the width. Hence by
setting width and padding on different elements you get the same
presentation in both sets of browsers. There are other solutions to
the same problem but if you don't mind adding <div> soup to your pages this one is both safe and simple.

Steve


Jul 21 '05 #5

This discussion thread is closed

Replies have been disabled for this discussion.