|
CSS - Force Parent Div To Vertically Expand To Size Of Child
How could I Force a parent div to vertically expand to size of its child div?
Thanks in advance, Richard Carson Similar TutorialsJust 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? Is there a way to get the #middle div to stretch vertically to fill up the remaining space of the page, say with min-height etc.? Thanks, Mark 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>Untitled Document</title>
<style type="text/css">
html,body{
min-height:100%;
height: 100%;
}
html{
border: 1px solid red;
}
body{
border: 1px solid blue;
}
#container{
border: 1px solid green;
}
#top{
border: 1px solid yellow;
}
#middle{
border: 1px solid black;
min-height: 100%;
height: auto;
}
#bottom{
border: 1px solid grey;
}
</style>
</head>
<body>
<div id="container">
<div id="top"> </div>
<div id="middle"> </div>
<div id="bottom"> </div>
</div>
</body>
</html>
I'm trying to make a box (graphic) that will expand vertically as more content is added. I've made my border with flourishes and shadows, so a purely CSS box design isn't an option... Here's an exploded view of what I'm looking to do: ________________ |.........................| |.........................| |.........................| Top section that is static |.........................| |.........................| |.........................| Middle section with vertically |.........................| repeatable graphic |________________| Bottom section that closes it off Here's my code so far... Code: <div id="container" style="width:956px; margin:0px auto -1px auto;"> <div id="topedge" style="background-image:url(images/topedge.png); width:850px; height:15px;position:relative; left:53px;"></div> <div id="leftcolumn" style="background-image:url(images/leftedge.png); float: left; width: 79px; height: 641px;"></div> <div id="rightcolumn" style="background-image:url(images/rightedge.png); float: right; width: 79px; height: 641px;"></div> <div id="content" style="background:#000000; float: left; width: 797px; height:800px;">THIS IS THE CONTENT AREA</div> </div> </div> This code only makes the top half of the design, I can't seem to make the middle and bottom parts work. I'd appreciate any suggestions. Thanks. I'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 I'm working on this vanity site for myself, and don't have a lot of experience doing table-free layouts. But I've seen the benefits of it firsthand and want to start doing it for everything. An image of the layout I'm aiming for can be found here. The main problem I'm having right now is that when I put child <div>s into a parent <div>, the parent doesn't expand vertically. My main div that contains everything is "frame". Within "frame", there's "content_bg", and within "content_bg" there's "side", "blog" and "footer". I'm wanting all this to be centered and scaled 100% vertically, but I know that's a pain so I'm setting everything up first. - If I don't have the position property set to "fixed" or "absolute" in frame, it won't expand to contain the children. It will be 0px high. - If I don't have the position property set to "fixed" or "absolute" in content_bg, it has the same problem. - I can only set one or the other. Setting both expands content_bg, but not frame. - Sidepanel seems to have this problem too, but I haven't even started to try and fix it. Page CSS css Code: Original - css Code body { font-family: Georgia, "Times New Roman", Times, serif; font-size: 14px; color: #000000; background-image: url(assets/img/bg_stripes.gif); background-color: #2F2920; margin: 0px; } a { color: #544545; text-decoration: underline; } a:hover { color: #000000; text-decoration: none; } p { text-align: justify; } h1 { color: #2d5659; text-decoration: none; } #frame { background-image: url(assets/img/bg_frame.jpg); width: 996px; padding-right: 66px; padding-left: 66px; background-repeat: repeat-y; position: fixed; /* Without this, the background won't show for some reason */ } #frame #content_bg { background-image: url(assets/img/bg_main.jpg); background-repeat: repeat-y; } #frame #content_bg #blog { float: left; width: 540px; top: -30px; left: 20px; position:relative; } #frame #content_bg #side { background-image: url(assets/img/bg_sidepanel.jpg); position: relative; top: -66px; float: left; width: 275px; } #frame #content_bg #me { background-image: url(assets/img/me.jpg); background-repeat: no-repeat; float: left; width: 275px; height: 228px; } #frame #content_bg #header { background-image:url(assets/img/What-Happened-Final_06.jpg); background-repeat: no-repeat; float: left; width: 589px; height: 294px; } #frame #content_bg #side #linklog { position: relative; left: 29px; top: 2px; width: 208px; height: 248px; overflow: auto; } #frame #content_bg #side #linklog ul { margin-left: -35px; list-style-type: none; font-size: 12px; padding-bottom: 10px; } #frame #content_bg #side #linklog a { display: block; margin: 2px; padding: 3px; width: 176px; background-color: #E0C187; border-bottom: #CEB07A 3px solid; } #frame #content_bg #side #linklog a:hover, #frame #content_bg #side #linklog a:active { display: block; padding: 3px; margin: 2px; width: 176px; background-color:#F3D193; border-bottom: #CEB07A 3px solid; } #frame #content_bg #side #photolog { position: relative; left: 8px; top: 42px; width: 210px; height: 248px; } #frame #content_bg #side #photolog img { width: 58px; height: 58px; float: left; margin-top: 10px; margin-left: 10px; } #frame #content_bg #footer { background-image: url(assets/img/bg_footer.jpg); width:565px; height:218px; position: absolute; bottom: 0px; left: 366px; }
body {
Any help and/or constructive criticism would be very greatly appreciated. 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 http://weightlossforever.ca/ Works fine in everything but ie7 the leaves appear in front of their parent, they should be behind it. Thoughts? I had such good help with my last problem, I thought I'd come back for more. I'm trying to set up my pages to allow a nested div to expand the page vertically based on quantity of content. In other words, if a page requires a lot of content, I want it to automatically push the page down. As it is, the nested div is overlapping the parent. I've tried numerous tips from tutorials, but nothing doing. This article is the one that made the most sense to me but I couldn't achieve the desired effect. Here's the necessary info: HTML (Contact Page) : Code: <body class="contact">
<div id="Main_Container">
<div>
<div id="Header-img"></div>
<ul id="nav">
<li class="home-list"><a href="/index.php">Home</a></li>
<li class="classes-list"><a href="../classes/">Pilates</a>
<ul id="classes-sub">
<li><a href="../classes/pilates.php">Sign Up</a></li>
<li><a href="../classes/dance.php">Schedule</a></li>
<li><a href="../classes/gyrokinesis.php">Education</a></li>
</ul>
</li>
<li class="schedule-list"><a href="../schedule/">Dance</a>
<ul id="schedule-sub">
<li><a href="../schedule/class-schedule.php">Opportunities</a></li>
<li><a href="../schedule/enroll-private.php">Contact about </a></li>
<li><a href="../schedule/enroll-group.php">Enroll - Group</a></li>
</ul>
</li>
<li class="education-list"><a href="../education/">Gyrokinesis</a>
<ul id="education-sub">
<li><a href="../education/pilates/php/">What is it?</a></li>
<li><a href="../education/dance.php">Dance</a></li>
<li><a href="../education/gyrokinesis.php">Gyrokinesis</a></li>
</ul>
</li>
<li class="about-list"><a href="../about/">About</a>
<ul id="about-sub">
<li><a href="../about/philosophy.php">Philosophy</a></li>
<li><a href="../about/cheryl-lemmer.php">Cheryl Lemmer</a></li>
<li><a href="../about/in-the-news.php.php">In the News</a></li>
</ul>
</li>
<li class="contact-list"><a href="../contact/">Contact</a></li>
</ul>
</div>
<div id="home-container">
<div class="content-nav">heading
<div class="content-nav-head"></div>
</div>
<div class="content-wrap">
</div>
</div>
</div>
</body>
</html>
Relevant CSS : Code: html, body, form, fieldset {
height:100%;
margin: 0;
padding: 0;}
#Main_Container {
position:relative; margin:auto;
width:751px;
min-height:100%;
height:auto; !important;
height:700px;
background-color:#fff;
border:solid 1px #cccccc;
}
#Header-img {
margin:auto;
width:751px;
height:151px;
background:url(../images/header.gif) no-repeat;
background-color:#fff;
}
.content-wrap {
position:relative;
float:right;
width:520px;
height:600px;
border:solid 1px #000;
}
.content-nav {
float:left;
position:relative;
width:190px;
}
I have like this psudo-code: Code: <div id=parent position: absolute> <div id=child1 position: relative> </div> <div id=child2 position: absolute> </div> </div> As I fill up child1 with text or content, the parent grows along with it. I would like the child2 div to grow along with it as well. That is the concept. Here is the real code: Code: <div style="border: solid 3px; position: absolute; top: 0px; left: 0; width: 300px"> <div style="border: solid green; position: relative; width: 150px"> <p class="bodyCopy"> Lots of text to fill out the div and make it grow. <br/><br/> A lot more text I wish I knew that latin phrase everyone uses to fill out text, better than making stuff up <br/><br/>The next paragraph to make a div grow. <p class="bodyCopy"> Lots of text to fill out the div and make it grow. <br/><br/> A lot more text I wish I knew that latin phrase everyone uses to fill out text, better than making stuff up <br/><br/>The next paragraph to make a div grow. <p class="bodyCopy"> Lots of text to fill out the div and make it grow. <br/><br/> A lot more text I wish I knew that latin phrase everyone uses to fill out text, better than making stuff up <br/><br/>The next paragraph to make a div grow. </div> <div style="position: absolute; top: 0px; right: 0px; height: 100%; width: 10px; border: solid red 3px;"> </div> <div style="border: solid blue 1px; position: absolute; height: 10px; width: 10px; left: 200px; bottom: -14px;"> </div> </div> I also have a test page here This pretty much does what I would expect(or what I want) in FF, but not IE or Opera. I would like this to be dynamic and not use any javascript. Does anyone have any suggestions? Thanks for your time, CJB I have elements in a certain class and they may have child elements. I want to position the child so that it's TOP is at the bottom of the parent. Right now its top is at a fixed place relative to the parent. The parent is variable height. So in my css I have ul.parent ul { top: <bottom of parent> } How do I refre to it? Hello All... I'm making lay-out page based on 2 section (left panel and main) using div layer and wrap it under 1 parent layer. My confusion arise as IE and FF doesn't treat equally (again!) FF seems to ignore the parent CSS definition while IE obey it, so the background and border value i define in it's parent tag apply on IE but not in FF. Here is the code related : CSS Code: Original - CSS Code .all2 { width:900px; border-bottom: groove #888888 2px; border-left: groove #888888 2px; border-right: groove #888888 2px; margin-left: auto; margin-right: auto; margin-bottom:auto; text-align: left; background-color: #FFECC7; padding:0; } .leftpanel { float: left; display: block; width:125px; font: 10px Arial, Helvetica, sans-serif; text-align: left; padding-top: 25px; padding-left:20px; padding-right:20px; } .mainpanel { float: left; display: block; width: 694px; border-left: groove #888888 1px; padding-top: 15px; padding-left:20px; padding-right:20px; text-align:justify; }
.all2 {
The HTML : Code: <div class="all2"> <div class="leftpanel"> ..... Left Panel Text </div> <div class="mainpanel"> .... Main Body Text </div> </div> The Doc Type is XHTML 1.0 Transitional Many thanks in advanced Hello all. I want to hide everything in a div with a particular id except for a specific tag. In other words, I want to be able to do the following: Code:
<style type="text/css">
#outer { display: none; }
#outer p { display: block; }
</style>
<div id="outer">
<p>This is text. </p>
<h1>This is more text. </h1>
</div>
Where "This is text. " would appear but "This is more text. " would not appear? Is this possible? I understand the inheritance that #outer p is getting the display: none property from the parent but does not mean I cannot override it? A minimal example is easier than trying to describe the problem: analogdawn.com/test/overlap.html I understand what the problem is, the children are set to fill 100% of the parent, and that doesn't include the padding and border widths. My question is: How can I fix that easily, while still using padding and borders? I need to have a liquid width, so the DIV widths need to stay percentage based. Any help will be appreciated. Here is the code: Code: <html>
<head>
<style>
body {
background-color: grey;
}
#wrap {
width: 75%;
border: 2px solid red;
}
.border {
width: 100%;
border: 2px solid yellow;
padding: 2px;
background-color: orange;
}
.text {
color: white;
width: 100%;
border: 2px solid lightgreen;
padding: 2px;
background-color: black;
}
</style>
</head>
<body>
<div id="wrap">
<div class="border">
<div class="text">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Suspendisse pellentesque. Curabitur lectus. Etiam pellentesque, nunc et fringilla lacinia, ante velit blandit libero, nec sollicitudin nisl nunc eu dui. Duis eu sapien. Proin justo magna, fermentum quis, scelerisque eu, commodo et, quam. Pellentesque tortor nulla, auctor in, feugiat tempus, tempus vel, eros. Quisque elit. Aliquam quam orci, sagittis a, laoreet sit amet, euismod non, pede. Donec a lacus. Nullam porta, nibh eget sagittis volutpat, sapien nibh porttitor arcu, ut aliquam turpis justo ut erat. Integer ut velit. Mauris scelerisque bibendum sapien. Nulla imperdiet tincidunt urna. Praesent sollicitudin dolor pharetra mauris. In hac habitasse platea dictumst. Vestibulum at sapien nec justo egestas sollicitudin. </div>
</div>
</div>
</body>
</html>
Please look at this page - http://www.soarminden.com/glider-soaring-gallery.asp I put a red border on parent element. The children divs appear outside the parent at page bottom? Can someone shed some light please? I think the issue is with the styling of the div(s) innerLeftColumn or LeftColumn Code: <div style='width:670px;margin:0;border:1px solid red;min-height:500px;position:relative;'> <div style='width:175px;height:150px;float:left;margin:20px 0 20px 10px;clear:left;'> <img src='images/gallery/1/tom6.jpg' style='width:175px;height:150px;margin-bottom:3px;'/><br /> <h4 style='text-align:center;font-size:12px;margin:0;padding-bottom:10px'><a href='glider-soaring-gallery2.asp?subject=1' style='color:#00f;line-height:1;text-decoration:undeline !important;'>Tom Hall Soaring</a></h4> </div> <div style='width:175px;height:150px;float:left;margin:20px 0 20px 10px;'> <img src='images/gallery/12/phil-jones2.jpg' style='width:175px;height:150px;margin-bottom:3px;'/><br /> <h4 style='text-align:center;font-size:12px;margin:0;padding-bottom:10px'><a href='glider-soaring-gallery2.asp?subject=12' style='color:#00f;line-height:1;text-decoration:undeline !important;'>Phil Jones Goes Gold & Diamond!</a></h4> </div> <div style='width:175px;height:150px;float:left;margin:20px 0 20px 10px;'> <img src='images/gallery/13/wedding1.jpg' style='width:175px;height:150px;margin-bottom:3px;'/><br /> <h4 style='text-align:center;font-size:12px;margin:0;padding-bottom:10px'><a href='glider-soaring-gallery2.asp?subject=13' style='color:#00f;line-height:1;text-decoration:undeline !important;'>Wolfram and Lydia's Wedding</a></h4> </div> <div style='width:175px;height:150px;float:left;margin:20px 0 20px 10px;clear:left;'> <img src='images/gallery/15/DSC_6547.jpg' style='width:175px;height:150px;margin-bottom:3px;'/><br /> <h4 style='text-align:center;font-size:12px;margin:0;padding-bottom:10px'><a href='glider-soaring-gallery2.asp?subject=15' style='color:#00f;line-height:1;text-decoration:undeline !important;'>Brennan Hall Soaring Lake Tahoe</a></h4> </div> <div style='width:175px;height:150px;float:left;margin:20px 0 20px 10px;'> <img src='images/gallery/16/teresa.jpg' style='width:175px;height:150px;margin-bottom:3px;'/><br /> <h4 style='text-align:center;font-size:12px;margin:0;padding-bottom:10px'><a href='glider-soaring-gallery2.asp?subject=16' style='color:#00f;line-height:1;text-decoration:undeline !important;'>Teresa Luther</a></h4> </div> </div> I have set font size to 8px, and IE, FF, Safari and Chrome all respect this and size the font to the value in question, but Opera refuses to comply. When I tested it, I've found out it wont show fonts that are smaller than 10px or 1em. Is there a way to force Opera to display fonts less than 10px or 1em? i have a <div> inside another <div> I want the parent div to stay exactly where it is, and the child div to be inside it but with a 20px margin from the top. But when I add the 20px margin, the parent div moves downwards by 20px so the child div is still at the very top edge. Example of what is happening is he http://www.eionbryant.com/test.html I want the green area "#wrap" to be flush with the purple strip... and the grey area "#boxes" to begin inside the green area 20px down. I am learning css, so i would prefer someone explained how I am doing it wrong, rather than offering some work around. cheers Code: <body> <div id="strip"> </div> <div id="wrap"> <div id="boxes"> </div> </div> </body> </html> Code:
body {background:#FFFFF; font-family:"Trebuchet MS", Times, serif; padding:0; margin:0; position:relative; }
#strip {background:#663366; width:100%; height:10px; padding:0; border:0;}
#wrap {background:#00FFCC; width:100%; height:700px; margin:0 auto; }
#boxes {background:#666666; margin: 20px auto; width:800px; height:200px; clear:both;}
Is there a way of changing a parent class based on a child class like. ../[class=child]{ } This way i can change a parent class if it has this child Any ideas? Here's my situation... I have a div, that's a child to a div. I want the child to be behind the parent, but a part of it sticking out from the side and people can click on the child. Because of the cms\framework I'm working with, the div i want to click needs to stay a child of this particular parent. I can get it working in IE, but that's it. Also, the parent div MUST be set to overflow:visible, for other misc reasons. Take a look at the attached image for a visual of what I mean. Hi guys wonder if i could get a hand, I have a problem with an applet from the bbcnews website - essentially my portal has dynamic content, and sometimes this is pushed against the menu bar. It works fine, until used in IE6/7, when you roll over the parent on the menu bar, the child goes under the applet, again only in IE. I have tried every type of z-index trick going to no avail - is it an issue with the JScript or css, and more to the point is there a fix? Thanks a million for you help in advance, as theres no upload script here and this portal is in a secure location i'll copy the test code below for you to generate an htm with. <--------> CODE <--------> Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "(URL address blocked: See forum rules)">
<html xmlns="(URL address blocked: See forum rules)">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
body {
font-family: arial, helvetica, serif;
}
#nav, #nav ul { /* all lists */
padding: 0;
margin: 0;
list-style: none;
float : left;
width : 11em;
z-index:5;
}
#nav li { /* all list items */
position : relative;
float : left;
line-height : 1.25em;
margin-bottom : -1px;
width: 11em;
}
#nav li ul { /* second-level lists */
position : absolute;
left: -999em;
margin-left : 11.05em;
margin-top : -1.35em;
}
#nav li ul ul { /* third-and-above-level lists */
left: -999em;
}
#nav li a {
width: 11em;
w\idth : 10em;
display : block;
color : black;
font-weight : bold;
text-decoration : none;
background-color : white;
border : 1px solid black;
padding : 0 0.5em;
}
#nav li a:hover {
color : white;
background-color : black;
}
#nav li:hover ul ul, #nav li:hover ul ul ul, #nav li.sfhover ul ul, #nav li.sfhover ul ul ul {
left: -999em;
}
#nav li:hover ul, #nav li li:hover ul, #nav li li li:hover ul, #nav li.sfhover ul, #nav li li.sfhover ul, #nav li li li.sfhover ul { /* lists nested under hovered list items */
left: auto;
}
#content {
margin-left : 12em;
}
</style>
<script type="text/javascript"><!--//--><![CDATA[//><!--
sfHover = function() {
var sfEls = document.getElementById("nav").getElementsByTagName("LI");
for (var i=0; i<sfEls.length; i++) {
sfEls[i].onmouseover=function() {
this.className+=" sfhover";
}
sfEls[i].onmouseout=function() {
this.className=this.className.replace(new RegExp(" sfhover\\b"), "");
}
}
}
if (window.attachEvent) window.attachEvent("onload", sfHover);
//--><!]]></script>
</head>
<body>
<table width="200" border="0">
<tr>
<td><ul id="nav">
<li><a href="#">Percoidei</a>
<ul>
<li><a href="#">Remoras</a>
<ul>
<li><a href="#">Echeneis</a>
<ul>
<li><a href="#">Sharksucker</a></li>
<li><a href="#">Whitefin Sharksucker</a></li>
</ul>
</li>
<li><a href="#">Phtheirichthys</a>
<ul>
<li><a href="#">Slender Suckerfish</a></li>
</ul>
</li>
<li><a href="#">Remora</a>
<ul>
<li><a href="#">Whalesucker</a></li>
<li><a href="#">Spearfish remora</a></li>
<li><a href="#">Marlinsucker</a></li>
<li><a href="#">Remora</a></li>
<li><a href="#">Ceylonese remora</a></li>
</ul>
</li>
<li><a href="#">Remorina</a>
<ul>
<li><a href="#">White suckerfish</a></li>
</ul>
</li>
<li><a href="#">Rhombochirus</a>
<ul>
<li><a href="#">R. osteochir</a></li>
</ul>
</li>
</ul>
</li>
<li><a href="#">Tilefishes</a>
<ul>
<li><a href="#">Caulolatilus</a></li>
<li><a href="#">Lopholatilus</a></li>
<li><a href="#">Malacanthus</a></li>
</ul>
</li>
<li><a href="#">Bluefishes</a>
<ul>
<li><a href="#">Pomatomus</a></li>
<li><a href="#">Scombrops</a></li>
<li><a href="#">Sphyraenops</a></li>
</ul>
</li>
<li><a href="#">Tigerfishes</a>
<ul>
<li><a href="#">Amniataba</a></li>
<li><a href="#">Bidyanus</a></li>
<li><a href="#">Hannia</a></li>
<li><a href="#">Hephaestus</a></li>
<li><a href="#">Lagusia</a></li>
<li><a href="#">Leiopotherapon</a></li>
<li><a href="#">Mesopristes</a></li>
<li><a href="#">Pelates</a></li>
<li><a href="#">Pelsartia</a></li>
<li><a href="#">Pingalla</a></li>
<li><a href="#">Rhyncopelates</a></li>
<li><a href="#">Scortum</a></li>
<li><a href="#">Syncomistes</a></li>
<li><a href="#">Terapon</a></li>
</ul>
</li>
</ul>
</li>
<li><a href="#">Anabantoidei</a>
<ul>
<li><a href="#">Climbing perches</a>
<ul>
<li><a href="#">Anabas</a></li>
<li><a href="#">Ctenopoma</a></li>
</ul>
</li>
<li><a href="#">Labyrinthfishes</a>
<ul>
<li><a href="#">Belontia</a></li>
<li><a href="#">Betta</a></li>
<li><a href="#">Colisa</a></li>
<li><a href="#">Macropodus</a></li>
<li><a href="#">Malpulutta</a></li>
<li><a href="#">Parosphromenus</a></li>
<li><a href="#">Pseudosphromenus</a></li>
<li><a href="#">Sphaerichthys</a></li>
<li><a href="#">Trichogaster</a></li>
<li><a href="#">Trichopsis</a></li>
</ul>
</li>
<li><a href="#">Kissing gouramis</a></li>
<li><a href="#">Pike-heads</a></li>
<li><a href="#">Giant gouramis</a></li>
</ul>
</li>
<li><a href="#">Gobioidei</a>
<ul>
<li><a href="#">Burrowing gobies</a></li>
<li><a href="#">Dartfishes</a></li>
<li><a href="#">Eellike gobies</a></li>
<li><a href="#">Gobies</a></li>
<li><a href="#">Loach gobies</a></li>
<li><a href="#">Odontobutidae</a></li>
<li><a href="#">Sandfishes</a></li>
<li><a href="#">Schindleriidae</a></li>
<li><a href="#">Sleepers</a></li>
<li><a href="#">Xenisthmidae</a></li>
</ul>
</li>
</ul></td>
<td><!-- BBCi Syndication --><noscript><a href="http://www.bbc.co.uk/news" target="_BBC"><img src="http://newsimg.bbc.co.uk/shared/bsp/hi/services/htmlsyndication/img/synd_js_error_js-inactive.gif" width="165" height="200" border="0" alt="BBCi: Javascript is not available on this browser"/></a></noscript><script src="http://www.bbc.co.uk/syndication/html/jsserver/1096038497229" language="JavaScript" style="z-index:1;" type="text/javascript"></script><!-- /BBCi Syndication --></td>
</tr>
</table>
</body>
</html>
Hi Trying to make a box (with a div and css to control it) that will fit around an image and some text. The image is 90 x 90 pixels and should have a margin of 10 pixels around it so I want my box to be a minimum of 110 pixels high - heres the catch, the text is never the same length its actually printed into the page from some php so the box needs to never go smaller than the image and its margins however if the text is of greater height than those the box needs to expand. This is what I have so far... <style> .floatimage { float: left; padding: 1px; margin-right: 10px; background-color: #CCCCCC; } .floatbox { width: 380px; padding: 10px; background-color: #ff0000; height: 112px; } </style> <div class="floatbox"> <div class="floatimage"><img alt="" src="image/icons/icon.php" /></div> <p> The float property allows other text to fit itself around a box. This is particularly useful with images, but it can be used in any way. </p> <p> I've created this example with enough text that it should wrap around the above floated paragraph. Let's keep going to see what happens. Does it really do what I think it should do? </p> </div> but when i give the box a height its fixed and when i don't it can go smaller than the image - is there a way to do this? Thanks in advance a+ gar |
|||||||