CSS - No Wrap Images

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

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!

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

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

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;


}

Thanks for taking the time to read my quesiton.

I have an image, that if I use float: I can get the text to wrap around the image, but if I try to position the image and get the text to wrap, it doesn't. The text just shows up underneath the image.

Instead of using float, I've tried display: block; but that didn't help.

What do I need to change so that I can get the text to wrap around the image?

Thanks,

Brad

Image is in textbox1

CSS:
Code:

.textbox1 {
height: 180px;
width: 280px;
font-size: 20px;
padding: 3px;
position: absolute;
top: 55px;
left: 15%;
border-style: solid;
border-color: red;
border-width: 2px;
/*display: block;
float: left;*/
}

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>

Hi there!

Okay, I'm working on some CSS for a page that is heavily javascript-based, it's a simple search-utility I'm fooling around with for university coursework and simply loads some amazon results, and finds related eBay results for each one.

You can find the tool here (ignore any certificate warnings, I wouldn't recommend firing your credit-card details onto my site anyway =):
https://devweb2008.cis.strath.ac.uk/~isimms/MashUp/

It currently only works properly in FireFox 3 or Safari 4 (preferred), and kind of in Google Chrome. I don't care much about this just now so use one of the first-two if you do visit the page!

Now, once you enter a search (my typical one is "USB"), you'll get a list, on the left is the amazon image, and to the right of that is a "loading" div which will expand with some eBay results. Now, the problem I'm having is that if you shrink the window (or later on if more results are added) then the eBay box will wrap so that it is underneath the amazon image, before the results within the ebay box start wrapping. What I would like to do instead is have the eBay results wrap within their box, so the box stays to the right of the amazon image, while stretching downwards as required.

I can't think of any way to do this though without specifying a width which of course isn't something I want to do as the amazon image is a fixed size (otherwise it won't remain square), while the rest of the page is variable-width.

Anyone know what I'm getting at here and have any ideas how this could be done?

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.

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>

Hi everyone.

I have a div with text and directly after that I have an image. Since a DIV is a block level element, it causes the image to wrap to the next line. Is there some way I can prevent it from doing so?

Thanks for any help or suggestions.

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

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

I am working on this site design for a client:

http://universalcorner.com/testsite/

In the center of the site, there is a text box with a dark blue square-shaped div inside of in it, positioned in the bottom right corner.

CSS:
Code:

#textbox {
	width: 636px;
	height: 292px;
	float: left;
	display: block;
	border: solid #000027;
	border-width: 0 12px 12px 0;
	background: #C1BDFF;
	margin: 0;
	padding: 0;
}

#textbox p {
	margin: 10px;
}

div.cube {
	width: 150px;
	height: 140px;
	border: solid #000027;
	margin: 0;
	padding: 0;
}

HTML:
Code:

<div id="textbox">
		
		<div style="background: #002455; float:right; border-width: 12px 0 0 12px; margin-top: 140px; margin-left: 10px" class="cube"></div>
		
		<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi sapien urna, scelerisque nec, imperdiet vitae, luctus non, nisi. Duis et magna et tellus imperdiet tempor. Sed ipsum.</p>
		<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi sapien urna, scelerisque nec, imperdiet vitae, luctus non, nisi. Duis et magna et tellus imperdiet tempor. Sed ipsum.</p>
		<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi sapien urna, scelerisque nec, imperdiet vitae, luctus non, nisi. Duis et magna et tellus imperdiet tempor. Sed ipsum.</p>
	
</div>

The client would like the text in this box to wrap around the top of the dark blue square-shaped div, filling in the empty space above it. My current code has the square div positioned correctly, but because of the margin-top, it only wraps around the left side of the div, leaving the space above it blank.

I also tried setting the square div's position to relative and top: 140px. This positioned the div correctly, but it overlapped the text rather than letting it wrap. Still had the blank space above it, too.

Is there a way to achieve what the client wants?