CSS - Div Wrap Problem

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

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

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!

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

Hello!

I have a little bit of a problem. I'm trying to create a drop down with a fixed width, but have the options be a flexible width (in other words, it flexes with the content. It works just fine in Firefox and Chrome, but surprise, surprise, IE cuts it off. Is there anyway to trigger word break or something in IE? I tried a line break and that didn't work either.

Thanks for any input!

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

Is there a way to have texts wrap an image? For example, I want to have a small image 120x146 jpeg image aling top left on the page. I then want the texts to start from the top next to the image on the right side of the image just like in MS Word. Is this possible?

ljCharlie

Hi all,

Is it possible to wrap text in a Drop Down Box??

Regards,

Stephen

Ok, I thought this would be simple, but I was wrong. I have a simple <textarea>. In this textarea, I do not want to have the text wrap at the edge of the text box. Seems simple. Well, here's where the monkey **** starts to fly. It turns out that the w3c has deprecated the "wrap" attribute in XHTML 1.0 (which is the standard I use). Ok, there should be a CSS property to take care of this then, right? Wrong, as far as I can find anyway. I have found the white-space property and this sort of works in IE (but no horizontal scroll bar) and not at all in Firefox. Is there anything that I have missed that actually works correctly in multiple browsers, besides the "wrap" attribute (which, incidentally, works perfectly in both browsers)?

My advice to me is to start drinking heavily. cadrunk:

I am trying to build a site with centered content that resizes with the browser window. Click here to see a test page of what I am doing.

Notice that this looks and functions beautifully in firefox/Opera. Notice that it functions semi-beautifully in IE. The fact that it even works in IE at all is a miracle because when I was searching for an answer to my problem I stumbled upon this:
PHP Code:
 width:expression(document.body.clientWidth > 800? "800px": "auto" ); 




which allowed me to specify the max-width for my content.

Now what I would like to happen is when the browser window is resized, I would like the text to wrap to fit the window within the center content div. To see what I mean, view the page in firefox and narrow the width of your browser window and then try the same thing in IE.

Is there a way to make IE behave like firefox?

Here is my markup:
PHP 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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Nova Electronics Dat, Inc.</title>
<link rel="stylesheet" type="text/css" href="styles/main_style.css" />
<link rel="stylesheet" type="text/css" href="styles/drop_down.css" />
<script type="text/javascript" src="scripts/javascript.js"></script>
</head>

<body>
    <div id="drop_down">
        <ul id="nav">
            <li id="first">
                <div><a href="">Link</a></div>
                    <ul>
                    <li><a href="">Link 1</a></li>
                    <li><a href="">Link 2</a></li>
                    <li><a href="">Link 3</a></li>
                    <li><a href="">Link 4</a></li>
                </ul>
            </li>
            <li>
                <div><a href="">Link</a></div>
                <ul>
                    <li><a href="">Link 1</a></li>
                    <li><a href="">Link 2</a></li>
                    <li><a href="">Link 3</a></li>
                    <li><a href="">Link 4</a></li>
                </ul>
            </li>
            <li>
                <div><a href="">Link</a></div>
                <ul>
                    <li><a href="">Link 1</a></li>
                    <li><a href="">Link 2</a></li>
                    <li><a href="">Link 3</a></li>
                    <li><a href="">Link 4</a></li>
                </ul>
            </li>
            <li>
                <div><a href="">Link</a></div>
                <ul>
                    <li><a href="">Link 1</a></li>
                    <li><a href="">Link 2</a></li>
                    <li><a href="">Link 3</a></li>
                    <li><a href="">Link 4</a></li>
                </ul>
            </li>
            <li id="last">
                <div><a href="">Link</a></div>
                <ul>
                    <li><a href="">Link 1</a></li>
                    <li><a href="">Link 2</a></li>
                    <li><a href="">Link 3</a></li>
                    <li><a href="">Link 4</a></li>
                </ul>
            </li>
        </ul>
    </div>    
<div id="content">
    blah blah blah blah
        blah blah blah blah
