Forum Moderators: not2easy
The best way to know what I mean is to paste this code and run it in Firefox and then IE.
IE for once works as I would like and as I expect.
There is a left and right side border.
In FF there is no side border. Does anyone know how to solve this problem?
Here is the exact code needed to duplicate the problem:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head><title></title>
<style type="text/css">
.content {
margin-left: 200px;
width: 700px;
border-left-style: solid;
border-left-width: 1px;
border-right-style: solid;
border-right-width: 1px;
}
.side {
width: 200px;
float: left;
}
.cbody {
width: 400px;
float: left;
}
</style>
</head>
<body>
<div class="content">
<div class="side">
some option<br>
other option<br>
some option<br>
other option<br>some option<br>
other option<br>some option<br>
other option<br>some option<br>
other option<br>some option<br>
other option<br>some option<br>
other option<br>some option<br>
other option<br>some option<br>
other option<br>some option<br>
other option<br>some option<br>
</div>
<div class="cbody">
<p>hjellskljdf;sad
<p>asdf;ljkasd;lfk
<p>hjellskljdf;sad
<p>asdf;ljkasd;lfk<p>hjellskljdf;sad
<p>asdf;ljkasd;lfk<p>hjellskljdf;sad
<p>asdf;ljkasd;lfk<p>hjellskljdf;sad
</div>
</div>
</body>
</html>
Many thanks!
I've also made a few improvements which you may or may not like but let me list them off for you...
Your sidebar appears on the left, but the content (with it's associated headers) are closer towards the top of the page. Remember to user header one only once per page and to use your other headers in the same nested logic as if you were using b, u, and i elements in valid code. Anyway this setup is great for SEO as you want your page's main content as close to the top as possible.
I changed the classes to ids. I also made them slightly more logical. The whole page isn't the content, just where the main article is right? So the real body is the entire page so I switched what I think you had as content (for the body) and body (as you had for the content). If you keep your outer most div as body when you talk about the code it should make more sense referencing stuff.
Here is the magical code. :)
- John
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title></title>
<style type="text/css">
#body {
background: #abc;
border: #000 solid;
border-width: 0px 1px 0px 1px;
margin: 0px auto 0px auto;
width: 700px;
}
#content {
background: #def;
float: right;
width: 498px;
}
#side {
background: #9af;
float: left;
width: 200px;
}
</style>
</head><body>
<div id="body">
<div id="content">
<h1>Header One</h1>
<p>content area here</p>
<p>content area here</p>
<p>content area here</p>
<h2>Header Two</h2>
<p>content area here</p>
<p>content area here</p>
</div><!-- END CONTENT --><div id="side">
<p>side area here</p>
<p>side area here</p></div><!-- END SIDE -->
</div><!-- END BODY -->
</body>
</html>
I like it!
Thank you very much!
Ingenious
