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

problem with my DIV-based box model

P: n/a
Hi. I am trying to straighten out some DIV issues in the rendering of my
no-tables CSS website. Right now the biggest issue is trying to render 2
columns several DIVs deep in the box model for my index page. If you go to
http://galtsvalley.com/newindex.html - you will see the problem area. I've
highlighted the relevant blocks with nice, harsh primary colors.

Clearly there are positioning problems begetting flow issues - the blocks
subsequent to the 2 side-by-side columns are not positioned relative to
them. Instead, they act as if the columns were not there.

My page's box model breaks down into a TopSection (the header bar) and a
MidSection (content and menu). Both of these in turn contain 2 side-by-side
columns: TopSection-1 & TopSection-2; and MidSection-1 and a MidSection-2.
MidSection-1 is the left column, for content. MidSection-2 is the right
column, for the menu. There is no BottomSection as yet. The relevant style
is copied below.

My problem is in MidSection-1, in what I call the LeadContentSect. Under the
text heading "Consulting Domains" are those problem columns. Again, their
relevant broken style is copied below.

Any ideas where I'm going wrong. Feel free to lambaste me for my CSS!

Brian

p.s. a warning: I have no idea how this page will render on a Mac!

---

newdefault.css:

body
{
font-family: verdana, arial, helvetica, sans-serif;
color: #000000;
background-color: red;
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
}

/********************
** Begin DIV defs **
********************/

/* TopSection (Header) Style */

#TopSection {
position: fixed;
width: 100%;
height: 160px;
top: 0; right: 0; left: 0; bottom: auto;
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
font-family: Arial, Helvetica, Serif;
font-size: 12px;
font-weight: normal;
border-bottom: 1px solid #003300;
background-color: #9999FF;
}
#TopCol-1 {
/* position: absolute;*/
float: left;
width: 40%;
height: auto;
top: 0; left: 0; bottom: auto;
color: #000066;
font-size: 14px;
padding: 140px 5px 0px 10px;
}
#TopCol-2 {
/* position: relative;*/
float: right;
width: 60%;
height: auto;
top: 0; left: 40%; bottom: auto;
text-align: right;
margin-right: 0px;
padding: 114px 10px 0px 0px; /* top right bot left */
/* background-image: url(/img/pine_at_dusk.jpg);
background-repeat: no-repeat;
background-position: right;*/
}

/* MidSection Style */

#MidSection {
position: absolute;
width: 100%;
height: 100%;
top: 160px; left: 0; bottom: auto;
background-color: #ffc;
padding: 0px 0px 0px 10px;
margin: 0;
}
#MidCol-1 {
float: left;
width: 68%;
height: auto;
top: 0; left: 0; bottom: auto;
border-bottom: 10px solid black;
margin-top: 40px;
margin-bottom: 40px;
padding-bottom: 40px;
}
#MidCol-2 {
float: right;
width: 30%;
height: auto;
top: 0; right: 0; left: 70%; bottom: auto;
font-size: 11px;
line-height: 13px;
color: #000000;
background-color: #cc0;
border-left: 2px dotted #000000;
border-bottom: 3px solid #444444;
min-width: 155px;
margin: 0px 0px 0px 0px;
padding: 10px 10px 10px 10px;
}

#LeadContentSect {
position: relative;
width: 100%;
height: 100%;
background-color: none;
padding: 0px 5px 0px 7px;
margin-top: 0px;
margin-bottom: 0px;
border-top: 10px solid #999966;
border-left: 1px solid #999966;
border-right: 1px solid #999966;
border-bottom: 2px solid #999966;
}
..col-container {
position: absolute;
width: 100%;
height: auto;
top: auto; left: 0; right: 0; bottom: auto;
background-color: red;
}
..col-container .Col1 {
float: left;
width: 50%;
height: auto;
top: 0; left: 0; right: auto; bottom: auto;
background-color: blue;
}
..col-container .Col2 {
float: right;
width: 50%;
height: auto;
top: 0; left: 50%; right: auto; bottom: auto;
background-color: yellow;
}

Jul 20 '05 #1
Share this Question
Share on Google+
6 Replies


