|
CSS - Help With Text Wrapping In Box
I have a box that I use for a container and then another box inside of that set to a width. When I put text into the inner box the text seems to go beyond what it should. Can anybody tell me what might be wrong with it. Code is as follows----\
Code:
.content_contain {/* This is the main container for the content, its width run 100% of the wrapper */
height: 575px;/* Gives it a height so that when the main_content block is empty it still holds a size. */
width:100%;
z-index:0;
}
.main_content {/* This is the main content, this will hold the left menu and right content */
height:100%;/* Height is set to 100% so that it will grow when the text goes beyound 550px of the main container */
width:750px;
margin:0px auto;
text-align:left;/* Have to use text-align:left becuase of the body text-align:center hack for IE */
position:relative;
background:white;
border:1px solid white;
z-index:5;
}
Thanks for any help that you guys can come up with... Stephen Similar TutorialsHi, I have a problem that I'm trying to figure out. If I have a div such as the following: PHP Code: #Div1 { background: url(title.gif) no-repeat; position: absolute; top: 30px; left: 30px; width: 387px; height: 55px; .. which I want to be able to use absolute positioning to place within my page. My question is, is there a way to make it so that text will wrap around it (such as a regular aligned image) instead of the text appearing underneath it? I'm having trouble getting text to wrap within a DIV. In my purposely garish sample code below, what I want is for the image and the paragraph to appear side by side within the red DIV, with the paragraph wrapping onto multiple lines as necessary. What happens instead is that if the paragraph is too long to fit on one line beside the image, the blue DIV moves underneath the red one and the text remains on one line. Not what I want at all! 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>
<style type="text/css">
p {
margin: 0 0;
color: white;
}
#title {
background-color: red;
height: 105px;
}
#left {
float: left;
margin: 20px 20px;
background-color: yellow;
}
#right {
float: right;
margin: 20px 20px;
background-color: blue;
overflow: hidden;
}
</style>
</head><body>
<div id="title">
<div id="left">
<a href="index.htm"><img src="http://i52.tinypic.com/2u9l5z9.png" alt="" width="429px" height="65px" border="0" /></a>
</div>
<div id="right">
<p>The quick brown fox jumped over the lazy dog. The quick brown fox jumped over the lazy dog. The quick brown fox jumped over the lazy dog. The quick brown fox jumped over the lazy dog.</p>
</div>
</div>
</body></html>
If you shorten the paragraph you can see where I want the text to be displayed. It's only when it exceeds the available width within the red DIV that the whole blue DIV moves further down the page, where the text is suddenly quite happy to start wrapping. This can probably be solved with a single line of CSS but I've been trying all sorts with no joy. Can anyone please pinpoint what I need to do? Hello, i know this quest has been asked a few tims before as i did a search on it, but could not find an answer to help.. (though i may have missed it as i havet slepted in days) i have this setup on a page where i have a table of 4 imgs in the top right of the main table.. the text starts at the top left but dose not wrap under the images once its long enough and past the images.. (ill try and draw it for you here) .......== .......== ....... ....... ....... ....... ....... the . is my text the == is a image (/ is just a space), above is what its doing, what i need is for it to do this .......==/== .......==/== ............... ............... ............... thats what i need. i hope this shows what i mean :P any help would be great thanx. I have a span that displays a message generated from ASP. The message is not wrapping like I expected it to. My CSS for the span looks like this, #message { padding:5px; font:bold 100% Arial, Verdana, Helvetica, sans-serif; border: 1px dashed #000000; } And my HTML looks like this, <span id="message">This is a sample message. This is a long message that will not wrap as one would expect.</span> When the message is long, the span wraps, but it overlaps the first line. I have tried adding float:left to it, but then it becomes so wide that scrollbars are displayed. I could add a width with the float, but if I do that then the short messages look funny when displayed (the border goes the whole width, and therefore there is whitespace to contend with). How can I make this wrap like would be expected (no overlap)? Thanks, Drew hi, i successfully managed to text wrap content around an image that was floated to the left (within a div element).... however, i now want an image with a caption and thus i want to text wrap the content around the div element containing the image and caption which is floated to the left... however, i cannot work out how to do this and performing a google search has not helped - can someone help me here? Anybody know how to force a long string of text that doesn't contain any spaces to wrap inside its containing div, and not just sprawl outside of the entire page? I've done some searching and can't seem to find a lot of discussion about this particular problem. If the content contained enough spaces, then the overflow would wrap nicely, but there aren't any. What am I missing here? Thanks hey guys, im not the greatest with css and html but i do it for fun to try and teach myself. Anyways I have a css drop menu set up on my site and I am having a problem with the width sizes in the actual drop down. The text length is of various sizes in the drop down. (some are long single words, some are 2 words etc) and I am using a width size of 11em which in all browsers using a standard screen res shows up fine. but if somebody uses a smaller screen res the text starts wrapping. Where you get the 2 word lines split into 2 lines. and then If i increase the size sometimes I get separate <li>'s on the same line. Its pretty frustrating. What I want to do is be able to increase the width size of the drop menu and even have all kinds of extra padding on the right if I want but without <li>'s spilling onto the next line or without <li>'s sitting on the same line cause its too big. Here is my CSS for the drop. Code: #nav li ul {
background: #FCDFFF;
background-image: url('images/background.png');
border-style: ridge;
border-width: 5px;
border-color: #000000;
margin-top: 0px;
position: absolute;
font-size: 95%;
width: 11em;
left: -999em;
line-height: 2;
z-index: 999;
}
anybody know how I can do what Im looking for? Thanks in advance! I am a bit lost as to how to accomplish the following: I have two divs of unequal width, let's say 300 and 100 for example. I need to float both of these divs to the right and have them stacked on top of each other. That's easy enough on it's own, but I need text to wrap around them properly. ie if the wide one is on top the text should flow to it's left edge, then flow underneath it it the narrow divs left edge, then underneath the narrow one. I tried doing this with relaitve positioning, but have had no luck. If I simply float them both to the right, they line up side by side as expected. If I wrap them both in one container div, the text will flow to the left edge of the wide div but obviously not wrap underneath it to the left edge of the narrow div. Any ideas? Trying to achieve this: I'm having trouble figuring out how to float the right ad space correctly. This is what i've got so far: http://gatehouse.graffetto.com/floating_divs.html Code: Code: <html>
<head>
<style type="text/css">
.mainDiv {margin: 0; border: 1px solid black; padding: 10px; width: 600px; float: left;}
.image {height: 100px; width: 100px; background-color: red; float: left;}
.rightAd {float: right; background-color: blue; height: 250px; width: 300px; clear:right; margin-top: 300px;}
</style>
</head>
<body>
<div class="mainDiv">
<div class="image">test</div>
<div class="rightAd">test</div>
<div class="textDiv">
Text content
</div>
</div>
</body>
</html>
I know this is simple i just can't figure it out for some reason.. thanks for any help. Okay, I've been going MENTAL with this. Please help!!!! Here is the page: go to bartlettinteractive dot com / retail /index.html (sorry, I am a new user so they won't let me put in the actual link). Anyways, when you minimize your screen, the nav WRAPS when I want it to just be hidden. I have tried every combination of overflow:hidden and whitespace:nowrap I could imagine and nothing is getting it done. Please be my CSS hero. I searched the forum and could not find a post with a similar issue, so I am creating this one. I have left and right containers, and the heights only wrap to the contents in the right container. So if there happens to be more content in the left container, the text exceeds the div background and continues onto the page background. URL REMOVED I appreciate any help I can get with this - Cadet Palmer I'm having trouble with creating CSS rollovers. Well, not so much trouble as frustration. The rollover itself works fine in FF, and that's cool by me, but I have to make it work in IE, and whilst it *does* work in IE, whenever I roll over one of the CSS buttons, a 2 pixel gutter appears in my border div See what I mean... Open this link in FF and then in IE Ahh, great, now it's putting the gutter there in IE regardless. Great. Here's the CSS I'm using: Code:
body { font-family: tahoma; font-size: 12px; background: #fff; }
img { border: 0px; }
#Container { width: 520px; height: 400px; border: 1px solid #808080; margin-left: auto; margin-right: auto; background: url("backdrop.gif"); background-repeat: repeat; }
#HeaderContainer { border: 0px solid none; width: 500px; padding-bottom: 0px; float: left; }
#NavContainer { position: relative; margin-left: auto; margin-right: auto; border: 1px solid #000; width: 500px; float: left; padding: 2px; background: #fff; margin: 0px; }
#FooterContainer { border: 0px solid none; width: 500px; float: right; padding-top: 4px; padding-right: 0px; background: #fff; text-align: right; margin: 0px; }
.nav { width: 100px; border: 0px solid none; background: #c0c0c0; height: 20px; text-align: center; padding-top: 5px; float: left; margin: 0px; }
.navSelected { width: 100px; border: 0px solid none; background: #fff; height: 20px; text-align: center; padding-top: 5px; float: left; margin: 0px; }
a.navText, a.navText:visited { font-weight: bold; color: #000; text-decoration: none; }
a.navTextSelected, a.navTextSelected:visited { font-weight: bold; color: #808080; text-decoration: none; }
and here's the HTML (minus the CSS): 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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<title>Page :: </title>
<style type="text/css" media="screen">
<!--Already included in snippet above /-->
</style>
<script type="text/javascript">
function roll(item, onOff) {
var targetDiv;
var targetText;
var showHide = onOff;
targetDiv = document.getElementById(item.id);
targetText = document.getElementById(item.id + "Text");
if (showHide == 1) {
targetDiv.className = "navSelected";
targetText.className = "navTextSelected";
} else if (showHide == 0) {
targetDiv.className = "nav";
targetText.className = "navText";
}
}
</script>
</head>
<body>
<div id="Container">
<div id="NavContainer">
<div onmouseover="javascript:roll(this, 1);" onmouseout="javascript:roll(this, 0);" id="Toast" class="nav"><a id="ToastText" class="navText" href="/test.php?p=Toast">Toast</a></div>
<div onmouseover="javascript:roll(this, 1);" onmouseout="javascript:roll(this, 0);" id="Lemons" class="nav"><a id="LemonsText" class="navText" href="/test.php?p=Lemons">Lemons</a></div>
<div onmouseover="javascript:roll(this, 1);" onmouseout="javascript:roll(this, 0);" id="Cakes" class="nav"><a id="CakesText" class="navText" href="/test.php?p=Cakes">Cakes</a></div>
<div onmouseover="javascript:roll(this, 1);" onmouseout="javascript:roll(this, 0);" id="Nachos" class="nav"><a id="NachosText" class="navText" href="/test.php?p=Nachos">Nachos</a></div>
<div onmouseover="javascript:roll(this, 1);" onmouseout="javascript:roll(this, 0);" id="Frogs" class="nav"><a id="FrogsText" class="navText" href="/test.php?p=Frogs">Frogs</a></div>
</div>
<div id="FooterContainer"><a href="http://telestatic.net"><img src="http://telestatic.net/images/tsnLogo.jpg" width="136" height="15" alt="The Telestatic Network" title="The Telestatic Network" /></a> <a href="http://validator.w3.org/check?uri=http%3A%2F%2Fresume.telestatic.net%2Ftest.php%3F"><img src="http://telestatic.net/images/btnXHTML.png" alt="Valid Strict XHTML 1.0!" title="Valid Strict XHTML 1.0!" height="15" width="80" /></a> <a href="http://jigsaw.w3.org/css-validator/validator?uri=http%3A%2F%2Fresume.telestatic.net%2Fresume.css"><img src="http://telestatic.net/images/btnCSS.png" alt="Valid CSS!" title="Valid CSS!" width="80" height="15" /></a></div>
</div>
</body>
</html>
Hope to god someone can explain what's going on before I go totally insane. how i do that again? Hi, Does anyone know how to get text in a textarea to automatically wrap when the text input hits the right hand border of the textarea. It works fine in I.E. without any style rules or using the html tag 'wrap'. But in firefox the text just continues horizontally and a horizontal scroll bar appears at the bottom of the box when the text reaches the right-hand border. Read a solution somewhere, sometime ago but can't remember where. Tried so far: [1] css overflow rule [2] HTML 'wrap' attribute [3] css white-space rule solution must validate CSS. thanx in advanz My menu keeps wrapping when the browser window is resized... How do I prevent this? Here is my code: index.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=iso-8859-1" />
<title>Sphinx Gaming Inc. -::- Home</title>
<link rel="stylesheet" type="text/css" href="main.css" />
<script type="text/javascript">
var blanking_flag = true;
function search_remvalue(method)
{
if (blanking_flag === true && method == 'focus')
{
document.search_frm.query.value = "";
blanking_flag = false;
}
else if (method == 'focus' && document.search_frm.query.value == "Search...")
{
document.search_frm.query.value = "";
blanking_flag = false;
}
if (blanking_flag === false && document.search_frm.query.value == "" && method == 'blur')
{
document.search_frm.query.value = "Search...";
}
}
</script>
</head>
<body>
<div id="wrapper">
<div id="header">
<a href="index.html"><h1><p>Sphinx Gaming Inc.</p></h1></a>
</div>
<div id="navigation">
<ul >
<li><a href="#">Home</a></li>
<li><a href="#">Products</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">Downloads</a></li>
<li><a href="#">Support</a></li>
<li><a href="#">About Us</a></li>
<li><a href="#">Advertising</a></li>
<li><a href="#">Contact Us</a></li>
<li><a href="#">Partners</a></li>
</ul>
<form name="search_frm" action="" method="get">
<input type="text" size="30" name="query" value="Search..." onBlur="search_remvalue('blur')" onFocus="search_remvalue('focus')"/>
</form>
</div>
<div id="content">
<p>This is the main content</p>
</div>
<div id="footer">
<p> It is currently <?php echo date('l \t\h\e jS \of F Y h:i:s A'); ?><br/> </p> <br/>
<p class="bottom">Copyright Richard Carson, 2010. If you have any questions, comments or concerns, feel free to email me at rcarson@sphinxgaming.com</p>
</div> </div>
</body>
</html>
main.css Code: * { padding: 0; margin: 0; }
html,
body {
margin:0;
padding:0;
height:100%;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 13px;
white-space:nowrap;
}
p {
padding: 10px;
}
#wrapper {
margin: 0 auto;
width: 100%;
min-height:100%;
position: relative;
}
#content {
float: left;
color: #333;
background: #FFFFFF;
padding:10px;
padding-bottom:60px; /* Height of the footer */
}
#header {
color: #555;
width: 100%;
float: left;
height: 75px;
background: #000000;
}
#header h1 {
font-size: 50px;
}
#header p {
text-align: center;
}
#header a {
width: 99.9%;
height: 100%;
float: center;
text-align: center;
display: block;
text-decoration: none;
font-weight: normal;
}
#header a:link {
color: #999;
border: none;
}
#header a:visited {
color: #999;
border: none;
}
#header a:hover {
color: #999;
border: none;
}
#header a:active {
color: #999;
border: none;
}
#footer {
position:absolute;
bottom:0;
width:100%;
height:60px; /* Height of the footer */
clear: both;
color: #999;
background: #333;
}
#footer p {
text-align: right;
margin: 3px;
padding: 1px;
vertical-align: top;
}
#footer p.bottom {
text-align: center;
font-size: 10px;
vertical-align: bottom;
}
#navigation {
float: left;
width: 100%;
padding: 0;
margin: 0;
height: 25px;
color: #999;
background: #333;
text-align: center;
}
#navigation ul
{
padding: 0;
margin: 0;
display:inline;
width: 100%;
}
#navigation li
{
float: left;
padding: 0;
margin: 0;
display:inline;
}
#navigation li a
{
height: 25px;
line-height: 25px;
float: left;
width: 120px;
padding: 0;
margin: 0;
display: block;
border-left: 0.1em solid #444;
border-right: 0.1em solid #444;
color: #999;
text-decoration: none;
text-align: center;
}
#navigation a:link {
color: #999;
}
#navigation a:visited {
color: #999;
}
#navigation a:hover {
color: #BBB;
}
#navigation a:active {
color: #FFFFFF;
}
Thanks in advance, Richard Carson Good afternoon, hoping you guys can help me with something that's been tasking me the last couple of days. Basically I have an image floated right inside a container div, and I wan't some divs to wrap around this on the left. I've done this bit. Inside each of the divs is a left floated number and a paragraph of text. I'm having trouble getting this not to wrap around the number without floating certain elements and breaking the rest of the layout. Here's a stripped down version of the page (sorry if the code is messy). Code: http://tomarcher.co.uk/upload/linkdump/test/single%20-%20Copy.php I look forward to your replies. I just discovered this recently while trying to help out a friend. It happens in all browsers, so it must be part of the spec, but it's not the way I expected it to work. In the zip file below, there are basically three sections, the content, a colored box in the content, and a colored sidebar that the content wraps around. The thing is that the colored box text wraps to the sidebar, but the background extends the width of the page/parent element. The nutshell version of my question is -- is there a way to make the background wrap too? I want the colored content box to always be as wide as the plain text above it, and the page needs to be liquid, and it's causing me headaches. Thoughts? Please can you take a look at my page http://www.doylecompanylaw.com/doyle.html The bottom div #basediv is all borked. I can't for the life of me figure out why. The main #outerdiv has a background image applied to it and it should all line up with the base div but its not displaying properly on Firefox or Opera. Any ideas? I set up my photo pages so that each photo is in its own "bin" div with a caption. Each bin has the same width but different heights due to different caption lengths. All of the bin divs are coded to float left, so they stack vertically when there is only enough screen width for one. When the screen is wide enough to accomodate more than one, the divs that are wrapped to the next line (so to speak) start below the tallest previous div which can leave a lot of empty space. I'm sorry if this is confusing, a perfect example of what I am talking about can be found here with a browser window over 1024px wide: http://www.bsuto.com/photoblog/2006/05/27/ And the css is he http://www.bsuto.com/internal/sheet.css Does anybody have an idea of how to eliminate the empty space? Thank you all so much. Hello, I know basic css and html, but not much more than that. However, the site I am attempting to build is very simple, so hopefully someone here can help me stumble my way through the process. Here is an example of what I want: URL ...and when I add new content: URL I want a css grid of identical square containers, with a thumbnail in each one. The tricky part is getting the differently-sized thumbnails to be vertically centered in the containers without having to set each one by hand. This is where I have gotten so far- http://jimtierneyart.com/test/test.html Code: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<style type="text/css">
body {
margin : auto;
}
.wrapper {
width: 900px;
border: 1px solid #bbbbbb;
margin: 50 auto;
}
.item {
line-height: 223;
text-align: center;
float: left;
width: 223px;
height: 223px;
border: 1px solid #dddddd;
background: #EBEBEB;
}
img.a {
margin: auto;
max-width:120px;
border:0;
max-height:175px;
}
</style>
</head>
<body>
<div class="wrapper">
header
<BR>
<BR>
<div class="item">
<img class="a" src="image.gif">
</div>
<div class="item">
<img class="a" src="image.gif">
</div>
<div class="item">
<img class="a" src="image.gif">
</div>
<div class="item">
<img class="a" src="image.gif">
</div>
<div class="item">
<img class="a" src="image.gif">
</div>
<div class="item">
<img class="a" src="image.gif">
</div>
<div class="item">
<img class="a" src="image.gif">
</div>
<div class="item">
<img class="a" src="image.gif">
</div>
<div class="item">
<img class="a" src="image.gif">
</div>
<div class="item">
<img class="a" src="image.gif">
</div>
</div>
</body>
</html>
I need 2 things to happen: 1. The parent container must be centered on the page (this worked fine until I added the Doctype tags. 2. the thumbnails must be vertically centered within the child containers. Can anyone point me in the right direction? I would really appreciate some help. |
|||||||