|
CSS - Container Size Match Contents
Thanks for taking the time to read my question.
I have a container that has a bunch of stuff in it. In IE the container grows (I know it shouldn't) with the content. FF the content doesn't. I want to use the same container on each page in my site, but each page will have different amounts of content making the page longer or shorter. I need the container to match the contents, and I would like to do it without making duplicates of the container in the CSS and changing only the height. For an example check out warrenpersowich.com Look at the home page and the Seminars page. See how the content is differen, but the container is the same. Thanks, Brad Similar TutorialsHi All, I am trying to get the container div to contain the contents of the page, so that if someone has a lower res browser / reduces the size of the page, the whole thing colapses inwards. I simplly cannot get it to work! In IE it does not shrink, in FF the container shrinks, but the elements inside it dont. Charlie Hi, I've a problem with a layout, I don't understand why div container appears smaller than input field contained. PHP Code: <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> <style type="text/css" > body { margin : 10px; background-color : gray; } .container{ background-color : orange; border : 3px solid black; padding : 40px; } </style> </head> <body > <div class="container"> <input name="prova" value="Look to the right -----> -----> -----> -----> -----> " type="text" style="width:2000px;"> </div> </body> </html> ps. Verified with Firefox 2.0.0.4 and mozilla 1.7.13 Any hint? Hi guys, I'm having a real problem with CSS on this page. The page views fine in IE, but in firefox I cannot get the green box (div id=maincontent) to extend down to the bottom of the black box... as you can see the black box simply flows out. The green box is extending down to the bottom of the white box, but it stops there. Can anyone think of any obvious ways to fix this? I tried placing a clear:both div at the bottom of main content (which is the red bar you can see) , but that too only actually clears the white box, not the black one. Here's the main bits of css... Code:
#maincontent
{
position:relative;
width:762px;
margin-top:0px;
background-image:url(contentbkg.jpg);
background-repeat:no-repeat;
padding-top:10px;
text-align:left;
}
#left
{
font-size:12px;
color:#FFFFFF;
float:left;
margin-left:5px;
margin-top:10px;
}
#right
{
color:#FFFFFF;
float:right;
margin-right:10px;
margin-top:10px;
position:absolute;
#position:relative;
}
#translucentblack {
width: 150px;
float:right;
background-color: #000000;
filter:alpha(opacity=40);
-moz-opacity:0.4;
opacity: 0.4;
font-family:Verdana, Arial, Helvetica, sans-serif;
padding:5px;
}
#opaqueblack {
width: 150px;
background-color: transparent;
float:right;
position:absolute;
margin-left:592px;
#margin-left:22px;
z-index: 2;
font-family:Verdana, Arial, Helvetica, sans-serif;
padding:5px;
}
#translucentbkg {
color:#FFFFFF;
font-size:12px;
width: 566px;
background-color:#FFFFFF ;
filter:alpha(opacity=80);
-moz-opacity:0.8;
opacity: 0.8;
padding:5px;
text-align:left;
font-family:Verdana, Arial, Helvetica, sans-serif;
}
#opaquetext
{
color:#006600;
font-size:12px;
width: 566px;
background-color: transparent;
position:absolute;
z-index: 2;
padding:5px;
text-align:left;
font-family:Verdana, Arial, Helvetica, sans-serif;
}
basically left and right sit inside maincontent, then opaquetext and translucentbkg sit inside left, whilst opaqueblack and translucentblack sit inside right! phew The reason for opaque and translucent divs is that I'm using mozilla's tip here http://developer.mozilla.org/en/docs/Useful_CSS_tips:Color_and_Background mirroring content and positioning one div over another to get semi transparent backgrounds. Hope that all made sense... any help would be incredible!!! thanks! Hey guys I'm creating a website as a favor for my boss and I've been trying to do the speed crunch on it and already, one day in I hit a big road block... I can't seem to get the content container and background div to resize with content inside the "content" div. And also, I can't get the footer image for the content container (bottom of the color w/ rounded edges) to float to the bottom of the container. Here is the page in question: http://srh.com/taxgirl/ There are 3 style sheets used so far (as this is a complex website and I want some parts to show on all pages and others to only show on certain pages. Here are the CSS links: http://www.srh.com/taxgirl/srh2008.css http://www.srh.com/taxgirl/css/mainsrh.css http://www.srh.com/taxgirl/css/srh_index.css Code: #contentcontainer {
position: absolute;
z-index: 3;
width: 740px;
left: 11px;
top: 505px;
right: 11px;
height: auto;
margin-bottom: 70px;
overflow: visible;
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
color: #FFFFFF;
text-align: left;
}
Code: #contentbg {
background-image: url(../images2/required/layout/contentbg.png);
background-repeat: repeat-y;
background-position: center top;
overflow: visible;
position: relative;
width: 760px;
top: 55px;
height: 900px;
left: 1px;
right: 0px;
bottom: 65px;
z-index: 2;
margin-bottom: 63;
}
#contentcontainterfooter {
height: 15px;
width: 760px;
position: relative;
left: 1px;
right: 0px;
z-index:3;
}
Here is the HTML: Code: <div class="contentbg" id="contentbg"> <div class="contentcontainer" id="contentcontainer">CONTENTS THAT NEEDS The Content bg to be relative to.</div></div> <div class="contentcontainterfooter" id="contentcontainterfooter"><img src="images2/required/layout/content_bottom.png" width="760" height="15"></div> The text I threw in the DIV is just sample text so please disregard any unlisted or unused class tags, etc. This text will be removed after the issue is solved. If anyone could help I would be forever greatful Please take a look and let me know if you have any advice. Thanks you so--o much! ~beth. ps. This is a side concern, but if anyone knows how to make a png background compatable with IE, please do tell. This isn't too big of a concern for me because if I need to I can just use a gif, but if you know, the knowledge would be welcome and thanked for To all that read: Have a fantastic day and thank you for your time. Hi; why my container display different of size from different computer? In my computer, i can see the whole container(even i use different browser), but in some computer, just can see the part of the container, could anyone can help me, please. PHP Code: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <META HTTP-EQUIV="content-type" CONTENT="text/html; charset=utf-8"> <style type="text/css"> html head{ border:0; padding:0; margin:0; } body{ padding:0; border:0; margin:0; background-color:#CCCCCC; } #container { position: relative; width:1200px; height:750px; border:0; padding: 0; margin-top:40px; margin-bottom:auto; margin-left:auto; margin-right:auto; background-color:#FFFFFF; } </style> </head> <body> <div id="container"> The new Prime Minister's personal support is still firming though. Polling of 1500 people by Auspoll early last week showed she has a 45 per cent approval rating, an 18 per cent disapproval rating and a whopping 37 per cent have reserved their judgment. The polling was taken before the asylum issue blew up in the Government's face. Labor's election planning has been brought forward by the rise of Ms Gillard as leader. A senior Labor source confirmed last week that former prime minister Kevin Rudd had been planning a late election, which was expected in about October. Among a series of announcements last week that have been widely interpreted as a clearing of the decks was a decision to axe the Green Loans program and put the Government's controversial internet filter on hold for a year. Even on social issues Ms Gillard appears to be travelling well. Her much publicised early admission that she does not believe in God is not troubling many voters. The Auspoll survey found that having an atheist Prime Minister was of no consequence to 62 per cent of people, 20 per cent said they actively support a PM who does not believe in God while less than 18 per cent were opposed. </div> </body> </html> http://cad-design-engineering.com/New I double checked, and this page validates. (CSS and XHTML) The gray background on the right hand side - I can't adjust the width. When I do get a change, it breaks something - the links panel shifts to the bottom of the screen. Code:
#container
{
width: 737px;
height: 1%;
overflow: visible;
float: left;
padding: 4px 0 0 0;
margin-right: -185px;
}
This is the output from the Firefox Web Developer plugin: Code:
#container (line 147)
{
width: 737px;
height: 1%;
overflow: visible;
float: left;
padding-top: 4px;
padding-right-value: 0pt;
padding-bottom: 0pt;
padding-left-value: 0pt;
padding-left-ltr-source: physical;
padding-left-rtl-source: physical;
padding-right-ltr-source: physical;
padding-right-rtl-source: physical;
margin-right-value: -185px;
margin-right-ltr-source: physical;
margin-right-rtl-source: physical;
}
Not sure what I'm doing wrong. I've been perplexed for several days on this one. Thank you. The Example I've read a bunch about how div's won't stretch to accomidate div's inside of them if they overrun the height/min-height set for the container div. How do I get around this? You can see the skeleton of the site above. It's fine unless you resize the window smaller than the content. Hi There - Have a simple container div containing two other divs, top and content. My problem is that I can't get the colorboxtop to stick to the top of its container. There's a wayward space. Can't find any stray margins or padding hanging around. Perhaps fresh eyes can see what I cannot. Please let me know. Any help you can give me would be greatly appreciated. Thanks! Code:
<body>
<div class="colorbox">
<div class="colorboxtop">
<h2>title goes here</h2>
</div><!-- /colorboxtop -->
<div class="boxcontent">
<p>You should read this and <a href="#">Click Here</a>.</p>
<a title="Go Here!" href="#">[button]</a>
</div><!-- /boxcontent -->
</div><!-- /colorbox -->
</body>
No great complexity there...here's the CSS: Code:
body {
color:#666666;
font-family:Lucida Grande,Verdana,sans;
font-size:10px;
font-size-adjust:none;
font-style:normal;
font-variant:normal;
font-weight:normal;
line-height:13px;
}
.colorbox {
margin-bottom:9px;
padding-bottom:15px;
width:300px;
border:thin solid #CCCCCC;
}
.colorbox h2 {
color:#FFCC33;
}
.colorbox {
color:#CC6633;
padding:0px 20px 15px;
margin-top:0;
margin-bottom:10px;
}
.colorboxtop {
background-color: #dddddd;
height:50px;
color:#666666;
background-image: url(images/bg_Tiles/stripe-dk-blue-green.png);
padding:auto 20px;
}
.colorbox a {
color:#C5DBE9;
font-weight:bold;
text-decoration:none;
}
Hello there, first post, just need a quick fix. Hope you don't mind. So I'm trying to make myself a new portfolio site, but there's this 'error' I can't seem to fix... (Can't post a link in my first post, so just copy/paste "hellspike.thanez.org/newsite" in the addybar.) Basically that 150*300 infobar is supposed to be right next to the image, but it always ends up above or below the container. <!--AK47--> <div id="imgcont0"> <div id="imgcont1"><img src="images/ak47/1.jpg"></div> <div id="imgcont2"><img src="images/ak47/info.jpg"></div> </div> <!--/AK47--> imgcont0 is a 825*300 container, in which imcont1 (render) and 2 (infobar) are supposed to be. Stylesheet: #imgcont0 { width: 825px; height: 300px; margin-left: auto; margin-right: auto; } #imgcont1 { width: 650px; } #imgcont2 { margin-left: 675px; width: 150px; } As you see the code is simple, yet I can't seem to fix this problem. Ideas? Hi there, I'm completely new to CSS. I'm trying to do this more than one hour but can't get it right. Code: <font color='white'><font size='1' face=verdana size=1> I couldn't find the equivalent of this in CSS This is my last experiment but it doesn't seem to work either Code: fontstyle { color : #FFFFFF; font-family : verdana ; font-size :1;}
Thanks So when using Netscape 7.2 & Opera 7.5 and MSIE 6.0, How do you get a simple tag like body { font-size:small; } to be equal in all browsers? Setting IE Text Size to Medium, and Opera's Zoom to 100% (both defaults) and Netscape 7.2 to 120% (not the default) is one way, but is there a CSS way? By the way, the child element hack "body>div {property}" wasn't working no matter what I tried, by not working I mean to say Netscape never would read it or apply it. It appeared to be that Opera & IE need to read the same value while Netscape needs to apply a larger size to be equal to IE's and Opera's rendering. B I could see this as potentially being really easy to do or really hard to do. I'm hoping for the former. Suppose I have 3 divs, A, B, C and that I want the total width of A + B + C to equal the width of the screen. Suppose also that I want them to be inline. How can I have B to be a fixed width while A and C expand depending on the screen width (such that the width of A = the width of C)? Hi, I have one site, running two scrpts, and I just can't get one CSS to match the other. I'm nearly there, but I just need to make the body copy (main page text) the same in each. I am trying to make this (While oxygen is vital to every human...) the same as this (Christopher Manton is a nutritionally-oriented natural ...) Please help. What should I change to make them match? Thanks I have read a few posts but could not find one that was similar. I have a center column where I will be putting text. Here is structure for the center column. #center { margin-left: 160px; margin-right: 205px; margin-top:0px; padding:0px 0px 0px 0px; background-color:transparent; } When I put text inside it, and use the <p> tags, p { margin: 0px 12px 0px 2px; font-size:small; font-family:Veranda; font-color:#000000; padding-bottom:10px; pading-top:20px; } in netscape and firefox the margin is perfect on the left. In IE, however, the margin of the first paragraph is about 2pixels from the left. I know there is something in the box model I am not taking into consideration. any info would be great thanks I am baffled by what seems like a simple task which I can't seem to find the solution to. I've two columns (#top_left, #top_right) inside a containing div (#top_container). I want both columns to be the same height (100%). So if the column on the right has more content, the column on the left will stretch to match the same height. If I set a fixed height on the containing div (#top_container), it fixes the issue, since at this point my declaration of height:100% on the two columns actually knows what it is supposed to be 100% of. But then I run into overflow issues if the content goes over fixed height and when I try min-height, the columns fail to stretch once more. Here is my code: Code:
<style type="text/css">
#top_container {width:760px;}
#top_left {float:left; height:100%; width:200px;}
#top_right {float:left; height:100%; width:560px;}
</style>
<div id="top_container">
<div id="top_left">Content</div>
<div id="top_right">Content</div>
<br clear="all" />
</div>
I've slimmed down the code and cut out non relevant pieces like font styling, colors, and other non pertinent sections. Hey, I have two columns on a site I'm working on, which are a liquid height, this works fine, the page scales the overall page height to contain all off the content. The thing is, I want column 1 to dictate the height of the page, and for column 2 to match that height and add scroll bars if needed. So far I have: Code:
#wrapper {
width:975px;
background-image: url("../Images/main_background.jpg");
}
#left_column {
width:625px;
float:left;
padding:0px 25px 0px 25px;
}
#right_column {
width:250px;
float:right;
padding:0px 25px 0px 25px;
}
I experimented with adding overflow:auto;, overflow:scroll; and height:inherit; to the right column, but it still stretches to contain the content in the right_column. Any ideas? Thanks guys. Hi - I'm a bit of a noob when it comes to CSS etc. but have been asked to modify some code for someone. Basically it's a simple site that has the main content centered on the screen (about 960px wide). However there is a large banner image that is about 2000px wide that is supposed to stretch as wide as say a large 27" mac. I am not sure if this is the correct way to do it but I guess they couldn't use a smaller image and repeat it because there is a unique design/pattern throughout the whole width. Anyway, on smaller browsers everything looks good except the horizontal scroll bar allows the user to scroll all the way to to the right. Is there anyway to clip the image on the top to prevent the scroll bar from showing based on screen width? Hope that makes sense. Thanks. 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! Hello, I've been working on a site http://www.chequedelarealidad.org, and have recently experienced a problem with the 'links' page. Initially, the page appears as normal, but if I tab between windows to another program and then return to this page, the contects on the right hand side become invisible. I have validated the code using the W3C validator. Am not sure what the problem could be. Has anyone experienced anything similar to this? Or have a solution for me. Thanks, Victoria Hi everyone. I have a header with a menu div inside of it with the following settings: position: absolute margin-left: 250px margin-right: auto and height... Now, below that menu, I have a sub menu - it uses the same settings, with a bigger height of course, but it is styled completely different. The idea is, I want the sub menu to be different for every page the user is on. The main menu may change, I.e., have an extra menu item in it for specific pages. So, this is what I am trying to achieve... If MAIN MENU is a longer length then SUB MENU, I would like the sub menu to be the same width. Keeping in mind that the main menu is fluid and width is not set. Now, alternatively, if the SUB MENU is longer than the main menu, I would like the main menu to be the same length as the sub menu, again, keeping in mind that the sub menu is also fluid and will change width depending on the number of menu items. I mean, I know I could just set some arbitrary width for both, something I am sure will be wide enough despite what is inside of each menu, but I'd really rather avoid doing that, I don't want them both to always be X width, rather, I want the width to be able to change, but both at the same time, not one or the other. I hope that explains what I'm trying to accomplish here, if not, please feel free to ask any questions that would help you understand what I mean better. Thank you much. |
|||||||