P: n/a
One more thing -

I just viewed the link (http://galtsvalley.com/newindex.html) on my Win XP
machine under IE 6. I see that I have other issues here. Suffice it to say
that my page renders as I expect it to on my Win 2000 machine under IE 5.5.
If anyone has any pointers on how to make my CSS IE 5.5 and IE 6 compatible,
please share!

Brian
Jul 20 '05 #2

P: n/a
After hacking around a little bit more I've made some progress. The flow
problem was apparently due to setting the position property of
..col-container (within <div id="LeadContentSect">) to 'absolute'. I changed
this to 'relative' and got the desired result.

Getting the contents of the two columns to render properly side-by-side was
a bit trickier. First, I noticed (see link in my OP - i.e.,
http://galtsvalley.com/newindex.html) that as I changed the window width in
IE 5.5 the column 2 contents would "flip" up and down - from rendering
properly side-by-side with the column 1 contents to rendering side-by-side
but "after" the contents in column 1. (Please see link if this description
requires a visual!) The same thing was happening in IE 6. It now seems that
the 'width' percentages were causing problems. When I had the width Col1 and
Col2 set to 50% each this problem occurred. But when I dropped the width of
Col2 to 48% the problem went away. At least in IE 5.5. The problem persists
in IE 6.

I don't perfectly understand what I did that fixed the problem in IE 5.5. or
why the problem persists in IE 6. Any ideas on either count?

To see the new results please go here:

http://galtsvalley.com/newindex2.html (using newdefault2.css)

[Again the original link was http://galtsvalley.com/newindex.html using
newdefault.css]

The new style is copied below for the relevant divs.

TIA,

Brian

---
#LeadContentSect {
position: relative;
width: 100%;
height: 100%;
background-color: none;
padding: 0px 5px 0px 7px;
margin-top: 0px;
margin-bottom: 0px;
border-top: 10px solid #999966;
border-left: 1px solid #999966;
border-right: 1px solid #999966;
border-bottom: 2px solid #999966;
}

..col-container {
position: relative;
width: 100%;
height: auto;
top: auto; left: 0; right: 0; bottom: auto;
background-color: none;
margin-left: 50px;
margin-right: 100px;
}
..col-container .Col1 {
float: left;
width: 50%;
height: auto;
padding-left: 50px;
background-color: none;
}
..col-container .Col2 {
float: right;
width: 48%;
height: auto;
background-color: none;
}
---

/* MidSection Style */

#MidSection {
position: absolute;
width: 100%;
height: 100%;
top: 160px; left: 0; bottom: auto;
background-color: #ffc;
padding: 0px 0px 0px 10px;
margin: 0;
}
#MidCol-1 {
float: left;
width: 68%;
height: auto;
top: 0; left: 0; bottom: auto;
border-bottom: 10px solid black;
margin-top: 40px;
margin-bottom: 40px;
padding-bottom: 40px;
}
#MidCol-2 {
float: right;
width: 30%;
height: auto;
top: 0; right: 0; left: 70%; bottom: auto;
font-size: 11px;
line-height: 13px;
color: #000000;
background-color: #cc0;
border-left: 2px dotted #000000;
border-bottom: 3px solid #444444;
min-width: 155px;
margin: 0px 0px 0px 0px;
padding: 10px 10px 10px 10px;
}

#LeadContentSect {
position: relative;
width: 100%;
height: 100%;
background-color: none;
padding: 0px 5px 0px 7px;
margin-top: 0px;
margin-bottom: 0px;
border-top: 10px solid #999966;
border-left: 1px solid #999966;
border-right: 1px solid #999966;
border-bottom: 2px solid #999966;
}
.col-container {
position: absolute;
width: 100%;
height: auto;
top: auto; left: 0; right: 0; bottom: auto;
background-color: red;
}
.col-container .Col1 {
float: left;
width: 50%;
height: auto;
top: 0; left: 0; right: auto; bottom: auto;
background-color: blue;
}
.col-container .Col2 {
float: right;
width: 50%;
height: auto;
top: 0; left: 50%; right: auto; bottom: auto;
background-color: yellow;
}

