CSS - Making Div Not Cause Sibling To Wrap

Well I managed to find a partial solution by adding "clear" to the "statusDiv" like so:

Code:

.statusDiv {
	clear: both
	background-image: url(../png/disclosure_triangles/blue_block.png);
	height: 20px;
	margin-bottom: 1px;
	}

This kicks sibling divs onto their own line (which is what I wanted) but the spacing between divs is 2 pixels and I can't seem to find any combination of padding, margins etc to get the spacing down to one pixel.

Does anyone know of a way to control the inter-div spacing when "clear" is defined?

Thanks

Ken


---------------------------------------------------------------
Original post
---------------------------------------------------------------
I'm trying to make a few divs to create the same basic functionality as an outline (with disclosure triangles etc...) and am having alignment problems.

The first row renders perfectly but the text of subsequent rows overlaps the text of first row.

Here's the html:
Code:

<div id="contentBlock" class="bodyText">
	<div class='statusDiv'>
		<div class='disclosureCollapsed'></div>
		<div class="disclosureDivLabel">New</div>
	</div>
	<div class='statusDiv'>
		<div class='disclosureCollapsed'></div>
		<div class="disclosureDivLabel">Open</div>
	</div>
</div>

And here's the CSS:
Code:

#contentBlock {
	position: absolute;
	top: 130px;
	left: 200px;
	height: 101%;   /* Hack to force vertical scroll bars */
	right: 280px;
	min-width: 400px;
	visibility: visible;
	display: block;
	}

.statusDiv {
	clear: both
	background-image: url(../png/disclosure_triangles/blue_block.png);
	height: 20px;
	margin-bottom: 1px;
	}

.disclosureCollapsed {
	background-image: url(../png/disclosure_triangles/blue_collapsed_wide.png);
	display: block;
	text-align: right;
	/*position: absolute;*/
	float: left;
	top: 0px;
	left: 0px;
	width: 18px;
	height: 20px;
	}

.disclosureCollapsed:hover {
	cursor: pointer;
	}

How would I make the text in each subsequent row (statusDiv) line up?

Thanks for any help

Ken

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.

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!

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;


}

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

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

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>

Greetings,

How do you make a paragraph wrap around an image that is floated to the right or left?

And what I mean here is not placing the image in a specific place in the middle of the paragraph code and then floating it, but wrapping text that comes from a tag like <p>$paragraphContent$</p> around an image that is floated left or right. Like basically, you don't know what exactly the text of the paragraph is, but whatever the text will be like, you want it wrapped around the image, and the image to be nicely placed in the middle of that paragraph.

And can you do this with a number of paragraphs inserted in a <div> tag for instance? I mean just one image for all those paragraphs, to be placed neatly in the middle?

Thanks for anyone taking the time to help and give tips.

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.

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

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!