|
CSS - Ie7 - Parent Div Won't Expand For Floating Children
Pretty much what the title says. I have a parent div that I fill up up floating div's using javascript, but the parent won't grow. Only ie7 is a problem.
To see the problem... Link is here... http://esteemforthehome.stealthwd.c...electedPageID=7 Add a couple products to the cart, click on "View Cart"... Filling in shipping info and click "Calculate Shipping". Its the "viewCartShippingOptions" div that doesn't expand. Thanks in advance Similar TutorialsI've been searching for a few days, but I haven't found a solution to my problem. How do I get my parent DIV to expand to contain all of my content beyond the viewport? CSS: Code:
html {
margin: 0px;
padding: 0px;
height: 100%;
width: 100%;
min-height: 100%;
}
body {
margin: 0px;
padding: 0px;
height: 100%;
width: 100%;
min-height: 100%;
}
.page {
background-color: #dddddd;
margin-left: -390px;
border-top-width: thin;
border-right-width: thin;
border-bottom-width: thin;
border-left-width: thin;
border-right-style: solid;
border-left-style: solid;
border-top-color: #9CB0C0;
border-right-color: #9CB0C0;
border-bottom-color: #9CB0C0;
border-left-color: #9CB0C0;
position: absolute;
height: 100%;
min-height: 100%;
width: 780px;
left: 50%;
top: 0;
}
.header {
position: absolute;
height: 158px;
width: 764px;
background-color: #FFFFFF;
left: 7px;
top: 0px;
}
.content {
position: absolute;
left: 7px;
top: 159px;
background-color: #9CB0C0;
height: 821px;
width: 764px;
margin-bottom: 34px;
}
.footer {
background-color: #415569;
height: 34px;
width: 764px;
left: 7px;
bottom: 0px;
}
And the HTML: Code: <?xml version="1.0" encoding="iso-8859-1"?>
<!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>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link href="/test.css" rel="stylesheet" type="text/css" />
<script language="JavaScript" type="text/JavaScript">
<!--
function MM_reloadPage(init) { //reloads the window if Nav4 resized
if (init==true) with (navigator) {if ((appName=="Netscape")&&(parseInt(appVersion)==4)) {
document.MM_pgW=innerWidth; document.MM_pgH=innerHeight; onresize=MM_reloadPage; }}
else if (innerWidth!=document.MM_pgW || innerHeight!=document.MM_pgH) location.reload();
}
MM_reloadPage(true);
//-->
</script>
</head>
<body>
<div id="lPage" style="position:absolute; z-index:1" class="page">
<div id="lContent" style="position:absolute; z-index:2;" class="content"></div>
<div id="lHeader" style="position:absolute; z-index:1" class="header"></div>
<div id="lfooter" style="position:absolute; z-index:3" class="footer"></div>
</div>
</body>
</html>
I've searched through a few of the threads here, but haven't been able to find an answer either. Thanks, Brent How could I Force a parent div to vertically expand to size of its child div? Thanks in advance, Richard Carson Hello I have struggled to understand this issue. I have a large container and I want 2 or more dives to stay side my side but if I apply float left to the div(s) it leaves the large container. How do I do it so that the left divs push the large container with them. I've included my example. and a screen shot here [IMG]atrexstudio.com/float_left/Untitled-4.jpg[/IMG] <body> <style type="text/css"> .container { width: 600px; background-color: #0F0; } #left1{ background-color: #633; height: 100px; width: 100px; float: left; } #left2 { background-color: #639; height: 100px; width: 100px; float: left; } </style> <div class="container">why do the two left divs jump out the container? <div id="left1">left</div><!--left --> <div id="left2">left2</div> </div><!--container --> </body> </html> If I can understand this then I will not have to keep setting the length of the container manually. Thank you I appreciate you time. Hello there, I have a question about floating and automatic heights. First, i don't want to use tables becouse of layout etc... I want to have a "row" with 3 seperate "columns". Each "Cell" should have the same height as the heighest "Cell". Now this is where the problem is. The height isn't correct . I Tryed height: auto and 100%. But nothing is working. How can i fix this? Thx in advance. CSS: Code:
.divRow {
float: left;
position: relative;
height: auto;
margin: 2px 0;
}
.columnTo, .columnMessage, .columnDate {
height: 100%;
float: left;
padding: 0;
padding-right: 2px;
background-color: #f0f0f0;
vertical-align: middle;
}
.columnTo {
width:75px;
overflow: hidden;
background-color: #ff0000;
}
.columnMessage {
margin-left: 2px;
width:270px;
overflow: hidden;
background-color: #00ff00;
}
.columnDate {
margin-left: 2px;
width:40px;
overflow: hidden;
background-color: #0000ff;
}
HTML Code: <div class="divRow"><div class="columnTo" style="background:#ffad39">Column#1:</div><div class="columnMessage" style="background:#ffad39">Column#2:</div><div class="columnDate" style="background:#ffad39">Column#3:</div><div class="clearBoth"></div></div> <div class="divRow"><div class="columnTo clearBoth">Foobar #1</div><div class="columnMessage">This is a peace of text etc.. etc.. etc.. etc.. And Some more text, and some more..............</div><div class="columnDate">blah</div><div style="clear:both"></div></div> <div class="divRow"><div class="columnTo clearBoth">Foobar #1</div><div class="columnMessage">This is a peace of text etc.. etc.. etc.. etc.. And Some more text, and some more..............</div><div class="columnDate">blah</div><div style="clear:both"></div></div> http://cwin.redirectme.net/ext/ch/test.html ^ On IE, this works fine, the parent is red as expected, whereas on Mozilla, the parent has a white background. If i have no floats, it works as expected I am converting a working table layout to a better div layout. One problem is that the height of the rows, which in a table layout would effectively be the height of the tallest cell, is being set to 0 in my divs. I basically have this nested structure Code:
<div id="tabl" style="position:absolute;">
<!-- not important, this is basically a container div--!>
<div class="row" style="position:relative;">
<!-- important, relative is the only way i know
how to arrange children by % values --!>
<div class="cola" style="position:absolute; left:25%; width:25%;">
</div>
<div class="colb" style="position:absolute; left:50%; width:25%;">
</div>
<!-- more cells --!>
</div><!--closes the row --!>
<div class="row"><!-- same as above, the structure repeats--!>
</div>
</div>
that's not a copy/paste of the actual code, just an adaptation highlighting what's important. The columns align perfectly, the problem is that the height of the rows is 0, and so the rows all overlap. Setting the height of row to 100px proved this basically. I could set height to a value large enough so that overlapping becomes unlikely, but I would much prefer to have the height automatically assume the value of the height of the tallest child, much like auto, but available to an element whose position is relative. if you want to see a live model of the actual code you can see it at: http://www.drfool.net/test/articles/ As you can see, the rows overlap. If there is no way to solve this problem in the way I described, I'm open to suggestions (so long as they don't involve table layout and/or something silly like frames) thank you PS, it's 5 in the morning and I'm going to sleep. I'll verify any suggestions in the afternoon when I wake up. Side note, that entire wing of the website is basically dead, so no need to tell me "the links don't work, the images don't load" UPDATE: Ha ha, the code works exactly as desired in IE (IE ignores height:100px, which is actually what I wanted in this case, to demonstrate my problem, irony) but not in FF3, which is my target browser. UPDATE: made the code more clear This seems odd to me to even bother putting this up here, as I'm guessing it is a simple fix. I'm familiar with css and html, so I hate to post this, but it is a pressing matter that I'm drawing a blank on. I'll post the HTML and CSS below, as I don't have a live location I can place it as an example. Hopefully someone will pop open dreamweaver and take a few minutes to help me out The div 'main' contains the divs 'rightColumnPartners' , 'mainContentPartners', and 'leftColumn'. However, main does not push down to contain the content of those children divs. Maybe I'm missing something elementary and simple, but it seems considering main encompasses these divs, it should stretch downways to contain the content within them. Below is the HTML and CSS, again I apologize for not having an example page up, but it is pretty basic and should be easy to visualize. ---------------- <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <link href="main.css" media="all" rel="Stylesheet" type="text/css" /> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> <meta name="keywords" content=""> <meta name="description" content=""> <title>Test</title> </head> <body> <div id="topSection"> </div> <!--close of topSection --> <div id="header"> <div id="mainnavigation"> </div> <!--close of mainnavigation --> </div> <!--close of header --> <div id="main"> <p>test</p> <p>test</p> <p>test</p> <p>test</p> <p>test</p> <p>test</p> <div id="leftColumn"> </div> <!--close of leftColumn --> <div id="rightColumnPartners"> <div id="mainContentPartners"> <h2 class="darkHeader"> Partners </h2><br /> <h2 class="darkDescriptionBold">Filler Partner </h2> <h2 class="darkDescriptionPartners">This would be the first partner and the information that pertains to them. Fill this spot with appropriate descriptive content and possibly contact information for the partner.</h2> <br /> <h2 class="darkDescriptionBold">Filler Partner Two</h2> <h2 class="darkDescriptionPartners">This would be the first partner and the information that pertains to them. Fill this spot with appropriate descriptive content and possibly contact information for the partner.</h2> <br /> <h2 class="darkDescriptionBold">Filler Partner Three</h2> <h2 class="darkDescriptionPartners">This would be the first partner and the information that pertains to them. Fill this spot with appropriate descriptive content and possibly contact information for the partner.</h2> <br /> <h2 class="darkDescriptionBold">Filler Partner Four</h2> <h2 class="darkDescriptionPartners">This would be the first partner and the information that pertains to them. Fill this spot with appropriate descriptive content and possibly contact information for the partner.</h2> <br /> <h2 class="darkDescriptionBold">Filler Partner Five</h2> <h2 class="darkDescriptionPartners">This would be the first partner and the information that pertains to them. Fill this spot with appropriate descriptive content and possibly contact information for the partner.</h2> <br /> <h2 class="darkDescriptionBold">Filler Partner </h2> <h2 class="darkDescriptionPartners">This would be the first partner and the information that pertains to them. Fill this spot with appropriate descriptive content and possibly contact information for the partner.</h2> <br /> <h2 class="darkDescriptionBold">Filler Partner Two</h2> <h2 class="darkDescriptionPartners">This would be the first partner and the information that pertains to them. Fill this spot with appropriate descriptive content and possibly contact information for the partner.</h2> <br /> <h2 class="darkDescriptionBold">Filler Partner Three</h2> <h2 class="darkDescriptionPartners">This would be the first partner and the information that pertains to them. Fill this spot with appropriate descriptive content and possibly contact information for the partner.</h2> <br /> <h2 class="darkDescriptionBold">Filler Partner Four</h2> <h2 class="darkDescriptionPartners">This would be the first partner and the information that pertains to them. Fill this spot with appropriate descriptive content and possibly contact information for the partner.</h2> <br /> <h2 class="darkDescriptionBold">Filler Partner Five</h2> <h2 class="darkDescriptionPartners">This would be the first partner and the information that pertains to them. Fill this spot with appropriate descriptive content and possibly contact information for the partner.</h2> <br /> </div><!--close of mainContentPartners --> </div> <!--close of rightColumnPartners --> </div> <!--close of main --> <div id="footer"> </div> <!--close of footer --> </body> </html> ---------------- @charset "UTF-8"; /* CSS Document */ /**********************/ /* CONSISTENCY CODE */ /**********************/ * { margin: 0px; padding: 0px; font-size: 24px; } /**********************/ /* POSITIONING CODE */ /**********************/ #mainnavigation { background: #1E0F08; height: 36px; width: 100%; } body { height:100%; background: url(bg_gradient.jpg) SaddleBrown repeat-x; } #homecontainer { width: 100%; height: 100%; /*height: auto;*/ position:relative; } #topSection { width: 1000px; height: 30px; background: #754221; margin: auto auto; border-width: medium; border-color: #432306; border-left-style: solid; border-right-style: solid; } #header { background: url(header_bg.jpg) repeat-x bottom; height: 123px; border-width: thin; border-color: #d29553; border-top-style: solid; border-bottom-style: solid; } #titleimage { margin-top: 0px; padding-left:0px; float: left; left: 0; position: absolute; } #main { width: 1000px; /*background: #703b1b;*/ background: red; margin: 0 auto; border-width: medium; border-color: #432306; border-left-style: solid; border-right-style: solid; clear:both; } #leftColumn { width: 20%; margin-left: 0px; position: relative; background: black; height: 100%; height:600px; border-width: medium; border-color: #432306; border-right-style: solid; float: left; } #rightColumnPartners { width: 70%; float: left; background: white; } #mainContent { margin: 40px auto 0; background: url(../images/solutionsProven.jpg) no-repeat; width: 619px; } #mainContentPartners { margin: 40px auto 0px; /*background: url(emptybackground.jpg) no-repeat #FFDFB9;*/ width: 611px; background: blue; } #footer { background: #190B08 ; height:67px; border-width: thin; border-color: #d29553; border-top-style: solid; border-bottom-style: solid; position:relative; clear:both; } .darkHeader { color: #edbb8a; font-size: 90%; font-family: "Arial","Trebuchet MS",sans-serif; padding-left: 15px; padding-top: 10px; } .darkDescriptionBold { color: white; font-size: 14px; font-family: "arial","helvetica",sans-serif; font-weight: 800; padding-left: 20px; padding-right: 15px; width: 90%; } .darkDescriptionPartners { color: white; font-size: 12px; font-family: "arial","helvetica",sans-serif; font-weight: 200; padding-left: 20px; padding-right: 15px; width: 70%; } ----------------- Thanks again. ~SS hello, this will perhaps sound like a crazy thing to do, but i am trying to style my nested list(s) in order for the 'category' to appear below its children. so rather than having, for example sport football cricket formula one i have football cricket formula one sport the reason for trying this is that i am hoping to display my lists at various positions along a base line (over a bg image) and certain positions within the image require the category name to be under the 'children'. is it possible though? i tried making the inner list's position to be relative and adjusting the top position to -20 etc but of course this brings the children up rather than push the category down. here is an example of my nested list Code: <ul> <li>sport <ul class="up"> <li>football</li> <li>f1</li> </ul> </li> <li>music <ul class="up"> <li>stuff</li> <li>stuff2</li> </ul> </li> </ul> it probably isn't possible but i thought i would ask before giving up on the idea completely. thank you for your time Greetings, friends! I have a quick question about CSS. I am fairly versed in CSS 2.0 and the selectors that are used within. However, I am not sure if any specific type of selector is available to help me do what I want. I am looking for a selector that will define styles for an element that contains specific children. To give you an example, let's say that I have an image on my page. That image is assigned the class of "alignleft". Now, let's say that I make that image into a link. I would like to find a CSS selector that allows me to assign style definitions to that link. Let's say my code looks like: Code: <a href="http://www.example.com/"><img src="example-pic.png" class="alignleft" alt="Example Picture" /></a> Now, I know if it was the other way around: Code: <a class="alignleft" href="http://www.example.com/"><img src="example-pic.png" alt="Example Picture" /></a> I could use something like: Code: .alignleft > img However, I am not sure if there is any way to go up a level in CSS. I would envision it looking something like: Code: a < img.alignleft but I can't find anything in the CSS spec that refers to instances like that. Does anyone know of anything? For instance, I would want a spec that looks something like: Quote: E < F - Matches any E element that is the parent of an element F. The specific reason I'm looking for something like this is that I am using the class of "external" to assign a background image to all of my links that lead away from our Web site. However, if that link is an image rather than text, I want to set the background of my link to "none" so that the background image does not interfere with the image itself. Any help would be greatly appreciated. Thank you. I'm trying to get the footer to dynamically expand with the content in the box 1, 2, 3. How can i do this? The HTML Code:
<div id="footer">
<div id="box1">Content</div>
<div id="box2">Content</div>
<div id="box3">Content</div>
</div>
The CSS Code:
#footer {
min-height:150px
height:auto;
}
#box1 {
float:left;
min-height:150px
height:auto;
}
#box2 {
float:left;
min-height:150px
height:auto;
}
#box3 {
float:left;
min-height:150px
height:auto;
}
Hi, Is there any way to set a DIV that starts at 500px height but can grow if the content inside is longer than that? Thanks. I have a page that uses CSS to handle layout. I also use a combination of CSS and javascript to create an expandable menu. I have a simplified version of this page he http://www.stringersites.com/csstest/index.htm Users of Dreamweaver will recognize this as being based on the HaloNavLeft template. As you can see, the page displays fine until you start expanding the menu items contained in <div id="mainMenu">. If you expand enough, the mainMenu box extends beyond the borders of the <div id="pagecell1"> in which it's contained. My primary question to the group is how to get the pagecell div to autoexpand along with the mainMenu div. My secondary question is how to stretch a vertical column to the height of the containing div. Specifically, this is <div class="relatedLinks">, which is contained in pageNav, which, in turn, is contained in pagecell1. The relevant pieces of CSS are included below, but you can link to the entire CSS sheet from the test doc above. Thanks in advance for the help. -Steve Stringer Code:
#pagecell1{
position:absolute;
top: 112px;
left: 2%;
right: 2%;
width:95.6%;
background-color: #ffffff;
}
#mainMenu {
background-color: #EEE;
border: 1px solid #CCC;
color: #000;
width: 350px;
position: absolute;
margin-left: 10px;
margin-top: 20px;
}
#pageNav{
float: left;
width:178px;
padding: 0px;
background-color: #F5f7f7;
border-right: 1px solid #cccccc;
border-bottom: 1px solid #cccccc;
font: small Verdana,sans-serif;
}
.relatedLinks{
margin: 0px;
padding: 0px 0px 10px 10px;
border-bottom: 1px solid #cccccc;
}
God, this is really simple but I have forgotten how to get the containing box to expand Basically the text div expands but the containing div doesn't PHP Code: <div style="width: 300px; min-height: 200px; border: 1px dashed red;"> <div style="border: 0; width: 110px; height: 110px; float: left;"> <img src="#" width="100" height="80" border="0" align="left" /> </div> <div style="border: 0; width: 190px; min-height: 200px; float: right;">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. In odio nibh, interdum eget, mollis quis, imperdiet non, risus. Curabitur laoreet vehicula massa. Curabitur consequat dui vitae lectus. Nam rutrum sapien id quam. Pellentesque aliquet nulla dignissim ante. Fusce metus libero, vehicula hendrerit, condimentum id, malesuada in, elit. Nam fermentum, metus in varius scelerisque, diam purus tristique tortor, vitae suscipit elit ipsum eu dolor. Ut dictum porttitor velit. Pellentesque cursus purus elementum dui. Phasellus aliquet ante vitae pede. </div> </div> Hi, what I'm trying to do is get two divs next to each other. That much I can do if I give them both a style of 'float:left;', but the problem with that is that they will overflow out of the div that they both sit in. Is there anyway to get two divs to sit next to each other, but to also expand the parent div if necessary? Thanks! So probably my topic title explains my problem pretty clearly, but basically I've got this div and I'd like it to expand downward as I fill a div contained within with content. Can anyone explain how I can do this? I tried placing a fairly tall picture in my inner div and right now it extends past the bottom of the outer div and looks really weird. Actually if there was even just a way I could tell the outer div exactly how tall the inner div is, that would also be fine, but I can't find a way to do this. I've tried the height: 253px; tag, but it hasn't changed anything. My outer div still doesn't go as far down the page as the inner one, so I'm left with an image thats halfway sticking out my content box. Any help would be great, thanks! Hey guys, I have been working on this for weeks and it is driving me nuts. I am trying to get the wrapper to expand to accomodate the content, but for some reason it wont expand. Any ideas? Here is the link: h$$p://digitallife.us/tutorials-t.html Thanks, Daniel Hello, i'm trying to make a tableless image gallery, each image is inside <span></span> (i don't know the dimensions of the image, it's resized by server side) while the div container expands fine, the span container does not expand to fit the image, and i also don't know how to vertically center it. i can't use <div> because images can be in the same row. Code:
body {
margin:0px
padding:10px;
background-color: #ffffff
}
body, div,span {
font-family: Arial; font-size: 12px; color: #000000
}
a {
color:#000099
}
a:hover {
color:#0000ff
}
div.paging {
padding:10px;
border:1px solid red;
}
div.paging span {
padding-left:10px;
border:1px solid red
}
div.gallery {
padding:10px;
border:1px solid red
}
div.gallery span {
margin:20px;
border:1px solid green;
}
div.gallery img {
border:1px solid black
}
this is the result http://addf.net/tests/m_g/gallery.php is float the only option? must i float every element on the page? what if it's a module for another not floated website? i'd rather not use float or a table. if you could help thank you Hey guys. I've gotten awesome help here before, so I decided to come back. Here is the web page I am trying to change (note-far from done. Don't laugh too hard): http://metroairvirtual.org/pilot_profile.php?pilot=1645 If you scroll down to "My Career History," you'll notice that (for example, the very first row of the table), it says "Email address updated from," and doesn't continue with the rest of the statement (gets cut off). I want to make it so I can scroll horizontally to view the whole statement by scrolling. I was successful by using the white-space: nowrap and then overflow-x: scroll. While that allowed me to do what I wanted, the actual DIV doesn't continue with the content, as shown in the shots below. Do you guys have any idea on how I can make the div style fill the scroll space? I can't really do a fixed width because history content varies from member to member and it is shorter/longer than others. Thanks for any help you can offer! If you need used code below that's fine, but I assume you can just use FireBug to inspect it. Thanks again! |
|||||||