PDA

Click to See Complete Forum and Search --> : Other CSS guru's - help!

LittleBlu
07-10-2007, 03:53 AM
I am working on my new portfolio site - happily using CSS/HTML and iframes. For some reason I am not able to fix this issue in my code:

There is a <DIV> called #aboutcontents that holds two .column <DIV>s (with a bit of frusterated asdf text in them). The two columns aren't wrapping the text inside of them. I have tried everything I can think of to get the text to wrap inside of the column - usually a perfect validation is good news!

If anyone would like to take a look and challenge this, I would very much appreciate it =) PS: sorry that the formatting is lost!

Code---------------------

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html>

<head>
<link rel="stylesheet" type="text/css" href="template.css" />

<title>.......</title>

<style type="text/css">

.thumbs {
float: left;
width: 50px;
height: 50px;
margin: 5px 10px 10px 0px;
border: 1px solid gray;
}


#holdem {
float: left;
width: 250px;
height: 100%;
border: 1px solid green;
}

#aboutcontents {
float: center;
text-align: left;
margin-left: 260px; margin-top: -50px;
padding-left: 30px; padding-top: 50px;
width: 500px;
height: 300px;
border-left: 1px solid gray;
}

#aboutcontents .column { /* ISSUE */
float: left;
margin-right: 20px;
border: 0;
padding: 0;
width: 200px;
height: 300px;
text-align: left;
border: 1px solid red;
}

.clear {
clear: left;
}


</style>

<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />

</head>

<body>

<div id="pagecontainer">
<center><!-- Internet Explorer 5 centre fix -->
<div id="maincontainer">
<div id="topbanner">

<div id="topnav">
<ul>
<li><a href="index">Home</a>&nbsp; &bull;</li>
<li><a href="design-services.html">Design Services</a>&nbsp; &bull;</li>
<li><a href="portfolio.html">Portfolio</a>&nbsp; &bull;</li>
<li><a href="about.html">About</a>&nbsp; &bull;</li>
<li><a href="contact.html">Contact</a>&nbsp; &bull;</li>
<li><a href="articles.html">Articles</a></li>
</ul>
</div><!--topnav-->

</div><!--Top Banner-->





<div id="content">
<!--Web-->
<div id="holdem">
<div class="thumbs"><a href="about01.html" target="acontent"><img src="images/about/thumb-about01.jpg" alt="JDigital picture number 1" /></a></div>
<div class="thumbs"><a href="about02.html" target="acontent"><img src="images/about/thumb-about02.jpg" alt="JDigital picture number 2" /></a></div>
<div class="thumbs"><a href="about03.html" target="acontent"><img src="images/about/thumb-about03.jpg" alt="JDigital picture number 3" /></a></div>
<div class="thumbs"><a href="about04.html" target="acontent"><img src="images/about/thumb-about04.jpg" alt="JDigital picture number 4" /></a></div>
<iframe src="about01.html" name="acontent" width="237px" height="185px" frameborder="0"> </iframe>
</div><!--holdem-->

<div id="aboutcontents">
<!--ISSUE--> <div class="column">asdfljjkfdljlksaklfjklsdfjlaksdjlaksj;l;askjfkldsa a;slkdfkfjdlaslskdjfjkfdla</div>
<!--ISSUE--> <div class="column">asdflkajsdflkasdffdasasfdjasasdffsdsffddsffsssdfdf sfdsdlkjf</div>
</div><!--aboutcontents-->
</div><!--Content-->




</div><!--Main Container-->


</center></div><!--Page Container-->
</body>
</html>
Two-Toe Tom
07-10-2007, 04:16 AM
i'm not sure what you mean by not wrapping the text inside the column.
LittleBlu
07-10-2007, 04:23 AM
In the DIVs below, the text meant to stay within the .column containers to form two perfect columns. In FireFox & Safari, at least, the text is left-aligned and floating outside of these columns on the right side of the container (ie: first column text is running over its right border and onto the second column).

Does this make sense? eep.

<div id="aboutcontents">
<!--ISSUE--> <div class="column">asdfljjkfdljlksaklfjklsdfjlaksdjlak sj;l;askjfkldsaa;slkdfkfjdlaslskdjfjkfdla</div>
<!--ISSUE--> <div class="column">asdflkajsdflkasdffdasasfdjasasdffsd sffddsffsssdfdfsfdsdlkjf</div>
</div><!--aboutcontents-->
Two-Toe Tom
07-10-2007, 04:25 AM
it's all screwy on mine cuz i don't have the images. is it because the word is too long? try putting in some spaces.
LittleBlu
07-10-2007, 04:38 AM
lol, that is embarassing. Thank-you! I'm so anxious to get this site up and say goodbye to flash.

Here is an idea of what the site looks like with images:

http://www.jdigital.ca/test/about.html
Two-Toe Tom
07-10-2007, 04:43 AM
looks like its coming along nicely :)

IE gives a scrollbar around the big picture (the one underneath the four small ones).
LittleBlu
07-10-2007, 04:51 AM
=) simplicity is beauty some say.

Thanks for the tip. Hopefully it's fixed. My PC refuses to run IE. It has inhereted my thoughts of microsoft maybe.
Two-Toe Tom
07-10-2007, 01:30 PM
its still showing the scrollbars for me. here's what it looks like:

http://img264.imageshack.us/img264/5066/tempqp3.jpg

and here's a link talking about how to get around it:

http://www.ahfb2000.com/webmaster_help_desk/showthread.php?threadid=3114
LittleBlu
07-10-2007, 07:34 PM
ok, gotcha, thanks. scrolling="auto" seems like the best solution, but if there is anything to scroll, it would only be 1-5 pixels overflow. I set it to "no".

*silent wish that someone would re-invent the scrollbar to not be so bloody large*

http://www.jdigital.ca/test/about.html

Hopefully this site will be finished to launch tonight. So much more illi work to do!