|
CSS - How To Make A #box Heigh Expand To Contain Content
I've looked over a couple of answers and they didn't seem to help me.
I have a css "container" box defined like so, containing another "content" box. I'd like the container's height to stretch to contain whatever is in the content box. #container { width: 720px; height:????????????????; margin: auto; text-align: left; position: relative; } #content { position: relative; left:125px; top: 105px; width:500px; border:0px solid #000; } with html like so: <div id="container"> <div id="content"> </div> </div> The content always spills over, unless I set overflow, but that does not solve the problem. Similar TutorialsHey 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 I searched for something I want but I didn't find exactly that, or maibe something is wrong but in IE the page does not look ok. What I want is to have my page looks identical in IE as in FF or OPERA. I will explain here how I done the code PHP Code: <td rowspan="2" width="600" align="left" height="100%" valign="top" > <div class="brand_list_big"> <div class="box_header" style="background-color:#79B602;">CARS LISTED BY BRANDS</div> <div class="box_content" style="width:560px;"> <div class="brand_list_header"><span style="float:left;"><strong>Audi</strong></span><span style="float: right;">Total Cars : 2</span></div> <div class="car_list"> <span class="fleft"><a href="#">audi tt</a></span><span class="fright"><img 1><img 2></span><br> <span class="fleft"><a href="#">Saturn Sky Roadster</a></span><span class="fright"><img 1><img 2></span><br> </div> ... <div class="brand_list_header"><span style="float:left;"><strong>Alfa-Romeo</strong></span><span style="float: right;">Total Cars : 0</span></div> ... div.box_header { width: 99,5%; margin: 1px 1px 1px 1px; padding: 5px 0 5px 0; font-weight:bold; font-size: 12px; font-family:Verdana, Arial, Helvetica, sans-serif; } div.box_content { margin: 0 1px 1px 1px; padding: 5px 5px 5px 5px; height: 100%; scrollbar-face-color:#7098DF; scrollbar-highlight-color:#7098DF; scrollbar-3dlight-color:#FFFFFF; scrollbar-darkshadow-color:#FFFFFF; scrollbar-shadow-color:#919AA4; scrollbar-arrow-color:#FFCC00; scrollbar-track-color:#FFFFFF; } .brand_list_header { width: 99,5%; padding: 2px 0 2px 5px; background-color:#E3FEB1; border: 1px solid #CCCCCC; border-bottom: 0 solid #CCCCCC; margin-top: 10px; overflow:auto; /* I added this now and in ff and Opera everithing is ok, but not in IE*/ } .car_list { border: 1px solid #CCCCCC; background-color:#FFFFFF; clear:both; overflow:auto; } .fleft { float: left; margin: 2px 2px 2px 10px; clear:left; } .fright { float: right; } img.new_img { margin: 2px 10px 0 0 ; /*the img from my code( <img 1>, <img 2> ) have this class*/ } Any Ideea why in IE the divs are not ok ? First I tried to list the cars from a brand using <li> elements but I didn't know how to align the images ( icons ) at the right side, like are now. 10x in advance, waiting for a response see ya 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! 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! Hello, I'm working on a website for a client: http://evoxdesigns.com/rimlox/ http://evoxdesigns.com/rimlox/rimlox.css My current problem is getting the body to scale to 100% height. At the moment, it stretches to 100% of the browser window, which is great, but if if the content within all the nested divs expands to a height larger than that of the screen, the background does expand with it. In my troubleshooting, I gave the body a 1px border and found out that the body remains at the fixed size of the window even though the content within it expands. I tried messing with the overflow property, all to no avail. I'd appreciate any help I can get on this one. I have nested my content divs within a centered wrapper div. the wrapper div is controlled by an external css file. when content is added to the nested divs they grow outside of the wrapper div. is there a way to force the wrapper to grow with the content like tables do? The CSS: #wrapper { margin-top: 20px; margin-right: auto; margin-bottom: 20px; margin-left: auto; border-top-width: 2px; border-right-width: 2px; border-bottom-width: 2px; border-left-width: 2px; border-top-style: solid; border-right-style: solid; border-bottom-style: solid; border-left-style: solid; border-top-color: #000000; border-right-color: #000000; border-bottom-color: #000000; border-left-color: #000000; position: relative; width: 760px; background-color: #FFFFCC; left: auto; right: auto; height: 400px; z-index: 1; } The HTML: (attached) I'm a newbie to css. I'm trying to convert tables to css and having a bit of a tough time. Latest problem - create a window or container with a one line border with minimum height, say 600px, but the height will expand as the content grows. Any help? Thank you kindly! First off, I apologize if my explanation is bad. Also, please refer to the link below. You will have to delete from the spaces from the URL because I was not allowed to post a url since I am a new user :/ http://img240. imageshack. us/my.php?image=forumexplanationje5.jpg This is what I want to do... I want to make a "table" in css. I want to make the "table" always be 890px. The css for the orange items would be .orange { margin:0px; padding:20px; } Now, I want the width of the orange items to be the width of the text in them + the padding. So basically the width is going to be dependant on the text in the tag. My problem is that I don't know how to make the blue part fill up the rest of space without knowing what the width of the orange part is. Please help, thanks. I've got the div below Code:
<style>
div
{
height: 100px;
position: absolute;
overflow-y: auto;
}
</style>
<div>
Some text goes here<br>
Some text goes here<br>
Some text goes here<br>
Some text goes here<br>
Some text goes here<br>
Some text goes here<br>
Some text goes here<br>
Some text goes here<br>
Some text goes here<br>
</div>
This div is the width required to hold the text. Unfortunately once the scroll bar is added to the div it obscures the text. Is there a way to make the div expand horizontally that bit extra required by the scrollbar? I know i can put padding-right on the div. I'm looking for a way that will only expand if further if a scrollbar is needed. Hi guys! Just wondering if this is an easy fix, otherwise I'll just switch the layout to a table. HTML: Code: <div id="box"> <div id="left"> <h1>MENU left</h1> <p>Content on the left.</p> </div> <div id="content"> <p> content... </p> </div> <div id="right"> <p>content...</p> </div> </div> CSS: Code:
#box {
width:750px;
margin: 0px auto;
padding:0px;
border:1px;
}
#content {
width:400px;
padding:0px;
float:left;
overflow: auto;
}
#left {
width:173px;
padding:0px;
float:left;
background-color: #223344;
border-color:white;
}
#right {
width:173px;
padding:0px;
float:left;
background-color: #223344;
border-color:white;
}
I want all three columns to expand vertically to the size of the largest column. As of right now it's set up using CSS and I would prefer to keep it that way, but if switching the layout to tables would be much easier, I would be happy to do that too. Thanks for the help in advance! Quick nagging question that's been bothering me for some time. Fortunately, I have a link to explain the problem. If you go to our web page (link below), you will see that we have a DIV section on the left side of the page which displays a mini You Tube video, along with a few other buttons: http://bit.ly/gL9sA8 The problem is that when you shrink the window, that particular div will shy away outside the bounds of the browser window. Is there anyway to not have it disappear, but at the same time, not have the main content overlap it in anyway. In other words, how would you code the DIV tag so that the following two things happen: 1. It's always in view on the LEFT side of the webpage 2. The main DIV stops against it, and doesn't overlap it if resized As you can see, if you shrink the size of the window, our main div area (div id: mainWrapper) is always going to be centered which is the most important thing. However, we want to have a left (or right) side area to display buttons like that. Here is the current code for that left sided DIV column: Code: <div style="position:fixed; margin-left: -180px; top: 75px;"> // My html content for mini You Tube video & button is here </div> The problem is that if a person has a low resolution monitor, this left hand div is out of view and never seen.....or even worse, it's partially seen and not fully displayed because it's hiding outside the bounds of the window. My goal: To have it fixed to either the outer LEFT or RIGHT side of the webpage, just along the edge of the mainWrapper as you see it now. If I can clear anything up as to what I'm trying to explain, please let me know. I hope one of you awesome gurus can point me in the right direction! if you didnt understand the subject i'll try and explain it a bit better here! This is my problem in IE my page looks like this http://www.readyflowers.com.au/div-fill.gif But what i want is when there is no content for those divs not to appear so it would look like this (In firefox it works!) http://www.readyflowers.com.au/div-fill-firefox.gif Ok, I have basic CSS knowledge but need some help. Here's what I'd like to do: I take trips and post pictures on my site. I use lighthouse to display the images, so each image has a separate filename and caption, and each group of images has a separate group name. Under "Ski Trip", for instance, I'll have Img 1, "Skiing"; Img 2, "More skiing"; etc. It's relatively tedious to create page after page that uses the same format. I use CSS for style, the menu, and Lighthouse, but is there way that I could create a new page entitled "New ski trip.html" and in that file just have a list of the image filenames, captions, etc., that end up all using the same html format to display the images? I don't think I'm being terribly clear (sorry) ... big kudos to anyone who can help. Hi, I have a content box inside a layer in Dreamweaver and I want to be able to align this content box to the right hand side of the layer, rather than on the left side. Is it possible to do this? Here is the code: Code:
<head>
<style type="text/css">
.xsnazzy h1 {
margin:0;
font-size:1.2em;
padding:0 10px 5px 10px;
border-bottom:1px solid #d76f0a;
}
.xsnazzy p {
margin:0;
padding:5px 10px;
font-size:10px;
}
.xsnazzy {
background:transparent;
width:180px;
float:left;
margin-right:10px;
}
.xtop, .xbottom {
display:block;
background:transparent;
font-size:1px;
}
.xb1, .xb2, .xb3, .xb4 {
display:block;
overflow:hidden;
}
.xb1, .xb2, .xb3 {
height:1px;
}
.xb2, .xb3, .xb4 {
background:#fff;
border-left:1px solid #d76f0a;
border-right:1px solid #d76f0a;
}
.xb1 {
margin:0 4px;
background:#d76f0a;
}
.xb2 {
margin:0 3px;
border-width:0 1px;
}
.xb3 {
margin:0 2px;
}
.xb4 {
height:2px;
margin:0 1px;
}
.xboxcontent {
display:block;
background:#fff;
border:0 solid #d76f0a;
border-width:0 1px;
}
.color_a {
background:#f69b43;
color:#fff;
}
.color_b {
background:#d76f0a;
color:#000;
}
.color_c {
background:#758279;
color:#fff;
}
</style>
</head>
<body>
<div id="Layer9" style="position:absolute; width:176px; height:115px; z-index:8; left: 332px; top: 157px;">
<div align="center" class="xsnazzy"> <b class="xtop"><b class="xb1"></b><b class="xb2 color_a">
</b><b class="xb3 color_a"></b><b class="xb4 color_a"></b></b>
<div align="center" class="xboxcontent">
<h1 align="center" class="color_a"><font size="2" face="Verdana, Arial, Helvetica, sans-serif">Shopping
Basket</font></h1>
<p align="center"> </p>
<p align="center"> </p>
<p align="center"> </p>
</div>
<b class="xbottom"><b class="xb4"></b><b class="xb3"></b> <b class="xb2"></b><b class="xb1"></b></b>
</div>
</div>
</body>
CSS newb here and this is my first full CSS page layout ever, so go easy. Some of the page elements do not stretch properly to match the page content. I also tried to add a few bits to make a sticky footer, and in doing so I sort of confused myself as to where the problem is. Here's a link to the page: http://www.crackin.com/cbled/index.html and here's the code: Code:
body {font: 75% Verdana, Arial, Helvetica, sans-serif;background: #FFFFFF;margin: 0;padding: 0;text-align: center;color: #000000;height: 100%;}
html {height: 100%;}
* html #nonFooter {height: 100%;}
.oneColFixCtr #nonFooter {width: 923px;background: #FFFFFF;margin: 0 auto;border: none;text-align: left;position: relative;min-height: 100%;z-index:3;}
.oneColFixCtr #content {padding: 0 0 56 0; height:auto;}
#mainlayout {position:relative;left:0px;top:0px;width:923px;}
#liberty-header {position:absolute;left:231px;top:0px;width:114px;height:151px;}
#logo-orb {position:absolute;left:0px;top:24px;width:231px;height:156px;}
#header-slogan {position:absolute;left:231px;top:151px;width:692px;height:29px;}
#logo-ledind {position:absolute;left:0px;top:180px;width:231px;height:66px;}
#header-breaktop {position:absolute;left:231px;top:180px;width:692px;height:66px;}
#header-breakbase {position:absolute;left:0px;top:246px;width:923px;height:57px;}
#liberty-main {position:absolute;left:211px;top:303px;width:366px;height:409px;}
#navbarbreak {position:absolute;left:231px;margin-top:10px;width:2px;height:95%;background-color:#BBB; z-index:2;}
#pagecontent {position:absolute;left:253px;top:303px;width:650px;height:10px;}
#navbar {position:absolute;left:0px;top:303px;width:233px;height:350px;}
#navbar-home {float:left;margin-top:15px;width:100%;text-align:right;z-index:1;font-weight:bold;font-size:110%;}
#navbar-info {float:left;margin-top:5px;width:100%;text-align:right;z-index:1;font-weight:bold;font-size:110%;}
#navbar-link3 {float:left;margin-top:5px;width:100%;text-align:right;z-index:1;font-weight:bold;font-size:110%;}
#navbar-link4 {float:left;margin-top:5px;width:100%;text-align:right;z-index:1;font-weight:bold;font-size:110%;}
#navbar a {display:block;width:100%;height:100%;text-decoration:none;color:#333;background-color:#EEE;padding:4px 0px;}
#navbar a:hover {background-color:#9ADF86;}
#footer {position:relative;width: 923px;margin: -56px auto 0 auto;z-index:4;}
#footer-left {position:absolute;left:31px;top:0px;width:18px;height:56px;}
#footer-bg {position:absolute;left:49px;top:0px;width:825px;height:56px;background-color:#329428}
#footer-right {position:absolute;left:874px;top:0px;width:18px;height:56px;}
#greenbreak-z {z-index:1;}
#greenbreak {position:absolute;left:0px;top:200px;width:100%;height:123px;background:url(images/mainbg_horiz.jpg);background-repeat:repeat-x;}
#page-edges-a {position:absolute;left:0;top:0;width:100%;height:100%;z-index:2;}
#page-edges-b {position:relative;margin:0 auto;width:923px;height:100%;}
#mainbg-leftvert {position:absolute;left:-16px;top:0px;width:16px;height:100%;background:url(images/mainbg_leftvert.png);background-repeat:repeat-y;}
#mainbg-rightvert {position:absolute;left:923px;top:0px;width:16px;height:100%;background:url(images/mainbg_rightvert.png);background-repeat:repeat-y;}
#clear {clear:both;}
-->
</style></head>
<body class="oneColFixCtr">
<div id="nonFooter">
<div id="content">
<div id="mainlayout">
<div id="liberty-header"><img src="images/liberty_header.jpg" width="114" height="151" alt=""></div>
<div id="logo-orb"><img src="images/logo_orb.jpg" width="231" height="156" alt=""></div>
<div id="header-slogan"><img src="images/header_slogan.png" width="692" height="29" alt=""></div>
<div id="logo-ledind"><img src="images/logo_ledind.jpg" width="231" height="66" alt=""></div>
<div id="header-breaktop"><img src="images/header_breaktop.jpg" width="692" height="66" alt=""></div>
<div id="header-breakbase"><img src="images/header_breakbase.jpg" width="923" height="57" alt=""></div>
<div id="liberty-main"><img src="images/liberty_main.jpg" width="366" height="409" alt=""></div>
<div id="navbar">
<div id="navbar-home"><a href="#">home </a></div>
<div id="navbar-info"><a href="#">company info </a></div>
<div id="navbar-link3"><a href="#">link3 </a></div>
<div id="navbar-link4"><a href="#">link4 </a></div>
<div id="navbarbreak"></div>
</div>
<div id="pagecontent" align="justify">
<p>Lorem ipsum, etc etc...</p>
</div>
</div>
</div>
</div>
<!--PAGE DROPSHADOW-->
<div id="page-edges-a">
<div id="page-edges-b">
<div id="mainbg-leftvert"></div>
<div id="mainbg-rightvert"></div>
</div>
</div>
<!--GREEN BACKGROUND-->
<div id="greenbreak-z">
<div id="greenbreak"></div>
</div>
<!--FOOTER-->
<div id="footer">
<div id="footer-left"><img src="images/footer_left.gif" width="18" height="56" alt=""></div>
<div id="footer-bg"></div>
<div id="footer-right"><img src="images/footer_right.gif" width="18" height="56" alt=""></div>
</div>
</body>
</html>
Any help is much appreciated. i have a base page that i use for a multi-page site, but i'd like to be able to insert more and more content, and have the page size accordingly. i think the problem is that the content is technically floating...or something, it's a cold fusion search result in a cart. i don't know, i might be asking for a miracle here- if you have an idea, let me know. I actually have two problems... Installing hte firebug plugin for firefox may ease helping me out... The problem is with http:// kthxbai2u<dot>com I cant for the life of me center the "content" div. I have tried every method I found on the first 4 pages of Google. The only thing I can think of is that it is inheriting something wierd or I am missing something simple... The second problem, I can't seem to make the left and right side bar expand to meet up with the footer wayy down at the bottom of the page. I want that div to make a column the whole way down. If anyone can help me out, it would be more than appreciated! Thanks Hello everyone! my apologies if this is a dumb/old question - I did a search but didn't find anything like this... Question is, how can I make a page within an Iframe inherit the parent pages css? Reason is, I have a site with a css switcher (using php - a copy and paste job, still learning!) that uses iframes. Or would I be better ditching the iframes and using hidable DIV's? cheers guys! 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> |
|||||||