|
CSS - Container Not Wrapping Around Child....
hey guys,
need some help with css on mys site take a look at this using firefox http://home.no.net/kumar/test/earthtemplate_div.php3 http://home.no.net/kumar/test/skins/flyaway_yellow.css ie diplays the the container expanding to include the text, but ff (and maybe even mozillla) doesnt. anyone know how to get around this. i found a hack that i used to make sure that the container for the whole site wrapped around all shild elements but it is not working for the text. i have a left column, rightcoloum and the content div i the middle, all places using flaots, not absolute pos. also, the content div contains another div (content2), inside which the text is (this is oinly to get around widht issues in ie.) im suire that there is a way to get the contetnt or the content2 to wrap around the text...so any help is appreciated... thansk kumar Similar TutorialsI'm basically asking the same question as this post, but hoping that I can press for a better solution. I have an element which contains an image and some text, and I need that element to expand to the width of the image, not the text. The size of the image will change, so I can't set a fixed width on the containing element. The code I have which doesn't work looks like this: Code: <html> <head> </head> <body> <span style="display: inline-block; border: 1px solid black"> <img src="someimage.jpg" style="width: 400px; height: 200px;" /> <div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam vel placerat sapien. Aenean tempus lorem justo, at eleifend mi. Nam elementum nisl ut elit blandit dapibus. Donec et massa turpis, ac tincidunt odio.</div> </span> </body> </html> The solution proposed in the post I linked to looks like this: Code: <html> <head> </head> <body> <table width="1"> <tr> <td> <img src="someimage.jpg" style="width: 400px; height: 200px;" /> </td> </tr> <tr> <td> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam vel placerat sapien. Aenean tempus lorem justo, at eleifend mi. Nam elementum nisl ut elit blandit dapibus. Donec et massa turpis, ac tincidunt odio. </td> </tr> </table> </body> </html> The second example gives me the functionality I'm looking for, but I would really like to avoid using tables. I'm hoping there is a CSS solution to this. Thanks. Just like the title says, the child is wider than the parent, and i want it automatically centered, so t hat the centers of both divs are inline with each other. I tried the Code: margin 0px auto; which works if the child is smaller, but it doesn't seem to work in this case, any other ideas? Hi There - Have a simple container div containing two other divs, top and content. My problem is that I can't get the colorboxtop to stick to the top of its container. There's a wayward space. Can't find any stray margins or padding hanging around. Perhaps fresh eyes can see what I cannot. Please let me know. Any help you can give me would be greatly appreciated. Thanks! Code:
<body>
<div class="colorbox">
<div class="colorboxtop">
<h2>title goes here</h2>
</div><!-- /colorboxtop -->
<div class="boxcontent">
<p>You should read this and <a href="#">Click Here</a>.</p>
<a title="Go Here!" href="#">[button]</a>
</div><!-- /boxcontent -->
</div><!-- /colorbox -->
</body>
No great complexity there...here's the CSS: Code:
body {
color:#666666;
font-family:Lucida Grande,Verdana,sans;
font-size:10px;
font-size-adjust:none;
font-style:normal;
font-variant:normal;
font-weight:normal;
line-height:13px;
}
.colorbox {
margin-bottom:9px;
padding-bottom:15px;
width:300px;
border:thin solid #CCCCCC;
}
.colorbox h2 {
color:#FFCC33;
}
.colorbox {
color:#CC6633;
padding:0px 20px 15px;
margin-top:0;
margin-bottom:10px;
}
.colorboxtop {
background-color: #dddddd;
height:50px;
color:#666666;
background-image: url(images/bg_Tiles/stripe-dk-blue-green.png);
padding:auto 20px;
}
.colorbox a {
color:#C5DBE9;
font-weight:bold;
text-decoration:none;
}
Hello there, first post, just need a quick fix. Hope you don't mind. So I'm trying to make myself a new portfolio site, but there's this 'error' I can't seem to fix... (Can't post a link in my first post, so just copy/paste "hellspike.thanez.org/newsite" in the addybar.) Basically that 150*300 infobar is supposed to be right next to the image, but it always ends up above or below the container. <!--AK47--> <div id="imgcont0"> <div id="imgcont1"><img src="images/ak47/1.jpg"></div> <div id="imgcont2"><img src="images/ak47/info.jpg"></div> </div> <!--/AK47--> imgcont0 is a 825*300 container, in which imcont1 (render) and 2 (infobar) are supposed to be. Stylesheet: #imgcont0 { width: 825px; height: 300px; margin-left: auto; margin-right: auto; } #imgcont1 { width: 650px; } #imgcont2 { margin-left: 675px; width: 150px; } As you see the code is simple, yet I can't seem to fix this problem. Ideas? 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. 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 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 how i do that again? Hi, 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? 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. 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 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. 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? 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'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? 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? So here's the deal. I need the nav buttons to stretch across so that it's flush with the gray background but when I add another pixel to padding-right:7px it wraps to the next line. I'm somewhat new to CSS so I don't know what to do to fix it. -Johnny Here is the code: /* ---------- Primary Nav ---------- */ div#primaryNav {clear:both;background-color:#EEEEEE;width:754px;} div#primaryNav ul {border:0;margin:0;padding:0;list-style-type:none;text-align:center;} div#primaryNav ul li {display:inline;float:left;text-align:center;padding:0;margin:0;padding-bottom:5px;padding-right:7px;} div#primaryNav ul li a {width:116px;height:17px;border:1px solid #D9D9D9;background:#FFFFFF;margin:0px;padding:0;padding-top:2px;color:#707070;display:block;text-align:center;text-decoration:none;} div#primaryNav ul li a:hover {} div#primaryNav ul li a.selected {font-weight:bold;color: #FFFFFF;background-color: #FFAB00;border: inherit #FFAB00;} Here is the navi: <div id="primaryNav"> <ul> <li><a href="Item">Item</a></li> <li><a href="Item">Item</a></li> <li><a href="Item">Item</a></li> <li><a href="Item">Item</a></li> <li><a href="Item">Item</a></li> <li><a class="selected" href="Item">Item</a></li> </ul> </div> hi all, i'm trying to make a vertical menu using CSS2 and XHTML. the problem i'm facing is that i need a DIV inside a table cell, which should take 100% width and height, and inside this DIV i will place arbitrary contents that scrolls if they overflows. This is the code i have written so far: 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>
<title>
TestMenu
</title>
<style type="text/css">
BODY, HTML {
height: 100%;
margin: 0 0 0 0;
padding: 0 0 0 0;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;
}
.menuContainer {
background-color: red;
width: 300px;
height: 100%;
border-spacing: 0px;
}
.menuItem {
background-color: green;
}
.menuItemOpen {
background-color: yellow;
}
.menuItemContents {
margin: 0px;
padding: 0px;
vertical-align: top;
}
.menuItemContainer {
height: 100%;
width: 100%;
border-spacing: 0px;
}
.menuTitle {
background-color: blue;
color: white;
height: 20px;
margin: 0;
padding: 0;
}
.menuContents {
padding: 0px;
}
.menuInnerContents {
background-color: orange;
overflow: auto;
height: 100%;
width: 100%;
}
</style>
</head>
<body>
<table class="menuContainer">
<tr class="menuItemOpen">
<td class="menuItemContents"><table class="menuItemContainer">
<tr>
<td class="menuTitle">Item 1</td>
</tr>
<tr>
<td class="menuContents"><div class="menuInnerContents"><div>This are the contents<br/>
of this menu.<br/>This are the contents<br/>
of this menu.<br/>This are the contents<br/>
of this menu.<br/>This are the contents<br/>
of this menu.<br/>This are the contents<br/>
of this menu.<br/>This are the contents<br/>
of this menu.<br/></div></div></td>
</tr>
</table></td>
</tr>
<tr class="menuItem">
<td class="menuTitle">Item 2</td>
</tr>
<tr class="menuItem">
<td class="menuTitle">Item 3</td>
</tr>
<tr class="menuItem">
<td class="menuTitle">Item 4</td>
</tr>
<tr class="menuItem">
<td class="menuTitle">Item 5</td>
</tr>
</table>
</body>
</html>
as you can see the "menuInnerContents" DIV isn't taking all the space available and the text inside it doesn't overflow. Help me please! |
|||||||