</div>

</body>
</html> 





and the relevant CSS (i left out the suckerfish menu CSS):
PHP Code:
 body {
 font-family: Arial, Helvetica, sans-serif;
 font-size: 12px;
 background: white url(images/ddbg3.gif) no-repeat 6000px 6000px;
 padding-top: 20px;
 margin: 0;
 color: #FFFFFF;
}

#content {
 max-width: 800px;
 background-color:#0099BB;
 border: 6px double #999999;
 padding: 0 1em;
 voice-family: "\"}\""; 
 voice-family:inherit;
 margin: auto;
 width:expression(document.body.clientWidth > 800? "800px": "auto" );
}

html > body #content{max-width: 800px;} 

Hi all,

How do you wrap text in a div from the x-coordinate but the y-coordinate must have a scroll bar.


CSS Code:
Original - CSS Code .leftHand { height:300px; overflow-y:scroll; position:relative; width:550px; background-color:#F7FAFC; word-wrap:break-word; display: block; }

  

  


 .leftHand


     {


         height:300px;


         overflow-y:scroll;


         position:relative;


         width:550px;


         background-color:#F7FAFC;


         word-wrap:break-word;


         display: block;


  


     } 

HTML Code:
Original - HTML Code <div class="leftHand" id="leftHand"> </div>

  

<div class="leftHand" id="leftHand">
</div>

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.

Can someone help me with this please...I've been attepting to beat this for several days, without success (although I've learned alot).

My goal is displaying images, while using the browser to automatically wrap the images, so the user doesn't have to pre-define rows/cols.

Currently, I just use HTML and stick a bunch of IMG elements one after the other. I would like to start using CSS to create border(s) and [optionally] image info.

The page is laid out such that I have a DIV element containing all the images. Inside that DIV, I want each row vertically aligned, and horizontally centered (in the DIV), again, with the browser auto-wrapping the "list" of images at the width of the containing DIV.

Although I've tried dozens (or more) combinations, I have been consistently testing with an IMG, surrounded by a DIV to create one border, surrounded by another DIV to create another border. In between the DIVs, I may add text info about the image. I originally started with a single DIV, and defined the IMG with a class that added a border. I switched to the two DIVs, to make it easier to test combinations. If the DIV holding the IMG has it's "display" set to "inline", I think that it would be the same as having an IMG with a class, anyway.

It seems that I can get close to the alignment (both vertical and horizontal) I'm looking for, if I make the DIVs "Display: Inline", and do not float them; and set the IMG to "Vertical Align: middle". This creates various problems in different browsers. So I doubt this is the right way.

If I float the DIVs left, everything about each image looks correct, but I can't get the vertical alignment nor the horizontal centering. Another side-effect that I don't like is that if an IMG is moved to the next line, it may not get floated all the way to the left if a previous IMG on the same row was taller (ie. sticks down further in the row). I think this is because of the rule that says floats should go the top as much as possible, so rather than the wrapped IMG going down a few extra pixels and then going all the way to the left, it stops at the IMG from the prvious row that sticks down the most.

I think I've stated clearly what I'm trying to do, I'll include some sample code to help clarify further.

Any help or suggestions is very much appreciated.

-Jeff

Code:

...
<style type="text/css" media="screen"><!--
.pagebox { margin: 12px; padding: 12px; }
.picborder2 { background-color: silver; float: left; margin: 12px; padding: 12px; border: solid thick purple; display: inline; }
.picborder1 { background-color: red; float: left; margin: 12px; padding: 12px; border: solid thick teal; display: inline; }
--></style>
...
<body>
<div class=pagebox>
        <div class=picborder2>
                <div class=picborder1>
                        <img src="thumbnail_01"/>
                </div>
        </div>
        <div class=picborder2>
                <div class=picborder1>
                        <img src="thumbnail_02"/>
                </div>
        </div>
        ...
        <div class=picborder2>
                <div class=picborder1>
                        <img src="thumbnail_NN"/>
                </div>
        </div>
</div>
</body>       
...