|
CSS - 3 Div's Inside A Container Must All Be Same Height
Hi, I have 3 div boxes in a container, they sit side by side (i.e. 3 in a row) with different amounts of text in each div. The dilemma is that I need all the div's to be the same height as the tallest div.
can someone tell me how to do this? thanks Similar TutorialsWell I'm running into just a few difficulties trying to enclose a object inside of another container. The problem is that the container does not repeat the background when I lengthen the boxes within it. Can someone with a excellent CSS eye take a look at this and let me know what I'm doing wrong. I've played with overflow:auto; but the problem is that I need to set the width of the container at 990px, and it doesn't seem to work if I statically set the width. http://www.obelix.ca/templates/index.html Thanks for taking the time to read my question. I have 2 containers, one inside the other. If the inside container grows I want the outside container to grow with it. Is that possible? Here is what I have so far... datacontainer is not growing when piccontainer grows. HTML: Code: <body> <div id="datacontainer"> <div id="piccontainer"><img src="../../My Pictures/Copy of PiercedDesktop51024x768.jpg" alt="" /></div> Data</div> </body> CSS: Code: body {
background-color: #000000;
margin-top: 0px;
font-family: Arial, Helvetica, sans-serif;
background-position: top left;
background-repeat: repeat-y;
background-image: url('VSADImages/Border.jpg');
}
#datacontainer {
margin: 0;
padding: 0px;
border-style: solid;
border-color: yellow;
background-color: #00FFFF;
border-width: 2px;
height: auto;
}
#piccontainer {
float: left;
width:700px;
margin: 0;
border-style: solid;
border-color: green;
background-color: #FF6600;
border-width: 2px;
}
Iv got my boxes sorted!!! but im quite newbie to CSS layout and stuff... so i want to put two boxes in side my container box side by side. i decided to use float... but they float outside my container box, which i suppose is what they are supposed to do. This is what im trying to achieve. Code: ---------------------------------------------------- | --------------------- --------------------- | | | | | | | | | | | | | | | Float Left | | Float right | | | | | | | | | | | | | | | --------------------- --------------------- | ---------------------------------------------------- Hi, i seem to be having a problem displaying my container as 100%. I have a centred column with a grey background with the following as my html and my css: Code: <html> <head> <link rel="stylesheet" href="default.css" type="text/css" /> </head> <body> <div id="container"><!--BEGIN CONTAINER--> <div id="logo"></div> <div id="motto"> <div id="telno"></div> <div id="quote"></div> </div> <div id="navigation"> </div> <div id="search"><!--BEGIN SEARCH--> </div> <div id="banner_1"></div> <div class="box"></div> <div class="box"></div> <div class="box"></div> <div class="empty"></div> <div class="box2"></div> <div id="contenthome"></div> <div id="sectiontwo"></div> <div id="sectionthree"></div><!--END SECTION THREE--> <div id="footer"></div><!--END FOOTER--> </div><!--END CONTAINER--> </body> </html> CSS Code:
*{
padding:0; margin:0;
}
body {
height: 100%; font-family: Arial, Helvetica, sans-serif; font-size: 12px;
color: #797979; margin: 0; padding: 0; background-color:#dfdede;
}
div {
border: 1px solid #000;
}
a {
font-family: Arial, Helvetica, sans-serif; font-size: 11px;
color: #66308f; text-decoration:none;
}
#container {
height: 100%; width: 927px; margin: auto;
padding-left: 10px; padding-right: 10px; background-color: #ffffff;
min-height: 100%; /* for mozilla */
}
#logo {
background-image:url(../images/logo.jpg); background-repeat:no-repeat;
height: 164px; width: 374px; float: left; margin-top: 0px; margin-left: 0px;
}
#motto {
height: 164px; width: 549px; float: right; margin-top: 0px;
}
#telno {
height: 58px; width: 549px; float: right; margin-top: 24px; text-align:right;
}
#quote {
height: 80px; width: 549px; float: right; margin-top: 0px;
font-size: 25px; color:#2a4b59; text-align:right;
}
/* top menu navigation */
#navigation {
height: 35px; width: 670px; float: left; margin-top: 0px;
}
/* search box */
#search {
height: 35px;width: 253px; float: left;
margin-top: 0px; background-color:#66308f; text-align:center; vertical-align:middle;
}
.button {margin:0px 0 -3px 5px;}
.inputbox {
width: 13em; margin:2px 0 0px 0px; color: #878484; text-align:left;
}
/* search box end */
.box{
height:52px; width:205px; float: right;
margin-top: 0px; margin-right: 0px; margin-bottom: 4px; margin-left:0px;
}
.empty {
height: 94px; width: 205px; float:right;
}
.box2{
height:141px; width:205px; float: right;
margin-top: 0px; margin-right: 0px; margin-bottom: 4px; margin-left:0px;
}
#contenthome {
height: 50px; width: 927px; float: left;
margin-top: 5px; margin-left: 0px;
}
#sectiontwo {
height: 50px; width: 927px; float: left;
margin-top: 0px; margin-bottom: 10px;
}
#sectionthree {
height: 50px; width: 927px; float:left;
margin-top: 0px; margin-bottom: 15px;
}
#footer {
background-color:#b3d800; height: 56px; width: 927px;
float: left; margin-top:0px;
}
#banner_1 {
height: 413px; width: 701px; float: left; margin-top: 0px;
margin-left: 0px; border-right-color: #FFFFFF; border-right-style: solid; border-right-width: 2px;
}
but for some reason i cant seem to get the container to fill the complete height of the page and i cant seem to locate what error i have made. If somebody could please help, as i would like this to work in all browsers. Thanks in advance. Hey guys, I have a web layout with 1 centre column with a height of 100% (i.e. it fills the whole window from top to bottom). I have achieved this using height: 100% and its worked so far but I've just hit a problem. When the content is less than the height of the browser window it is fine - the white extends to the bottom perfectly in both FF and IE. However, if the content extends over the height of the window, the white background stops. So the CSS is making the column the height of the window without taking into consideration the content that is inside it so that when you scroll down, the background dissappears. Any help would be appreciated. The page that works fine: http://www.dgwd.co.uk/1476/site/aircadets/index.php The page that doesnt: http://www.dgwd.co.uk/1476/site/aircadets/uniform.php Thanks a lot guys. Dan I'm pretty new to using CSS so please be gentle I'm trying to hack (develop is to lofty a word at this point) this tableless page and get the bg image to stick to the right/top corner of the "content" div. IE6 renders it pretty well but Firefox (my preferred browser) is horrendous. The image size is 400x392. Any thoughts or a good reference on this would be greaty appreciated. <!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 name="generator" content="http://www.inknoise.com/experimental/layoutomatic.php" /> <style type="text/css"> #container { width: 760px; width: 780px; width: 760px; border: 1px solid gray; margin: 10px; margin-left: auto; margin-right: auto; padding: 10px; } #banner { padding: 5px; margin-bottom: 5px; background-color: rgb(213, 219, 225); } #content { padding: 5px; margin-left: 215px; background-color: gray; background-attachment: fixed; background-image: url(images/bg_run.jpg); background-repeat: no-repeat; height: 400px; background-position: right top; } #sidebar-a { float: left; width: 200px; \width: 210px; w\idth: 200px; margin: 0; margin-right: 5px; padding: 5px; background-color: rgb(235, 235, 235); } #footer { clear: both; padding: 5px; margin-top: 5px; background-color: rgb(213, 219, 225); } </style> </head> <body> <div id="container"> <div id="banner">Banner</div> <div id="sidebar-a">Sidebar</div> <div id="content">Content</div> <div id="footer">Footer</div> </div> </body> </html> I am trying to get the blue box (which is the content container) to be big enough to cover both divs "cbox1" and "cbox2". Right now it only covers the <h1> title and neither of the cboxs. I also need these two cbox's to be side by side instead of on top of or below each other. I can achieve one of these at a time but not both when I play around with the float values of the cbox's. I would appreciate any help at getting the results I desire. Thanks. Here is the basic html I am working with. Code: <!DOCTYPE html>
<html>
<head>
<style media="screen" type="text/css">
#content {
margin:0px;
padding:0px;
background-color:#90C0FF;
}
#cbox1 {
border-radius:15px;
border: 2px solid #000000;
width:250px;
background-color:#FFFFFF;
padding:20px;
float:left;
}
#cbox2 {
border-radius:15px;
border: 2px solid #000000;
width:200px;
background-color:#FFFFFF;
padding:20px;
margin-left:10px;
float:left;
}
</style>
</head>
<body>
<div id="content">
<h2>LOREM IPSUM:</h2>
<div id="cbox1">
"Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
Section 1.10.32 of "de Finibus Bonorum et Malorum", written by Cicero in 45 BC
</div>
<div id="cbox2">
But who has any right to find fault with a man who chooses to enjoy a pleasure that has no annoying consequences, or one who avoids a pain that produces no resultant pleasure?
</div>
</div>
</body>
</html>
You can pop this right into try it: http://www.w3schools.com/html/tryit.asp?filename=tryhtml_basic Thanks for taking the time to read my question. I have posted what I'm working on at http://www.scopicdesigns.com/ZoneAll/NewIndex.htm I have put a yellow background on the main nav container to illustrate my problem. There seems to be extra height to the .NavContainer in IE6, but it is not there in IE7 or FF. I've tried adjusting all my margins and paddings, but nothing seems to work. I also tried increasing the width of the .NavContainer, thinking that there was some sort of overflow from the last button or something, but that didn't work either. How do I get rid of this? Thanks, Brad Hi I have searched on this subject, and found the Faux Column articles, but I have failed to make use of these. The following page shows the problem LINK And CSS The text in the container div leads off the bottom of the page. The CSS is a bit of a mess at the moment because I have been messing with it trying to get this to work. I need the background of the container div to extend to the bottom of the content div. I have set min-height and heights for the body and html tags, and then for the container, as I know that the height is only taken into account if the parent has a height too. This does not work. Any suggestions? Thanks Jake Hi, Hopefully someone here will have experienced this issue before..what I have done is create a div to contain all of the layout elements I want on my page. I started inserting a few of these and I noticed the container div doesn't stretch unless I specify a height which I wanted to avoid should I create an pages that have a limited amount of content and don't fill the page. Here is what I have so far here and this is what I want to achieve here As you can see I have specified a height value in the sceond example, is there an alternative way of doing this? Also is the best way to position the footer at the bottom of the container like so Code: position:absolute; bottom:0px; Thanks for any help guys. p.s. Here are my stylesheets so far Stylesheet 1 Code:
/* CSS Document */
body {
background:#CCC url(images/Bg.gif) repeat top left;
text-align:center;
}
#container {
background:#FFF;
width:715px;
border:1px solid #000;
}
#header {
background:#000 url(images/Header1.jpg) repeat top left;
width:703px;
height:172px;
border-left:1px solid #000;
border-right:1px solid #000;
border-bottom:1px solid #000;
border-top:0px none #000;
position:absolute;
left: 5px;
top: 5px;
}
#logo {
background:#000 url(images/Contemporary-Classics.gif) repeat top left;
width:383px;
height:52px;
position:absolute;
left: 15px;
top: 15px;
}
#footer {
width:715px;
background-color:#A18A39;
padding:0px;
margin:0px;
}
Stylesheet 2 Code:
/* CSS Document */
body {
background:#CCC url(images/Bg.gif) repeat top left;
text-align:center;
}
#container {
background:#FFF;
width:715px;
border:1px solid #000;
position:relative;
height:500px;
}
#header {
background:#000 url(images/Header1.jpg) repeat top left;
width:703px;
height:172px;
border-left:1px solid #000;
border-right:1px solid #000;
border-bottom:1px solid #000;
border-top:0px none #000;
position:absolute;
left: 5px;
top: 5px;
}
#logo {
background:#000 url(images/Contemporary-Classics.gif) repeat top left;
width:383px;
height:52px;
position:absolute;
left: 15px;
top: 15px;
}
#footer {
width:715px;
background-color:#A18A39;
padding:0px;
margin:0px;
position:absolute;
bottom:0px;
}
Hi guys, I have a small problem which is driving me crazy. I have a main container with two containers inside named left and right. I want a border on the main container, but i do not know the height of the main container as this will depend on the content in 'left' and 'right'. So what should I set the height of the main container to? I've tried 100% but this does not work and if I omit the geight property the main container does not show up. Any ideas? Thanks in advance, Rob. I need to know what attributes to give to my container div in order for this to work correctly. I have a div and within it are many floating divs, each that contain an image thumbnail and caption. I do it this way so the images fit on the page dynamically and it works great. Unfortunately the container div does not wrap around the height of the images. This causes content that should appear below the images to show up behind them. How do I make the container div actually stretch around all the child divs? here is a code sample Code: <div style="border: 1px solid blue; width: 100%; display : inline;"> <div style="float: left; margin: 2px; height: 150px;"><a href="/images/media/182_YachtClub_0003.jpg" rel="lightbox[post182]" title=" size 84k"><img border="1" src="/images/media/thumbs/182_YachtClub_0003.jpg" alt="" /></a><br/></div> <div style="float: left; margin: 2px; height: 150px;"><a href="/images/media/182_YachtClub_0004.jpg" rel="lightbox[post182]" title=" size 57k"><img border="1" src="/images/media/thumbs/182_YachtClub_0004.jpg" alt="" /></a><br/></div> <div style="float: left; margin: 2px; height: 150px;"><a href="/images/media/182_YachtClub_0006.jpg" rel="lightbox[post182]" title=" size 57k"><img border="1" src="/images/media/thumbs/182_YachtClub_0006.jpg" alt="" /></a><br/></div> <div style="float: left; margin: 2px; height: 150px;"><a href="/images/media/182_YachtClub_0007.jpg" rel="lightbox[post182]" title=" size 57k"><img border="1" src="/images/media/thumbs/182_YachtClub_0007.jpg" alt="" /></a><br/></div> <div style="float: left; margin: 2px; height: 150px;"><a href="/images/media/182_YachtClub_0011.jpg" rel="lightbox[post182]" title=" size 48k"><img border="1" src="/images/media/thumbs/182_YachtClub_0011.jpg" alt="" /></a><br/></div> <div style="float: left; margin: 2px; height: 150px;"><a href="/images/media/182_YachtClub_0012.jpg" rel="lightbox[post182]" title=" size 49k"><img border="1" src="/images/media/thumbs/182_YachtClub_0012.jpg" alt="" /></a><br/></div> <div style="float: left; margin: 2px; height: 150px;"><a href="/images/media/182_YachtClub_0013.jpg" rel="lightbox[post182]" title=" size 62k"><img border="1" src="/images/media/thumbs/182_YachtClub_0013.jpg" alt="" /></a><br/></div> <div style="float: left; margin: 2px; height: 150px;"><a href="/images/media/182_YachtClub_0015.jpg" rel="lightbox[post182]" title=" size 49k"><img border="1" src="/images/media/thumbs/182_YachtClub_0015.jpg" alt="" /></a><br/></div> <div style="float: left; margin: 2px; height: 150px;"><a href="/images/media/182_YachtClub_0016.jpg" rel="lightbox[post182]" title=" size 68k"><img border="1" src="/images/media/thumbs/182_YachtClub_0016.jpg" alt="" /></a><br/></div> <div style="float: left; margin: 2px; height: 150px;"><a href="/images/media/182_YachtClub_0019.jpg" rel="lightbox[post182]" title=" size 62k"><img border="1" src="/images/media/thumbs/182_YachtClub_0019.jpg" alt="" /></a><br/></div> <div style="float: left; margin: 2px; height: 150px;"><a href="/images/media/182_YachtClub_0020.jpg" rel="lightbox[post182]" title=" size 41k"><img border="1" src="/images/media/thumbs/182_YachtClub_0020.jpg" alt="" /></a><br/></div> <div style="float: left; margin: 2px; height: 150px;"><a href="/images/media/182_YachtClub_0021.jpg" rel="lightbox[post182]" title=" size 63k"><img border="1" src="/images/media/thumbs/182_YachtClub_0021.jpg" alt="" /></a><br/></div> <div style="float: left; margin: 2px; height: 150px;"><a href="/images/media/182_YachtClub_0022.jpg" rel="lightbox[post182]" title=" size 36k"><img border="1" src="/images/media/thumbs/182_YachtClub_0022.jpg" alt="" /></a><br/></div> <div style="float: left; margin: 2px; height: 150px;"><a href="/images/media/182_YachtClub_0026.jpg" rel="lightbox[post182]" title=" size 41k"><img border="1" src="/images/media/thumbs/182_YachtClub_0026.jpg" alt="" /></a><br/></div> <div style="float: left; margin: 2px; height: 150px;"><a href="/images/media/182_YachtClub_0028.jpg" rel="lightbox[post182]" title=" size 50k"><img border="1" src="/images/media/thumbs/182_YachtClub_0028.jpg" alt="" /></a><br/></div> <div style="float: left; margin: 2px; height: 150px;"><a href="/images/media/182_YachtClub_0030.jpg" rel="lightbox[post182]" title=" size 52k"><img border="1" src="/images/media/thumbs/182_YachtClub_0030.jpg" alt="" /></a><br/></div> <div style="float: left; margin: 2px; height: 150px;"><a href="/images/media/182_YachtClub_0031.jpg" rel="lightbox[post182]" title=" size 54k"><img border="1" src="/images/media/thumbs/182_YachtClub_0031.jpg" alt="" /></a><br/></div> <div style="float: left; margin: 2px; height: 150px;"><a href="/images/media/182_YachtClub_0032.jpg" rel="lightbox[post182]" title=" size 63k"><img border="1" src="/images/media/thumbs/182_YachtClub_0032.jpg" alt="" /></a><br/></div> <div style="float: left; margin: 2px; height: 150px;"><a href="/images/media/182_YachtClub_0033.jpg" rel="lightbox[post182]" title=" size 55k"><img border="1" src="/images/media/thumbs/182_YachtClub_0033.jpg" alt="" /></a><br/></div> <div style="float: left; margin: 2px; height: 150px;"><a href="/images/media/182_YachtClub_0034.jpg" rel="lightbox[post182]" title=" size 41k"><img border="1" src="/images/media/thumbs/182_YachtClub_0034.jpg" alt="" /></a><br/></div> <div style="float: left; margin: 2px; height: 150px;"><a href="/images/media/182_YachtClub_0035.jpg" rel="lightbox[post182]" title=" size 51k"><img border="1" src="/images/media/thumbs/182_YachtClub_0035.jpg" alt="" /></a><br/></div> <div style="float: left; margin: 2px; height: 150px;"><a href="/images/media/182_YachtClub_0037.jpg" rel="lightbox[post182]" title=" size 48k"><img border="1" src="/images/media/thumbs/182_YachtClub_0037.jpg" alt="" /></a><br/></div> <div style="float: left; margin: 2px; height: 150px;"><a href="/images/media/182_YachtClub_0038.jpg" rel="lightbox[post182]" title=" size 61k"><img border="1" src="/images/media/thumbs/182_YachtClub_0038.jpg" alt="" /></a><br/></div> <div style="float: left; margin: 2px; height: 150px;"><a href="/images/media/182_YachtClub_0039.jpg" rel="lightbox[post182]" title=" size 30k"><img border="1" src="/images/media/thumbs/182_YachtClub_0039.jpg" alt="" /></a><br/></div> <div style="float: left; margin: 2px; height: 150px;"><a href="/images/media/182_YachtClub_0040.jpg" rel="lightbox[post182]" title=" size 57k"><img border="1" src="/images/media/thumbs/182_YachtClub_0040.jpg" alt="" /></a><br/></div> <div style="float: left; margin: 2px; height: 150px;"><a href="/images/media/182_YachtClub_0041.jpg" rel="lightbox[post182]" title=" size 45k"><img border="1" src="/images/media/thumbs/182_YachtClub_0041.jpg" alt="" /></a><br/></div> <div style="float: left; margin: 2px; height: 150px;"><a href="/images/media/182_YachtClub_0042.jpg" rel="lightbox[post182]" title=" size 55k"><img border="1" src="/images/media/thumbs/182_YachtClub_0042.jpg" alt="" /></a><br/></div> <div style="float: left; margin: 2px; height: 150px;"><a href="/images/media/182_YachtClub_0044.jpg" rel="lightbox[post182]" title=" size 49k"><img border="1" src="/images/media/thumbs/182_YachtClub_0044.jpg" alt="" /></a><br/></div> </div> I have read and read through the CSS2 spec and I am unable to figure out if this is possible. Hopefully I can describe it well enough for somebody to help out. Okay, what I want to accomplish seems simple. I want a div, lets call this one "container", with a calculated height/width relative to the document (in terms of percentage). Inside this div will be another div, lets call it "header", whos width will span the length of the containing div (100%) and height is fixed, lets say 30px. Now here comes the tricky part... a third div, lets call it "content" should sit right underneath "header" and its width will also be 100% of the containing div, but the height should fill the remainder of the containing div. I can't seem to get the "content" div to fill the remainder of "container" and scroll when needed. If I specify a calculated height, the offset of the "header" div is not taken into account so "content" div does not fit properly. Thanks a ton if you can help me out. Please let me know if this doesn't make sense. Here's the template I'm working on: http://dhost.info/justusvizslas/template.php Here's my problem: I'm trying to create a centered, two-column layout with a header and a footer, sort of like the tutorial he http://nemesis1.f2o.org/aarchive?id=7 I've got everything working correctly and it looks fine in IE. However, in FireFox, the container div doesn't automatically adjust its height to be the same as the height of the divs inside. Instead, I have to set the height at a certain number of pixils to even get the container div to show up. When I do that, in IE the container div defaults to the same height as the larger of the two inner divs, but in FireFox the container div just stays at whatever pixil height I specified. That becomes problematic because I don't plan on having all my pagecontent divs with the same height. Any insight will be greatly appreciated. I've been looking at this for hours and haven't gotten it to work like it should. Here's the relevant code too: CSS Code: #container {
width:792px;
height:50px;
margin: auto auto;
color:#000000;
background-color:#FFFFFF;
background-image:url(design/menuimage.gif);
background-repeat:repeat-y;
}
#navigation {
width:125px;
height:auto;
padding:0px;
float:left;
margin-top:auto;
vertical-align:top
}
#pagecontent {
width:667px;
height:auto;
padding:0px;
float:left;
margin-top:auto;
color:#000000;
background-color:#FFFFFF;
text-align:center
}
PHP Code: <div id="container"> <div id="navigation"><?php include "nav.php"; ?></div> <div id="pagecontent"> <br />Some more content here<br /> </div> </div> Again, thank you in advance for any help with this. If you're stumped and think it should work as-is, go ahead and go to the actual template I'm working on (first http link in this post) and look at it in IE and in FireFox to note the difference. I am trying to set a height of a container div, and have the inner div spill out of the container without changing the height of the container div: Code: <style media="screen" type="text/css">
.inner{
width: 80px;
height: 80px;
background-color: #0000FF;
}
.outer {
width: 120px;
height: 20px;
background-color: #FFFF00;
overflow:visible;
}
</style>
IE 6 is giving me trouble. It insists on making the container div the same height as the inner div. Anything I can do to tell IE6 to not change the height of the container? Hi, I have two images which are on top of each other, and the one on top is hidden. I use JS to change the source of the top to a new image, then fade the top image visible, then change the source of the bottom to be the same as the top, then make the top hidden (and so on and so on). To position the images on top of each other, I am using position: absolute. This works well when the DIV container has a defined height, however, when not the DIV collapses upon itself and the images are not displayed. Any suggestions how I might overcome this? Thanks Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Test Heights</title>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<style type="text/css">
.mod_rotator
{
position: relative;
overflow:hidden;
height: 100px;
}
.mod_rotate_image {position: absolute;}
img.mod_rotate_image.front {display: none;}
</style>
</head>
<body>
<div class="mod_rotator">
<img class="mod_rotate_image back" src="images/rotator/corporateimage1.jpg" />
<img class="mod_rotate_image front" src="images/rotator/corporateimage1.jpg" />
</div>
</body>
</html>
I may be trying to square the circle here. I have a container that is not the full length of the page [padding top and bottom]. Within the container, I have 2 main content elements: 1. a nested div forms a strip down the left edge, holding a decorative pattern. [note: it doesn't currently extend down the entire left edge ~ other items are above it ~ but I can include those in the strip and make it 100% if the idea is workable]. 2. the main content div is beside it. The container automatically adjusts to the height of the entire content in both divs. I'd like for the 'decorative' div to automatically adjust to 100% height of the container instead [ie. match the height of the content to the right of it - automatically]. Is this possible? Kravvitz....I know How do you make a container div aware of the height of floated divs nested inside? I have 2 floated divs, which are contained within a container div. The container has a background image that I need to tile vertically. In FF the image does not tile unless I specifiy a height for the container other than auto. I don't want to set it to 100% because when I do, the container div extends much further than I intend it to. Here is the link to the site with the problem. CSS Code:
/* CSS DOCUMENT */
html, body {
padding: 0px 0px 0px 0px;
font: 10px Verdana, Arial, Halvetica;
height: 100%;
text-align: center;
background: url(../images/bdy_back.jpg) #252525 no-repeat center;
#container {
width: 938px;
margin: 0 auto;
text-align: left;
height: auto;
opacity: .90;
filter: alpha(opacity=90);
background: url(../images/middle2.jpg) repeat-y right #444444;
}
#lcol{
float: left;
width: 15%;
height: auto;
}
#right {
float: right;
width: 85%;
height: 100%;
}
}
HTML Code:
<div id="container">
<div class="hdr">
<div id="officer" style="display: none;"></div>
</div>
<div id="lcol">
</div>
<div id="right">
</div>
</div>
<div id="footer">
</div>
Hi folks, I hope this is achieveable ... I have tried numerous ways of floating and whatnot, here is what i want: I want to have one container, having 3 divs inside. of these 3 divs the left and the right one are fluid, the center one is an image with a fixed width. looking like this: Code: ________________________ l l l fluid fix fluid l ________________________ restrictions: i do not want to use positioning at all. best would be, if it is all achieved with float and margins, looking good in IE and FF .... i have a page up, that will show you my design .... note, that only the box containing the image is the problem part on that page (some of you will recognize this i believe) the names of the classes are textboxleft, textboxright and id big_logo thanx! i want to redesign the page i have to only be displayed with floats and margins and no more positioning .... |
|||||||