[iain]

anyone know their CSS?

i'm playing around with a simple site, that originally looked like :

original

using messy tables, and have been trying to redo it just using CSS.

it's almost there in principle, and currently looks like :

css version

the thing that's bugging me is the missing 1px border around the main wrapper <div>.

The CSS layout looks like :
/* CSS Document */

#left {
background:#cccccc;
float:left;
width:187px;
border: 1px solid black;
margin-top:1px;
height:400px;
}
#main {
background:#ffffff;
float:left;
width:410px;
border: 1px solid black;
margin-top:1px;
padding-left:10px;
height:400px;
}
# h2, #main h3, #main p {
padding:0 0 10px 0;
}

#sidebar {
background:#666666;
float:right;
width:145px;
border: 1px solid black;
margin-top:1px;
height:400px;
}
#sidebar ul {
margin-bottom:0;
}
#sidebar h3, #sidebar p {
padding:0 0 0 0;
}

And the wrapper's styling is in a separate file :

html {
margin-top:30px;
padding:0;
background:#FFFFFF;
color:#000;
}
body {
min-width:760px;
background-color: #FFFFFF;
}
#wrapper {
margin:0 auto;
width:760px;
border: 1px solid black;
background-color:#FFFFFF;
}

any help or pointers greatly appreciated.

cheers,
Iain

[pjb007]

Try changeing any
border: 1px solid black;

to
border: 0px;

[iain]

thing is i want the 1px border around the wrapper.

it actually looks as i would expect in IE (6) now, ie with the three content divs (+header) sitting nicely in the wrapper div :

link

but not in safari or firefox. if you can look in either as well as IE you'll see what i mean.

the CSS now looks like :

#wrapper {
margin:0 auto;
width:760px;
border: 1px solid black;
background-color:#FFFFFF;
}
#left {
background:#cccccc;
float:left;
width:187px;
border: 1px solid black;
margin:1px;
height:400px;
}
#main {
background:#ffffff;
float:left;
width:410px;
border: 1px solid black;
margin-top:1px;
padding-left:5px;
padding-right:5px;
height:385px;
}
# h2, #main h3, #main p {
padding:0 0 10px 0;
}
#sidebar {
background:#666666;
float:right;
width:133px;
border: 1px solid black;
margin:1px;
height:400px;
}
#sidebar ul {
margin-bottom:0;
}
#sidebar h3, #sidebar p {
padding:0 0 0 0;
}
html {
margin-top:30px;
padding:0;
background:#FFFFFF;
color:#000;
}
body {
min-width:760px;
background-color: #FFFFFF;
}

Cheers,
Iain

[click2366]

is it a case that the border seems to stay at the top where #wrapper starts? if so, put <div style="clear:both"></div> at the bottom before the end of the </div> of #wrapper

I tend to do this because otherwise the border just stays at the top of the page (looking like a horizontol 2px line (1px x2 etc)

try that and let me know if it works

[alias alias]

firefox add on firebug may be of help to you

edit
and i think changing the width fixes it

#wrapper {
background-color:#FFFFFF;
border:1px solid black;
margin:0pt auto;
width:758px;

[pjb007]

Originally Posted by alias alias

firefox add on firebug may be of help to you

Also Web Developer I used that to edit the CSS for my reply in #2 and preview the change within the browser
https://addons.mozilla.org/en-US/firefox/addon/60

[iain]

Originally Posted by click2366

is it a case that the border seems to stay at the top where #wrapper starts? if so, put <div style="clear:both"></div> at the bottom before the end of the </div> of #wrapper

I tend to do this because otherwise the border just stays at the top of the page (looking like a horizontol 2px line (1px x2 etc)

try that and let me know if it works

yes! thank you. that clear:both has caught me out before, but i took it to mean that one <div> was clearing any <div>s above it.

so it didn't occur to me here as the <div>s in question sit within the main wrapper.

what does the both actually refer to?

i'll also check out that firebug, cheers.

Iain