Forum Moderators: not2easy
There is a border-bottom for .title, but adding it breaks the layout in the good browsers. (Looks fine in IE.)
What am I failing to understand?
<html>
<head>
<style>
html, body {
margin: 0; padding: 0; font-size: 100%;
}
body {
background-color: #f4f4ff; font: 500 1.2em tahoma, verdana, sans-serif;
}
#wrapper {
width: 60%; background-color: #fff; border-left: .1em solid #ccd;
border-right: .1em solid #ccd; border-bottom: .6em double #ccd; position: absolute; top: 0; left: 20%;
}
#header {
border-bottom: .1em solid #ccd; background-color: #ccd; height: 7em; color: #006;
}
#content {
}
#menu {
float: left; width: 15%; margin: .1em 2% 0 .2em;
}
#content a {
color: #006;
}
#content a:hover {
color: #99c;
}
a.menu {
text-decoration: none; display: block; color: #99c; line-height: 1.2em;
border-bottom: .15em solid #fafafc;
}
a.menu:hover {
background: #f4f4ff; border-bottom: .15em solid #ccd; color: #ccd;
}
a.menu:visited {
color: #88a;
}
.hide {
display: none
}
.title {
font-size: 1.5em; border-bottom: .2em double #ccd; margin-bottom: .6em; width: 60%; color: #006;
}
.subtitle {
font-size: 1.3em; color: #aad;
}
</style>
</head>
<body>
<div id="wrapper">
<div id="header">
LOGO
</div>
<div id="menu">
<a class="menu" href="">link list
</a>
<span class="hide">¦</span>
<a class="menu" href="xx">link list
</a>
<span class="hide">¦</span>
<a class="menu" href="xx">link list
</a>
<span class="hide">¦</span>
<a class="menu" href="xx">link list
</a>
<span class="hide">¦</span>
<a class="menu" href="xx">link list
</a>
<span class="hide">¦</span>
<a class="menu" href="xx">link list
</a>
<span class="hide">¦</span>
<a class="menu" href="xx">link list
</a>
<span class="hide">¦</span>
<a class="menu" href="xx">link list
</a>
<span class="hide">¦</span>
<a class="menu" href="xx">link list
</a>
<span class="hide">¦</span>
</div>
<div id="content">
<div class="title">
title
</div>
<div class="subtitle">
subtitle
</div>
<p>
This is the content. <a href="xx">This is a link</a>. This is yet more content to pad out this box to make it
more believeable. This is yet more content.
</p>
<div class="subtitle">
subtitle
</div>
<p>
This is the content. <a href="xx">This is a link</a>. This is yet more content to pad out this box to make it
more believeable. This is yet more content.
</p>
</div>
</body>
</html>
For debugging, I would add the following rule to the stylesheet:
div {border:1px solid red!important;}and then add
background:#ff0;margin-left:15%;
Why does the text go exactly where I want it, yet borders run under the float? The menu is {float-left}. Shouldn't .content and .title, including their borders, be beside it? I could {float: right;} .content and give it a width, but it doesn't seem like I should have to.
[edit] Hmmm. Dr. Doc would probably soon be sending me here: Floats 9.5 [w3.org] [/edit]
The only thing that should actually "move" is the "anonymous" line box and this is what you're seeing.
The margin is the way I would get the effect I wanted too ;)
Suzy
and yes I had that link in this post, but I removed it! hehe...
