|
CSS - Wrap=soft Doesn't Working In Mozilla......
well, as title.......
I tried put wrap=soft into a textarea like this : Code: <textarea name="textBody" class="textarea" wrap=soft style="width: 455px; height: 250px"></textarea> and the textarea class is like this : Code: .textarea {
border: 1px solid #336699;
color: #336699;
background-color: #CEDBE9;
}
but it doesn't work in Mozilla 1.6...... could anybody help me to find out the solution? Similar TutorialsCSS: Code:
.news {
background-color:#eaeaea;
border: solid 1px #999;
width: 500px;
margin-top: 10px;
}
.news img {
float: left;
padding: 10px 0 10px 10px;
}
.news p {
float: right;
width: 350px;
margin: 0;
padding: 10px 10px 10px 0;
}
HTML: Code: <div class="news"> <img src="http://album-images.lala.com/servlet/ArtWorkServlet/432627039265781052/l" width="120" height="180" /> <p>One of the most impressive flights ever has to be landing at Male airport in the Maldives. As the plane descends, stretching before you is a sea of azure blue reefs and atolls. The engines ease off and the plane gently floats down, almost skimming the water before finally touching down. Male airport sits on it's own private Atoll so transfers to your hotel are either by speedboat or, if you're lucky, by sea plane. Beats descending into Heathrow airport and then fighting your way to the train or bus station any day.</p> </div> Logically, a grey box should wrap around it. Can anyone explain to a CSS newbie why this doesn't work? Hi, I am facing a terrible problem where in the following css code(setting of height) is working for Mozilla 3.0 but is not working for IE 6 in Css .fsSearchIE{ height:5px !important; background: red!important; border: 1em solid green; margin: 0 auto !important; } In html <fieldset class="fsSearchIE" > my code </fieldset> Would be thankful Sandeep I redesigned a site, and it works fine in Explorer (Mac) and Safari but the stylesheet is not loading in Firefox or Camino. I am wondering if anyone could take a quick peek at it to figure out what might be wrong with it?!? The page is at http://aamr.org/Groups/div/RG/ Thanks! ( I guess it is nice to see that the site degrades nicely...) If I have a couple of paragraphs of text and would like to adjust the space when you press return to start a new paragraph, how would I add it to my styles code below. Right now, a hard and soft return is too big and I would like the spacing to be about half the font size of the text. How would I add it to my stylesheet code in this example: Code: .bodytext {
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
color: #000000;
text-decoration: none;
text-align:right;
font-weight: none;
background-color: #ffffff;
line-height:1.5;
letter-spacing:-0.02em;
}
I am new to CSS so bare with me if this is dumb, i have taken my page to the bare minimum trying to diagnose this. Mozilla Firefox does not seem to work with nested divs the way I think it should. IE7 works like a champ. I have a content area (mainpage) with a Vertical Navigation bar nested in it. I would expect the page to have a full background of coatedmetalsm.jpg since the mainpage is set to height: auto; But this only works in IE and Mozilla has no background. Can someone show me the error of my ways? Thanks, Carlos Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Heimburger Construction Company LLC - Links</title>
<link href="custom.css" rel="stylesheet" type="text/css"/>
</head>
<body>
<div id="header"> </div>
<div id="maincontent">
<div id="navbar">
<p>testing</p>
<p>testing</p>
<p>testing</p>
</div>
</div>
</body>
</html>
My CSS Code:
@charset "utf-8";
/* CSS Document */
body {
background-color: #000;
margin-top: 17px;
margin-bottom: 15px;
}
#header {
background-image: url(images/header.jpg);
margin:0 auto;
height: 167px;
width: 810px;
background-repeat: no-repeat;
}
#maincontent {
background-image: url(images/coatedmetalsm.jpg);
background-repeat: repeat;
margin:0 auto;
width: 810px;
height: auto;
}
#navbar {
float: left;
width: auto;
position: relative;
}
I've been searching this for about 4 hours today, and have yet to come across a good answer. Right now my site looks fine in Firefox, IE6, IE7, and Opera. However, it does not validate because I'm using the _margin-top and .margin-top tricks to force the bottom line of links in IE. My site can be viewed at startdesigning.net (not allowed to post link because I new, I guess) and the css in question can be found at startdesigning.net/style.css - again, can't post a link. If anyone has any suggestions to validate without changing the appearance, I would love to hear them. Thanks, Andrea I have designed one page. I am getting correct behavior in IE but there is some problem with Mozilla. Here is the code sample: <DIV class=ColumnHeader><SPAN class=noSort style="WIDTH: 6%; TEXT-ALIGN: center"><input type=checkbox id=chkSelAllAvail value="" name=chkSelAllAvail></SPAN> <SPAN style="WIDTH: 20%">Year</SPAN> <SPAN style="WIDTH:36%">Type of Report</SPAN> <SPAN style="WIDTH:24%">End Date</SPAN></DIV> I have attached both screen shots of IE and Mozilla. Can anyone help me ?? Exactly that question. I got this menu from a website. Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<link rel="stylesheet" media="all" type="text/css" href="http://www.cssplay.co.uk/css/menus.css" />
<title>Godly Menus</title>
<style type="text/css">
#menu {list-style-type:none; padding:0; margin:0; width:150px; z-index:100; float:left; height:360px; background:#000;}
#menu ul {list-style-type:none; padding:0; margin:0;}
#menu li {float:left; background:#fff url(http://www.cssplay.co.uk/menus/slide_fly/slide/slide_0.gif) no-repeat;}
#menu li.sub {background:#fff url(http://www.cssplay.co.uk/menus/slide_fly/slide/slide_0.gif) no-repeat;}
#menu li, #menu li a {display:block; color:#fff; font-family:arial, sans-serif; font-size:11px; line-height:30px; width:150px;
text-decoration:none; cursor:pointer; font-weight:bold; text-align:center;}
#menu table {border-collapse:collapse; padding:0; margin:0 -1px -1px;}
#menu ul,
#menu :hover ul ul,
#menu :hover ul :hover ul ul {position:absolute; left:-9999px; width:150px;}
#menu :hover {color:#ff0; background:#fff url(http://www.cssplay.co.uk/menus/slide_fly/slide/slide_1.gif) no-repeat;
z-index:500; white-space:nowrap;}
#menu :hover > a {color:#ff0; background:#fff url(http://www.cssplay.co.uk/menus/slide_fly/slide/slide_1.gif) no-repeat;
z-index:500; white-space:nowrap;}
#menu :hover ul {position:static; height:180px; margin-top:-1px; background:#383838;}
#menu :hover ul :hover ul,
#menu :hover ul :hover ul :hover ul {display:block; position:absolute; left:130px; top:0; height:auto; z-index:500; border:1px
solid #fff;}
#menu :hover ul li, #menu :hover ul li a {background:#383838; text-align:left; text-indent:10px; }
#menu :hover ul li.fly a {background: #383838 url(http://www.cssplay.co.uk/menus/slide_fly/slide/arrow.gif) no-repeat 120px
center;}
#menu :hover ul :hover {background:#255fa3; position:relative; z-index:100;}
#menu a:hover ul li.fly a:hover {background:#255fa3 url(http://www.cssplay.co.uk/menus/slide_fly/slide/arrow.gif) no-repeat
120px center; color:#ff0;}
#menu :hover ul li.fly:hover > a {background:#255fa3 url(http://www.cssplay.co.uk/menus/slide_fly/slide/arrow.gif) no-repeat
120px center; color:#ff0;}
#menu :hover ul :hover ul li,
#menu :hover ul :hover ul li a
{background:#666;}
#menu :hover ul :hover ul :hover ul li {background:#666; z-index:500;}
#menu :hover ul :hover ul li.fly a {background: #626262 url(http://www.cssplay.co.uk/menus/slide_fly/slide/arrow.gif)
no-repeat 120px center;}
#menu :hover ul :hover ul :hover {z-index:500; background:#0d72c0; color:#ff0;}
#menu a:hover ul a:hover ul li.fly a:hover {background:#0d72c0 url(http://www.cssplay.co.uk/menus/slide_fly/slide/arrow.gif)
no-repeat 120px center; color:#ff0;}
#menu :hover ul :hover ul li.fly:hover > a {background:#0d72c0 url(http://www.cssplay.co.uk/menus/slide_fly/slide/arrow.gif)
no-repeat 120px center; color:#ff0;}
#menu :hover ul :hover ul :hover ul li,
#menu :hover ul :hover ul :hover ul li a {background:#888;}
#menu :hover ul :hover ul :hover ul :hover {background:#5184b8; color:#ff0;}
#menu :hover ul :hover ul :hover ul :hover a {color:#ff0;}
.menu_text {float:left; width:500px; font: 11px verdana, arial, sans-serif; border:1px solid #000; height:358px;}
.menu_text img {display:block;}
.menu_text p {margin:0; padding:5px 10px; line-height:15px;}
</style>
</head>
<body>
<div id="info">
<ul id="menu">
<li><a href="#nogo">Home</a></li>
<li><a href="#nogo">Privacy Policy</a></li>
<li class="sub"><a href="#nogo">Types<!--[if gte IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<ul>
<li><a href="#nogo">European</a></li>
<li><a href="#nogo">Indian</a></li>
<li><a href="#nogo">North Africa</a></li>
<li class="fly"><a href="#nogo">American<!--[if gte IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<ul>
<li><a href="#nogo">South American</a></li>
<li class="fly"><a href="#nogo">North American<!--[if gte IE
7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<ul>
<li><a href="#nogo">Grey tree frog</a></li>
<li><a href="#nogo">Green tree frog</a></li>
<li><a href="#nogo">Spring peeper</a></li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]--></li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]--></li>
<li><a href="#nogo">Japanese</a></li>
<li><a href="#nogo">Chinese</a></li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]--></li>
<li class="sub"><a href="#nogo">Classifications<!--[if gte IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<ul>
<li class="fly"><a href="#nogo">Pelodryadinae<!--[if gte IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<ul>
<li><a href="#nogo">Cyclorana</a></li>
<li><a href="#nogo">Litoria</a></li>
<li><a href="#nogo">Nyctimystes</a></li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]--></li>
<li class="fly"><a href="#nogo7">Phyllomedusinae<!--[if gte IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<ul>
<li><a href="#nogo">Agalychnis</a></li>
<li><a href="#nogo">Cruziohyla</a></li>
<li><a href="#nogo">Hylomantis</a></li>
<li><a href="#nogo">Pachymedusa</a></li>
<li><a href="#nogo">Phasmahyla</a></li>
<li><a href="#nogo">Phrynomedusa</a></li>
<li><a href="#nogo">Phyllomedusa</a></li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]--></li>
<li class="fly"><a href="#nogo">Hemiphractinae<!--[if gte IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<ul>
<li><a href="#nogo">Cryptobatrachus</a></li>
<li><a href="#nogo">Flectonotus</a></li>
<li><a href="#nogo">Gastrotheca</a></li>
<li><a href="#nogo">Hemiphractus</a></li>
<li><a href="#nogo">Stefania</a></li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]--></li>
<li class="fly"><a href="#nogo">Hylinae<!--[if gte IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<ul>
<li><a href="#nogo">Acris</a></li>
<li><a href="#nogo">Anotheca</a></li>
<li><a href="#nogo">Bokermannohyla</a></li>
<li><a href="#nogo">Corythomantis</a></li>
<li><a href="#nogo">Ecnomiohyla</a></li>
<li><a href="#nogo">Hyloscirtus</a></li>
<li><a href="#nogo">Megastomatohyla</a></li>
<li><a href="#nogo">Osteocephalus</a></li>
<li><a href="#nogo">Pseudacris</a></li>
<li><a href="#nogo">Sphaenorhynchus</a></li>
<li><a href="#nogo">Trachycephalus</a></li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]--></li>
<li class="fly"><a href="#nogo9">Rhacophorinae<!--[if gte IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<ul>
<li><a href="#nogo">Boophis</a></li>
<li><a href="#nogo">Callixalus</a></li>
<li><a href="#nogo">Chiromantis</a></li>
<li><a href="#nogo">Cryptothylax</a></li>
<li><a href="#nogo">Mantidactylus</a></li>
<li><a href="#nogo">Rhacophorus</a></li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]--></li>
<li class="fly"><a href="#nogo">Buergeriinae<!--[if gte IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<ul>
<li><a href="#nogo">Buergeria</a></li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]--></li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]--></li>
<li class="sub"><a href="#nogo">References<!--[if gte IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<ul>
<li><a href="http://en.wikipedia.org/wiki/Tree_frog">Wikipedia</a></li>
<li><a href="#nogo11">Encyclopedia</a></li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]--></li>
<li class="sub"><a href="#nogo">Links<!--[if gte IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<ul>
<li><a href="#nogo">Complete treefrog</a></li>
<li><a href="#nogo">Old World treefrogs</a></li>
<li><a href="#nogo">Amphibian Species</a></li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]--></li>
</ul>
<div class="menu_text"><img src="http://www.cssplay.co.uk/menus/slide_fly/slide/frog.jpg" alt="tree frog" title="" />
<p>Tree frogs are frogs of the families Hylidae and Rhacophoridae.</p>
<p>There is large variation among tree frog species. Many species are not actually arboreal (do not live in trees), but
terrestrial or aquatic (live on the ground or in the water).</p>
<p>Many arboreal frogs are green, while terrestrial and aquatic species are duller.</p>
<p>They mostly feed on insects and other invertebrates, but some larger species can feed on small vertebrates. The species
within the genus Cyclorana are burrowing frogs, sometimes spending many years underground.</p>
</div>
</div>
</body>
</html>
Any anyway, if I take out the <link> it dissapears!! The CSS in it has nothing to do with the image. Here is the CSS in the <link> tag. Code: #showcase {background:#6f9c6f;}
dl.menus_list dt {background:#6f9c6f; font-size:1.5em; margin:3px 0;}
#foot {background:#8fbc8f;}
dl.menus_list dd.nil {padding:0; margin:0;}
I hate to say it but I'm baffled! Goal: Get all the CSS into the same file as the rest of my code. Edit: Gah kravvitz I've been watching your move through your profile and you signed off!! Gay. Well I hope someone else here can help me solve this issue I'm having... Hi guys, I normally just look at forums and lurk without joining however I've run into a problem in which case I have to ask. I apologize be for hand if this is in the incorrect place or if it sounds rude (from a person who just joined.) I'm having problems position my menu inside a wrap and to have it fully extend to the end (100%). I'm met with a couple of problems with everything I try. I would post a picture, however It wont let me as I just signed up. If needed I will reply with the link spacing out the url so its accepted, but thats if you require it. Here is the CSS code I use. #menuwrapper { /*holds menu*/ float:left; position:fixed; margin: 0; padding: 0; width: 900px; height: 2em; background-colorink; border: thin solid orange; } #iframe { width:900px; height:500px; border: 1px dashed purple; margin: 0; padding: 0; text-align:center; z-index: 1; } .logo { width:900px; z-index: -1; } /*nav*/ #nav { width: 100%; height:2em; font-size: 14px; color:green; z-index:3; position:absolute; } #nav ul { margin: 0; padding: 0; width:100%; list-style: none; overflow:hidden; } #nav a { text-decoration:none; color:green; } #nav li { position:relative; /*main*/ list-style:none; float:left; width: 8em; height:30px; line-height: 2em; background-color: #e3d0d3; } #nav li:hover { /*hover when mouse goes over - default*/ background-color: #c4c5c7; } #nav li:hover a { /*text hover - col etc*/ display:block; float:left; text-align:center; } #nav li ul { display:none; } #nav li:hover ul{ display:inline; float:left; height:auto; margin:0px; padding:0px; text-align:left; } #nav li:hover ul li { width:100%; height:2em; border:none; border-bottom: 1px dotted black; } Any help on this will be a huge help. Many thanks G. Hey all! I'm having a major word-wrap issue in IE and it's driving me bonkers. I've tried to research it, but couldn't find anything. Most of the problems people have with word-wrap are in FF, but I'm having noooo problems with it FF. I have a left nav for the site I'm building and I'm forcing a word break at 125px. In FF and IE, it forces the word break just fine. However, in IE, it also bumps out the width of the above div tag to what the width would be if the tag wasn't forced to break. It looks like all the div tags are the correct width, but the #col1 td tag won't allow a max-width. That's what I'm thinking anyway. Here's how it is in IE (ignore the borders): http://www.abellefeuille.com/mg/Untitled-3.gif Here's how it's supposed to look (again, ignore the borders): http://www.abellefeuille.com/mg/Untitled-3-FF.gif Here's the code: CSS: Code: #col1{width:148px;
vertical-align:top;
color:#666666;
font-size:12px;
padding-top:20px;
padding-bottom:20px;
}
.view_ln{max-width:125px;color:#333333;font-size:11px;font-weight:bold;padding:2px 0px 2px 0px;}
.view_ln h1{word-wrap:break-word;}
HTML: Code: <td id="col1" style="border:1px solid green;">
<!-- viewing -->
<div id="view" style="border:1px solid blue;">
<div class="ln-title">Viewing</div>
<div id="ln_keyword" class="view_ln">
<span class="line">Activity:</span><br/>
<h1>ppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppa</h1> <a href="" class="x-search">(<span>x</span>)</a>
</div>
<div id="ln_brnd" class="view_ln">
<span class="line">Brand:</span><br/>
<h1>Marmot</h1> <a href="" class="x-search">(<span>x</span>)</a>
</div></td>
Any advice will be most appreciated. THANKS!! i am making a web page using CSS. At the bottom of the page I have a box from left to right with thumbnails in it. I do not want these thumbnails to wrap. I tried whitespace:nowrap, but this makes the page really wide. The box the images are in has AUTO for the width. So if I re-size the window the width of the box re-sizes. when text is displayed in a div.. it only goes 75% of the width of the div and then line breaks. I want it to go 100% of the div and then line break. How do i solve this. Here is the css for the div. Code:
.message {
float:left;
width:98%;
background-color:#EFEFEF;
border: 1px solid black;
padding:4px;
overflow:auto;
margin-left:3px;
min-height:120px;
}
Hi, I have a site which, due to a lot of extraneous code from the CMS, essentially, looks like this: Code: <div id="wrapper"> <div id="header"></div> <div id="left-panel"> [content] </div> <div id="full-panel"> <div class="standard-article"></div> <div id="prices">[table goes here]</div> </div> <div class="clear"></div> </div> Basic CSS: Code: #wrapper {
width: 1007px;
}
#left-panel {
float: left;
width: 216px;
}
#full-panel {
width:735px;
}
The site is designed to be a fixed width of 1007px (and this is set in the CSS in various location: wrapper, header etc). My problem is that, within the 'prices' div, there is a table which can be many columns wide. At the moment, in IE6 (Firefox is fine), the full-panel div wraps down below the left-panel when I would actually prefer it to stretch outwith the boundary of the 1007px wide site. Is this possible? Can anyone assist? Thanks in advance. R I'm creating a textbox that user text will be entered into. It has preset dementions, and I need to be able to scroll down when the text exeeds the height, but I need to be able to force the sides to wrap..... I was using this: <pre style="width:110px; height:130px; overflow:scroll"> but that let's them scroll to the side, too, I want to force a wrap on the sides, but still scroll vertically.... Is there any way to add a link to a wrap image Under Page structure I have made 4 wraps (displaying the relevant one-..image path is made-up) Quote: blah blah... #wrap4 { background:url("http://www.ssswww.com/yyy.gif") no-repeat 95% 0.3%; padding:15px; width:100%; width/* */:/**/auto; width: /**/auto; } #content { max-width:890px; padding:0 30px 50px; ...blah blah And under Body: Quote: <!-- Begin wraps --> <div id="wrap"><div id="wrap2"><div id="wrap3"> <div id="wrap4"> All I want to do is attach a link to the #wrap4 image so that the whole image would be a one giant link. Does anyone know a way how to do it? Thanks! is there another way to make text wrap and not expand the div? i.e a div 200px wide expands if too much text is put in the box. On other websites I have seen this happening and looked at the code but I couldn't see anything I wasn't doing? The only way I can fix it is by adding this to the css: word-wrap: break-word; surely there is another way??? This isn't a problem I just am interested to find out how else you can do it because I can't work out how else you can do it thanks Hi all, Is it possible to wrap text in a Drop Down Box?? Regards, Stephen I'm having a bit of trouble getting multiple <div> to wrap around a floated <div> in IE [tested in IE8]. Using "clear: all;" it looks fine in Chrome and Firefox, but I'd prefer it to validate properly, as well as getting it working in IE! Online example at http://www.afcwgb.co.uk/boxtest.php Any tips gratefully received Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Floating Boxes</title>
<style type="text/css">
body {
margin: 0px;
padding: 0px;
background-color: #C8C8C8;
font-family: Verdana, helvetica, arial, Geneva, sans-serif;
font-size: 11px;
text-align:center;
}
#boxtest_container {
margin-right: auto;
margin-left: auto;
font-family: Verdana, Arial, Helvetica;
font-size: 11px;
background-color: #FFA;
border: 1px solid black;
width: 790px;
padding: 5px;
}
#boxtest_header {
padding: 10px;
border: 1px solid black;
border-bottom: 5px;
}
#boxtest_index {
padding: 10px;
border: 1px solid black;
}
#boxtest_footer {
padding: 10px;
border: 1px solid black;
}
#boxtest_rightbox {
width: 225px;
border: 1px solid black;
background-color: #00ff00;
float: right;
padding: 5px;
margin-left: 5px;
margin-bottom: 5px;
display: block;
}
.boxtest_post {
border: 1px solid black;
clear: all;
overflow: hidden;
margin-bottom: 5px;
}
#boxtest_mainbox {
padding: 10px 10px 10px 10px;
}
</style>
</head>
<body>
<div id="boxtest_container">
<div id="boxtest_header">Header</div>
<div id="boxtest_index">Index</div>
<div id="boxtest_mainbox">
<div id="boxtest_rightbox">
<div align="center">Rightbox</div>
<p>This box is "floated" to the right of the page.</p>
</div>
<div id="boxtest_leftbox">
<div class="boxtest_post">Text</div>
<div class="boxtest_post">Text</div>
<div class="boxtest_post">Text</div>
<div class="boxtest_post">Text</div>
<div class="boxtest_post">Text</div>
<div class="boxtest_post">Text</div>
<div class="boxtest_post">Text</div>
<div class="boxtest_post">Text</div>
<div class="boxtest_post">Text</div>
<div class="boxtest_post">Text</div>
<div class="boxtest_post">Text</div>
<div class="boxtest_post">Text</div>
<div class="boxtest_post">Text</div>
</div>
</div>
<div id="boxtest_footer">
<a href="http://validator.w3.org/check?uri=referer"><img style="border:0;width:88px;height:31px" src="http://www.w3.org/Icons/valid-xhtml10.gif" alt="Valid XHTML 1.0 Transitional" height="31" width="88" /></a> - <a href="http://jigsaw.w3.org/css-validator/check/referer"><img style="border:0;width:88px;height:31px" src="http://jigsaw.w3.org/css-validator/images/vcss" alt="Valid CSS!" /></a>
</div>
</div>
</body>
</html>
i am making this page... T10L New and on the page, i am trying to float the right column on the right... like it is.. but problem is, when the text on the left continues past the right column, it isnt wrapping... like on this page... T10L Old i know it is because i have a width set on the "maincontainer" div... which is the left side, but if i dont do this, the right div will just be pushed to the bottom... any help or suggestions would be great... Currently I have this: <div style="padding:5px; overflow:auto; border:1px solid #c0c0c0; font-size:13px; background: #EEE;"> mmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmm dddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddd </div> I want to make it so that it will always stay on 1 line, and a horizontal scroll bar will appear if the window gets too narrow. How can I do this? edit: I can't use <pre> tags because the destroy the formatting in a more annoying way. |
|||||||