Jul 20 '05 #3

P: n/a

"B McDonald" <no@spam.com> wrote in message
news:MZ*****************@newssvr31.news.prodigy.co m...
After hacking around a little bit more I've made some progress. The flow
problem was apparently due to setting the position property of
.col-container (within <div id="LeadContentSect">) to 'absolute'. I changed this to 'relative' and got the desired result.

Getting the contents of the two columns to render properly side-by-side was a bit trickier. First, I noticed (see link in my OP - i.e.,
http://galtsvalley.com/newindex.html) that as I changed the window width in IE 5.5 the column 2 contents would "flip" up and down - from rendering
properly side-by-side with the column 1 contents to rendering side-by-side
but "after" the contents in column 1. (Please see link if this description
requires a visual!) The same thing was happening in IE 6. It now seems that the 'width' percentages were causing problems. When I had the width Col1 and Col2 set to 50% each this problem occurred. But when I dropped the width of Col2 to 48% the problem went away. At least in IE 5.5. The problem persists in IE 6.

I don't perfectly understand what I did that fixed the problem in IE 5.5. or why the problem persists in IE 6. Any ideas on either count?
I think the problem is that you have specified width of the divs as well as
padding,
borders and margins and because your DOCTYPE is setting IE6 to standard mode
as
opposed to quirks mode (quirks mode is the same as earlier versions of IE.)

I'm not sure about IE5.5 but IE5 gets the box model wrong. According to the
CSS
specifications the total width of an item should be the width + padding +
border + margin.
IE5 sets the total width of an item = width and includes padding, border
and margins within it.

There is a box model hack (Tantek's hack) which allows you to set the
correct dimensions for Netscape, Opera, Mozilla
and IE6 standard mode and the width that IE5 will need as well. You can
find out more information about this
at http://www.tantek.com/CSS/Examples/boxmodelhack.html

As long as you don't specify width as wells as padding, border or margins
then you should't have a problem so you could start by removing the
width:100% property on your divs and see if that helps.

AM

To see the new results please go here:

http://galtsvalley.com/newindex2.html (using newdefault2.css)

[Again the original link was http://galtsvalley.com/newindex.html using
newdefault.css]

The new style is copied below for the relevant divs.

TIA,

Brian

---
#LeadContentSect {
position: relative;
width: 100%;
height: 100%;
background-color: none;
padding: 0px 5px 0px 7px;
margin-top: 0px;
margin-bottom: 0px;
border-top: 10px solid #999966;
border-left: 1px solid #999966;
border-right: 1px solid #999966;
border-bottom: 2px solid #999966;
}

.col-container {
position: relative;
width: 100%;
height: auto;
top: auto; left: 0; right: 0; bottom: auto;
background-color: none;
margin-left: 50px;
margin-right: 100px;
}
.col-container .Col1 {
float: left;
width: 50%;
height: auto;
padding-left: 50px;
background-color: none;
}
.col-container .Col2 {
float: right;
width: 48%;
height: auto;
background-color: none;
}
---

/* MidSection Style */

#MidSection {
position: absolute;
width: 100%;
height: 100%;
top: 160px; left: 0; bottom: auto;
background-color: #ffc;
padding: 0px 0px 0px 10px;
margin: 0;
}
#MidCol-1 {
float: left;
width: 68%;
height: auto;
top: 0; left: 0; bottom: auto;
border-bottom: 10px solid black;
margin-top: 40px;
margin-bottom: 40px;
padding-bottom: 40px;
}
#MidCol-2 {
float: right;
width: 30%;
height: auto;
top: 0; right: 0; left: 70%; bottom: auto;
font-size: 11px;
line-height: 13px;
color: #000000;
background-color: #cc0;
border-left: 2px dotted #000000;
border-bottom: 3px solid #444444;
min-width: 155px;
margin: 0px 0px 0px 0px;
padding: 10px 10px 10px 10px;
}

