Quake3World

Posted: **Wed Aug 17, 2005 12:27 pm**

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:

Code: Select all

<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.

Posted: **Wed Aug 17, 2005 12:43 pm**

div.authorcol floats inside the div.post, that's why the text wraps around it.

make the div.post float too, alternatively give the divs percentage widths instead (authorcol width:20% and post width:80%

or give authorcol height:100%

Posted: **Wed Aug 17, 2005 12:46 pm**

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..

Code: Select all

<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>

Posted: **Wed Aug 17, 2005 12:48 pm**

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.

Posted: **Wed Aug 17, 2005 12:56 pm**

thanks 4days, i see what you've done there, now just fudging it around to make it fit.

Posted: **Wed Aug 17, 2005 1:01 pm**

thanks 4days, your suggestion worked well, although i simplified it. simply changed div.post to:

Code: Select all

div.post {
  padding: 5px;
  margin: 25px 5px 5px 125px;
  text-align: left;
  font-family: Verdana, Arial, sans-serif;
  font-size: 10pt;
}

adding the 125 to the right margin fixes it, and it does what i'd like.

thanks 4days and grudge for your suggestions and help

Posted: **Wed Aug 17, 2005 1:04 pm**

well, that way you kinda set authorcol to a fixed width indirectly

Quake3World

HTML and CSS gurus

HTML and CSS gurus