I've come across quite an annoying problem while restyling my forum. It's fairly straightforward -- I'm using only basic HTML and CSS (none of this table tripe, because I've never seen a forum do it without tables), but text is wrapping and I can't seem to fix it. Here's all the relevant code:
<style type="text/css">
div.authorcol {
float: left;
padding: 5px;
margin: 25px 5px 5px 5px;
width: 120px;
text-align: right;
border-right: 1px solid #DDD;
font-family: Verdana, Arial, sans-serif;
font-size: 8pt;
voice-family: "\"}\"";
voice-family: inherit;
width: 110px;
}
div.post {
padding: 5px;
margin: 25px 5px 5px 5px;
text-align: left;
font-family: Verdana, Arial, sans-serif;
font-size: 10pt;
}
</style>
<div class="authorcol">
<a href="#" class="name">grrowl</a><br />
bite me.<br />
<img width="100" height="100" /><br /><br />
posts: 100<br />
since: Aug 5 '04
</div>
<div class="post">
<b>What do philosophy majors do?</b><br />
Posting in OI to avoid "smoke pot" and "nothing" answers.<br /><br />
In the quest for what I want to do in college (and subsequently, in life), I have sort of started considering philosophy. I never really realized it, but it was something I always loved, but never really had a chance to learn or practice because my school didn't offer it (I had the opportunity senior year, and signed up, but it didn't work with my schedule).<br /><br />
So basically, if anybody knows, what does a philosophy major do for a living? I hope they aren't all authors or something.<br /><br />
</div>
the post is just some random one off a firefox window that was open at the time.
heres how it turns out:
[lvlshot]http://chillidonut.com/junk/htmlcss1.jpg[/lvlshot]
anyone be able to offer any random insight? thanks.
height won't work consistently unless it's been set for the parent element as well (i think).
there are a lot of ways you could do it, but sticking one div inside the other is going to be the easiest place to start. this is 1 min's work, so it will be buggy/unreliable..
<style type="text/css">
div.post {
padding: 5px;
margin: 25px 5px 5px 5px;
text-align: left;
font-family: Verdana, Arial, sans-serif;
font-size: 10pt;
}
div.postcol {
padding: 5px;
text-align: left;
margin-left:121px;
}
div.authorcol {
float: left;
width: 120px;
text-align: right;
border-right: 1px solid #DDD;
font-size: 8pt;
voice-family: "\"}\"";
voice-family: inherit;
width: 110px;
}
</style>
<meta name="author" content="?">
<meta name="keywords" content="?">
<meta name="description" content="?">
</head>
<body>
<div class="post">
<div class="authorcol">
<a href="#" class="name">grrowl</a><br />
bite me.<br />
<img width="100" height="100" /><br /><br />
posts: 100<br />
since: Aug 5 '04
</div>
<div class="postcol">
<b>What do philosophy majors do?</b><br />
Posting in OI to avoid "smoke pot" and "nothing" answers.<br /><br />
In the quest for what I want to do in college (and subsequently, in life), I have sort of started considering philosophy. I never really realized it, but it was something I always loved, but never really had a chance to learn or practice because my school didn't offer it (I had the opportunity senior year, and signed up, but it didn't work with my schedule).<br /><br />
So basically, if anybody knows, what does a philosophy major do for a living? I hope they aren't all authors or something.<br /><br />
<b>What do philosophy majors do?</b><br />
Posting in OI to avoid "smoke pot" and "nothing" answers.<br /><br />
In the quest for what I want to do in college (and subsequently, in life), I have sort of started considering philosophy. I never really realized it, but it was something I always loved, but never really had a chance to learn or practice because my school didn't offer it (I had the opportunity senior year, and signed up, but it didn't work with my schedule).<br /><br />
So basically, if anybody knows, what does a philosophy major do for a living? I hope they aren't all authors or something.<br /><br />
</div>
</div>
height: 100%; doesn't affect the height of authorcol
authorcol isn't inside post in the html, putting it inside div.post doesn't fix the issue (even when coupling this with height:100%; )
don't really want to give the divs percentage widths, because i want the authorcol to be a fixed width, and the post to be that other width (so it incorporates with the rest of my design fluidly)
setting div.post to float toward the right would mean on short posts it aligns to the right, which is very much against what i want. floating it to the left means authorcol and the post appear underneath eachother.