#LeadContentSect {
position: relative;
width: 100%;
height: 100%;
background-color: none;
padding: 0px 5px 0px 7px;
margin-top: 0px;
margin-bottom: 0px;
border-top: 10px solid #999966;
border-left: 1px solid #999966;
border-right: 1px solid #999966;
border-bottom: 2px solid #999966;
}
.col-container {
position: absolute;
width: 100%;
height: auto;
top: auto; left: 0; right: 0; bottom: auto;
background-color: red;
}
.col-container .Col1 {
float: left;
width: 50%;
height: auto;
top: 0; left: 0; right: auto; bottom: auto;
background-color: blue;
}
.col-container .Col2 {
float: right;
width: 50%;
height: auto;
top: 0; left: 50%; right: auto; bottom: auto;
background-color: yellow;
}


Jul 20 '05 #4

P: n/a
"Anne Marie Denley" <> wrote in message
news:10***************@ananke.eclipse.net.uk...

I think the problem is that you have specified width of the divs as well as padding, borders and margins and because your DOCTYPE is setting IE6 to standard mode as opposed to quirks mode (quirks mode is the same as earlier versions of IE.)
I'm not sure about IE5.5 but IE5 gets the box model wrong. According to the CSS specifications the total width of an item should be the width + padding + border + margin. IE5 sets the total width of an item = width and includes padding, border and margins within it.

There is a box model hack (Tantek's hack) which allows you to set the
correct dimensions for Netscape, Opera, Mozilla
and IE6 standard mode and the width that IE5 will need as well. You can
find out more information about this
at http://www.tantek.com/CSS/Examples/boxmodelhack.html

As long as you don't specify width as wells as padding, border or margins
then you should't have a problem so you could start by removing the
width:100% property on your divs and see if that helps.

AM


Thanks Anne Marie - for taking the time to penetrate my post.

I made a bunch of changes to my CSS and some to my XHTML as well. The CSS is
def. more correct - for the page header at least. I've not resolved the
style problems with the content section of the website yet. I'll start that
tomorrow.

Would you mind checking out the result? The link is the same:
http://galtsvalley.com/newindex2.html (using newdefault2.css)


I did take out a bunch of the 'width=100%;' properties from the major div
elements. In my post under the heading "why doesn't my com name display?"
you can find my elaboration on what I did to get my company name to display.

How's it look under IE 5 now?

Brian
Jul 20 '05 #5

P: n/a

"Anne Marie Denley" <am@denley.eclipse.co.uk> wrote in message
news:10***************@ananke.eclipse.net.uk...

I was actually looking at your site in IE6. I was just explaining if you've been coding
the widths and heights for IE5.5 (which I think treats them the same as IE5) then you
have been coding them incorrectly (as per the CSS specifcation) because
total width of an item
= specified width + padding + border + margin.

Also I've had a look at your site in Opera 7.11 & Mozilla 1.4 and it seems
to be
badly broken, especially in Opera. Have you looked at your site in any
other
browsers? It is quite a simple process to download Netscape, Opera,
Mozilla,
Lynx to be able to check your site in various browsers.

I've noticed that you are also using % and px. This makes it more difficult to
work out your widths because you cannot add % and px together.


Thanks again. I hardly have time to explain myself - I'm out the door.
However, I've taken your advice and have gotten rid of many of the 'px'
measurements. I'm not through yet - but thinking about the box model in the
way you implied helped me to get more normal rendering. I've tested in IE
5.5, IE 6 and Opera 5. IE 5.5's rendering is no longer "perfect"... or
rather, looking as I intend. But the discombobulation is much less than
before in the more standards compliant browsers. How does it look on your
end? Here's the new link:

http://galtsvalley.com/newindex3.html

Brian
Jul 20 '05 #6

P: n/a
> Here's the link for the test page: http://galtsvalley.com/newindex7.html
Here's the link for the page CSS:
http://galtsvalley.com/css/newdefault7.css.txt

I'm still (regretably) stuck on this - does anyone see my post??
newindex7.css renders similarly on MSIE5.5, MSIE6, Opera 7.1. But not on
NS7.1. Any ideas on what's wrong?

Brian
Jul 20 '05 #7

This discussion thread is closed

Replies have been disabled for this discussion.