|
CSS - Whys This Div Not In Its Parent? *newbie Help*
Hi guys, i have a problem with my CSS, i think there's something i'm not quite understanding. I should have a header which is one long div separated into three equal sized columns (three divs), each contain text which is inside its own div. Here's my code:
HTML Code: <body> <Div class="Header"> <Div class="Left"> <div class="Logo"><img src="Images/ACE.png" alt="Logo" height="36px" width="56px"/> <div class="LeftText"> AIR CHARTER EXPRESS </div> </div> </Div> <Div class="Middle"> <div class="RightText"> Left </div> </Div> <Div class="Right"></Div> <div class="MiddleText"> Right </div> </Div> </body> and css: Code: @charset "utf-8"; /* CSS Document */ .Header { position:relative; height:40px; width:900px; border:solid 1px black; margin-left:200px; /*background-color:#000000;*/ } .Left { position:relative; height:40px; width:299px; /*background-color:aqua;*/ border-right:solid 1px black; float:left; display:inline; } .LeftText { display:inline; Height:38px; width:200; position:relative; top:-11px; border:solid 1px black; } .Middle /* actually right div */ { position:relative; height:40px; width:299px; /*background-color:yellow;*/ float:right; } .MiddleText { display:inline; Height:38px; width:200px; position:relative; border:solid 1px black; margin-left:60px; top:10px; } .Right /* actually middle div */ { position:relative; height:40px; width:300px; /*background-color:green;*/ float:right; border-right:solid 1px black; } .RightText { display:inline; Height:38px; width:200px; position:relative; border:solid 1px black; margin-left:60px; top:10px; } .Logo { Height:36px; width:66px; padding-top:2px; display:inline; }
its actually a little confusin seeing as the middle div appears on the right and the right div in the middle but i dont want to change any of the names in case it breaks so i'll live with! everything works fine except for the middleText div is not appearing inside it parent (right div) but on the outside of the whole header div. Can somebody please tell me why this is happening?thanks. Similar TutorialsI am confused by the "rules" of how to indicate what you are trying to style when an element is within other elements. Specifically in this case (but hopefully this lesson will be portable to other contexts). I have a UL with an LI (classed) that is within an id'd UL that is within an id'd DIV. Code: <div id="horzmenu">
<ul id="horznavmenu">
<li><a href='rooms.php'>Accomodations</a></li>
<li class='hot'>Location & Info
<ul>
<li><a href='/otherprops.php'>Other Properties</a></li>
<li><a href='/news.php'>News & Photos</a></li>
</ul>
</li>
<li><a href='booking.php'>Booking</a></li>
</ul>
</div>
So if I were to wish to style this new UL and its LI's do I refer to: The parent UL as in: #horznavmenu ul ul { The parent UL and the class'd LI as in: #horznavmenu ul ul li.class{ Or? Thanks in advance for any feedback or suggested reading... I'm using a web application for an online survey system. The pages rendered are XHTML transitional ("<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">")... but it doesn't validate (a big problem, I know). It looks like this initially... ...and I'm trying to indent the entire element below the header text like so... ...but the problem is that it applies the change not only the parent TABLE/DIV combo, but then the children as well (which is why the radio buttons ended up being shifted over too I believe). I can't change any of the code of the application, but the application references an external CSS file that I can edit only (so I can't change the fact that there aren't many/any classes assigned to the elements to use directly... but I can modify this one file and have the changes applied). What I've tried thus far is to use either of the following... Code: TABLE DIV {position: relative; left: 25px;}
TABLE DIV {padding-left: 25px;}
I found the tree using Firebug for Firefox. Is there a way to make the CSS code be applied to only the first/parent TABLE/DIV combo and not it's children? Maybe I could start with BODY TABLE DIV or something? I would really appreciate any assistance possible. Please look at this page - http://hometown.tmhdesign.com/ask.asp?faq=9 See how the <p> exceeds the containing box at the bottom? I put a border-bottom on the containing div to show you where the issue occurs. It does not happen in IE7 I just noticed it does it also on this page http://hometown.tmhdesign.com/staff.asp Is there a way to get the style sheet to let the inner tag to override the parent's tag? Seem that only one webpage need that while many other doesn't. I'll post the code below, take a look at the text-align:left ...... Code: <div style="margin:0px;padding:25px 30px;text-align:left;"> <img style="text-align:center;" src="..."> </div> Is there a way to get the style sheet to let the inner tag to override the parent's tag? Seem that only one webpage need that while many other doesn't. I'll post the code below, take a look at the text-align:left ...... Code: <div style="margin:0px;padding:25px 30px;text-align:left;"> <img style="text-align:center;" src="..."> </div> http://weightlossforever.ca/ Works fine in everything but ie7 the leaves appear in front of their parent, they should be behind it. Thoughts? Hey AHH I know that there is a lot of code to look at but I'm only working on the middle box with the cross. All I am wanting to figure out right now is how to get the parent div.icross to show all it's background in FF. It shows and looks how I want it to look in IE, so you can use that as reference. You guys are always so much help and I REALLY appercaite it. Thanks so much to whoever helps me. - Jacenta Here is the page: tri-m.com/index_newlayout.html Here is the css that only corresponds to the middle to make things easier for you to see: Code:
div.icross /* index cross */
{
background:url(trim_images/layout/cross_background.gif);
background-color:#FFFFFF;
background-repeat:no-repeat;
background-position:top;
width:540px;
height:1%;
}
div.ilogo /* logo in cross, top left box */
{
width:192px;
height:57px;
margin-right:1px;
margin-bottom:2px;
float:left;
text-align:right;
padding:0;
}
div.ind /* name/description in cross, top right box */
{
width:346px;
height:57px;
margin-left:1px;
margin-bottom:2px;
float:right;
text-align:right;
padding:0;
}
div.iimage /* image in cross, bottom left box */
{
width:192px;
float:left;
margin-right:1px;
margin-top:1px;
height:1%;
}
div.iinfo /* info in cross, bottom right box */
{
width:346px;
float:right;
margin-left:1px;
margin-top:1px;
text-align:left;
height:1%;
}
.trimdescription
{
color:#1b4da6;
font-family:Arial;
font-size:12px;
text-align:left;
font-weight:normal;
width:540px;
}
.pname /* product name */
{
color:#063891;
font-family:Arial;
font-size:28px;
padding:0;
}
.pdescription /* product description */
{
color:#f47720;
font-family:Arial;
font-size:12px;
font-style:italic;
text-align:right;
padding:0;
margin-left:15px;
}
div.clear /* clear div/container */
{
clear:both;
}
div.fptitle /* featured products title/banner */
{
width:540px;
height:19px;
padding:0;
margin:0;
}
div.fproducts /* featured products small images */
{
background-color:#e8e8e8;
width:540px;
height:76px;
padding:0;
margin:0;
}
Please look at this page http://osake.garychus.com/menu2.asp I am trying to wrap a div (red border) around each category on this restaurant menu. For some reason the code looks right but the red border does not enclose the entire category section(s). I validated the html but think the issue is css related. Any help is appreciated. found what I was looking for. 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 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 want to create a rule which specifies a container, then allows a number of images to be displayed within that container at defined positions (top-left, top-right, bottom-left, bottom-right) I also want any text placed in the div to wrap around all the images. here's how far I've got - I've got the images where I want 'em - but the text won't flow around the absolutely positioned elements... I need the bottom elements to be positioned relative to the BOTTOM of the div as its size will change relative to the length of the text displayed within it... css code: #content { background-color: #99CCFF; position: relative; width: 400px; left: 100px; top: 100px; font-family: Arial, Helvetica, sans-serif; font-size: small; overflow: hidden; } #content .imgtopleft { top: 0px; float: left; padding: 5px; } #content .imgtopright { top: 0px; float: right; padding: 5px; } #content .imgbottomleft { position:absolute; bottom: 0px; left:0px; float: left; padding: 5px; } #content .imgbottomright { position:absolute; bottom: 0px; right:0px; float: right; padding: 5px; } HTML: <div id="content"> <img src="images/emsmall.gif" class="imgtopleft"> <img src="images/emsmall.gif" class="imgtopright"> <img src="images/emsmall.gif" class="imgbottomleft"> <img src="images/emsmall.gif" class="imgbottomright"> Lorem ipsum... </div> should have read more in the forum. sorry. Hi. How would I go about horizontally centering a number of divs within another parent div which has a set width of 500px? There maybe 2,3 or 4 divs of varying length within the parent div but no matter the number I always want them centered within the parent div. |............................................................| |............................................................| |............................................................| | <---DIV---> | <---DIV---> | <---DIV---> | |............................................................| |............................................................| |............................................................| I made a few tables using the old HTML method o setting table attributes. However I later discovered css for tables and wrote the following and it works well with some new tables i have made: Code: table
{
border-collapse: collapse;
border-spacing: 0px;
}
Now all my old tables follow the above style (quite naturally). How can I override the css styles for the older tables? how do i set border-spacing to its default value? thanks Hello, I am having a small issue, and after about 10 hours of trying to fix it myself I am looking for help. The problem is when you hover over the Suckerfish menu and it expands, the first entry covers the parent item... I have temporary corrected this by adding the parent as a sub item so it appears to be OK... however I do not wish to keep it this way as I cannot set the submenu width to be the same until the submenu appears below the parent as it should. The site is www.DesolationWildernessVolunteers.org <-- I used the forum code to make this a click able link but for some reason it is not working.... CSS verifys however there is 3 errors in the XHTML that is a result of the template, and though I have tried to locate the errors I cannot find the correct file that is presenting them. I do not believe this is the source of the problem though. The css file controlling the menu is menu.css Code: /** IE bugs: a:link, a:visited, a:hover need to be styled as well; does not display separator... workaround? */
/** customize colors here */
a.mainlevel-son-of-suckerfish-horizontal, a.mainlevel_active-son-of-suckerfish-horizontal, a.mainlevel_current-son-of-suckerfish-horizontal,
a.mainlevel-son-of-suckerfish-horizontal:link, a.mainlevel_active-son-of-suckerfish-horizontal:link, a.mainlevel_current-son-of-suckerfish-horizontal:link,
a.mainlevel-son-of-suckerfish-horizontal:visited, a.mainlevel_active-son-of-suckerfish-horizontal:visited, a.mainlevel_current-son-of-suckerfish-horizontal:visited {
/** background-color: red; */
/** color: white; */
}
a.mainlevel-son-of-suckerfish-horizontal:hover, a.mainlevel_active-son-of-suckerfish-horizontal:hover, a.mainlevel_current-son-of-suckerfish-horizontal:hover {
/* background-color: #E0E0E0; */
/* color: red; */
}
a.sublevel-son-of-suckerfish-horizontal, a.sublevel_active-son-of-suckerfish-horizontal, a.sublevel_current-son-of-suckerfish-horizontal,
a.sublevel-son-of-suckerfish-horizontal:link, a.sublevel_active-son-of-suckerfish-horizontal:link, a.sublevel_current-son-of-suckerfish-horizontal:link,
a.sublevel-son-of-suckerfish-horizontal:visited, a.sublevel_active-son-of-suckerfish-horizontal:visited, a.sublevel_current-son-of-suckerfish-horizontal:visited {
background-color: #638D4D;
color: white;
width: auto;
}
a.sublevel-son-of-suckerfish-horizontal:hover, a.sublevel_active-son-of-suckerfish-horizontal:hover, a.sublevel_current-son-of-suckerfish-horizontal:hover {
/* background-color: #E0E0E0; */
/* color: green; */
}
ul.mainlevel-son-of-suckerfish-horizontal ul ul a.sublevel-son-of-suckerfish-horizontal, ul.mainlevel-son-of-suckerfish-horizontal ul ul a.sublevel_active-son-of-suckerfish-horizontal, ul.mainlevel-son-of-suckerfish-horizontal ul ul a.sublevel_current-son-of-suckerfish-horizontal,
ul.mainlevel-son-of-suckerfish-horizontal ul ul a.sublevel-son-of-suckerfish-horizontal:link, ul.mainlevel-son-of-suckerfish-horizontal ul ul a.sublevel_active-son-of-suckerfish-horizontal:link, ul.mainlevel-son-of-suckerfish-horizontal ul ul a.sublevel_current-son-of-suckerfish-horizontal:link,
ul.mainlevel-son-of-suckerfish-horizontal ul ul a.sublevel-son-of-suckerfish-horizontal:visited, ul.mainlevel-son-of-suckerfish-horizontal ul ul a.sublevel_active-son-of-suckerfish-horizontal:visited, ul.mainlevel-son-of-suckerfish-horizontal ul ul a.sublevel_current-son-of-suckerfish-horizontal:visited {
background-color: blue;
color: white;
}
ul.mainlevel-son-of-suckerfish-horizontal ul ul a.sublevel-son-of-suckerfish-horizontal:hover, ul.mainlevel-son-of-suckerfish-horizontal ul ul a.sublevel_active-son-of-suckerfish-horizontal:hover, ul.mainlevel-son-of-suckerfish-horizontal ul ul a.sublevel_current-son-of-suckerfish-horizontal:hover {
background-color: #E0E0E0;
color: blue;
}
ul.mainlevel-son-of-suckerfish-horizontal .expanded {
display: block;
background-image: url("../images/arrow_down.gif");
background-position: right center;
background-repeat: no-repeat;
padding-right: 10px;
}
ul.mainlevel-son-of-suckerfish-horizontal ul .expanded {
background-image: url("../images/arrow_right.gif");
}
/** customize style / layout here */
a.mainlevel-son-of-suckerfish-horizontal, a.mainlevel_active-son-of-suckerfish-horizontal, a.mainlevel_current-son-of-suckerfish-horizontal, span.mainlevel-son-of-suckerfish-horizontal,
a.mainlevel-son-of-suckerfish-horizontal:link, a.mainlevel_active-son-of-suckerfish-horizontal:link, a.mainlevel_current-son-of-suckerfish-horizontal:link,
a.mainlevel-son-of-suckerfish-horizontal:visited, a.mainlevel_active-son-of-suckerfish-horizontal:visited, a.mainlevel_current-son-of-suckerfish-horizontal:visited,
a.mainlevel-son-of-suckerfish-horizontal:hover, a.mainlevel_active-son-of-suckerfish-horizontal:hover, a.mainlevel_current-son-of-suckerfish-horizontal:hover,
a.sublevel-son-of-suckerfish-horizontal, a.sublevel_active-son-of-suckerfish-horizontal, a.sublevel_current-son-of-suckerfish-horizontal, span.sublevel-son-of-suckerfish-horizontal,
a.sublevel-son-of-suckerfish-horizontal:link, a.sublevel_active-son-of-suckerfish-horizontal:link, a.sublevel_current-son-of-suckerfish-horizontal:link,
a.sublevel-son-of-suckerfish-horizontal:visited, a.sublevel_active-son-of-suckerfish-horizontal:visited, a.sublevel_current-son-of-suckerfish-horizontal:visited,
a.sublevel-son-of-suckerfish-horizontal:hover, a.sublevel_active-son-of-suckerfish-horizontal:hover, a.sublevel_current-son-of-suckerfish-horizontal:hover {
font-weight: normal;
font-size: 100%;
text-align: left;
text-decoration: none;
display: block;
border: 0px solid silver;
padding: 0.3em 0.5em 0.3em 0.5em; /* top, right, bottom, left */
}
a.mainlevel-son-of-suckerfish-horizontal, a.mainlevel_active-son-of-suckerfish-horizontal, a.mainlevel_current-son-of-suckerfish-horizontal, span.mainlevel-son-of-suckerfish-horizontal {
}
a.sublevel-son-of-suckerfish-horizontal, a.sublevel_active-son-of-suckerfish-horizontal, a.sublevel_current-son-of-suckerfish-horizontal, span.sublevel-son-of-suckerfish-horizontal {
font-size: 90%;
border-top: none;
height: 1%; /* this is required for the IE to cause the "hasLayout" property and make the whole anchor clickable - "Holly Hack" */
}
#active_menu-son-of-suckerfish-horizontal,
a.mainlevel_active-son-of-suckerfish-horizontal, a.mainlevel_current-son-of-suckerfish-horizontal,
a.mainlevel_active-son-of-suckerfish-horizontal:link, a.mainlevel_current-son-of-suckerfish-horizontal:link,
a.mainlevel_active-son-of-suckerfish-horizontal:visited, a.mainlevel_current-son-of-suckerfish-horizontal:visited,
a.mainlevel_active-son-of-suckerfish-horizontal:hover, a.mainlevel_current-son-of-suckerfish-horizontal:hover,
a.sublevel_active-son-of-suckerfish-horizontal, a.sublevel_current-son-of-suckerfish-horizontal,
a.sublevel_active-son-of-suckerfish-horizontal:link, a.sublevel_current-son-of-suckerfish-horizontal:link,
a.sublevel_active-son-of-suckerfish-horizontal:visited, a.sublevel_current-son-of-suckerfish-horizontal:visited,
a.sublevel_active-son-of-suckerfish-horizontal:hover, a.sublevel_current-son-of-suckerfish-horizontal:hover {
font-weight: bold;
}
ul.mainlevel-son-of-suckerfish-horizontal, .mainlevel-son-of-suckerfish-horizontal ul {
padding: 0;
margin: 0;
list-style: none;
line-height: 1;
z-index: 100;
}
ul.mainlevel-son-of-suckerfish-horizontal li {
padding: 0;
margin: 0;
background: none;
float: left;
}
ul.mainlevel-son-of-suckerfish-horizontal li li {
position: relative;
display: block;
width: 10em;
}
ul.mainlevel-son-of-suckerfish-horizontal ul {
display: block;
position: absolute;
left: -999em;
margin: -0.2em 0 0 0em;
width: auto;
height: auto;
z-index: 101;
}
ul.mainlevel-son-of-suckerfish-horizontal li li ul {
margin: -1.8em 0 0 10em;
z-index: 102;
}
/** IE7.0 workaround */
ul.mainlevel-son-of-suckerfish-horizontal li:hover, ul.mainlevel-son-of-suckerfish-horizontal li.hover {
position: static;
}
/** general on-mouse-over display */
ul.mainlevel-son-of-suckerfish-horizontal li:hover ul,
ul.mainlevel-son-of-suckerfish-horizontal li.hover ul {
left: auto;
}
ul.mainlevel-son-of-suckerfish-horizontal li:hover ul ul,
ul.mainlevel-son-of-suckerfish-horizontal li.hover ul ul {
left: -999em;
}
ul.mainlevel-son-of-suckerfish-horizontal li:hover ul li:hover ul,
ul.mainlevel-son-of-suckerfish-horizontal li.hover ul li.hover ul {
left: auto;
}
ul.mainlevel-son-of-suckerfish-horizontal, ul.mainlevel-son-of-suckerfish-horizontal li li {
clear: left;
}
/** separator */
span.mainlevel-son-of-suckerfish-horizontal, span.sublevel-son-of-suckerfish-horizontal {
display: block;
width: 1em;
border-width: 0px;
margin-left: 1em;
padding: 0;
padding-top: 1px;
}
/** IE5.0/win workaround: the ">" is handled like a "," */
ul.mainlevel-son-of-suckerfish-horizontal > ul.mainlevel-son-of-suckerfish-horizontal {
position: absolute;
top: 5em; /* change the absolute position for IE5.0 here */
}
ul.mainlevel-son-of-suckerfish-horizontal > ul.mainlevel-son-of-suckerfish-horizontal li.hover ul {
margin: 0.1em 0 0 0em; /* top, right, bottom, left */
}
ul.mainlevel-son-of-suckerfish-horizontal > ul.mainlevel-son-of-suckerfish-horizontal li.hover ul ul {
margin: -1.6em 0 0 10em; /* top, right, bottom, left */
}
Now if I change: Code: /** general on-mouse-over display */
ul.mainlevel-son-of-suckerfish-horizontal li:hover ul,
ul.mainlevel-son-of-suckerfish-horizontal li.hover ul {
left: auto;
}
to include position: relative; like so: Code: /** general on-mouse-over display */
ul.mainlevel-son-of-suckerfish-horizontal li:hover ul,
ul.mainlevel-son-of-suckerfish-horizontal li.hover ul {
position: relative;
left: auto;
}
then the menu functions properly except it pushed the entire page down to do so, causing more of an eye sore than if the menu conforms to the lengths of the menu items. Any help in resolving this problem is greatly appreciated. EDIT: BB code not working on the link to my website... Hello I have struggled to understand this issue. I have a large container and I want 2 or more dives to stay side my side but if I apply float left to the div(s) it leaves the large container. How do I do it so that the left divs push the large container with them. I've included my example. and a screen shot here [IMG]atrexstudio.com/float_left/Untitled-4.jpg[/IMG] <body> <style type="text/css"> .container { width: 600px; background-color: #0F0; } #left1{ background-color: #633; height: 100px; width: 100px; float: left; } #left2 { background-color: #639; height: 100px; width: 100px; float: left; } </style> <div class="container">why do the two left divs jump out the container? <div id="left1">left</div><!--left --> <div id="left2">left2</div> </div><!--container --> </body> </html> If I can understand this then I will not have to keep setting the length of the container manually. Thank you I appreciate you time. I am trying to make sure that the body div takes up all the available space in div container (the parent div), however: Code: height: 100%; makes it take up 100% of the whole page, not just the container. Here is my source code: 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>Home -- OpportunIT</title> <link href="main.css" rel="stylesheet" type="text/css" /> <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" /> <link rel="alternate" type="application/rss+xml" title="OpportunIT News Feed" href="http://www.sphinxgaming.com/OpportunIT/" /> <link rel="shortcut icon" href="favicon.ico" /> </head> <body id="test"> <div id="container" class="rounded-corners"> <div id="header">OpportunIT</div> <div id="nav-menu"><ul> <li><a href="?page=home">Home</a></li> <li><a href="?page=software">Software</a></li> <li><a href="?page=about">About us</a></li> <li><a href="?page=contact">Contact us</a></li> </ul></div> <br/><br/> <div id="body"> Welcome to OpportuneIT!<br/> <br/> <b>What's New:</b><br/> <a href="?page=sinc">SiNC Framework Announced</a><br/> SiNC is a framework used to manage computers and networks in a secure,<br/> reliable, easy to learn and use way. SiNC can make almost any network<br/> management tasks simpler, such as transferring a file over a secure<br/> connection, running commands on or even remotely controlling computers,<br/> checking the status of various servers, computers and online services<br/> automatically, simplifying networked programming tasks and managing network<br/> security.<br/> <br/> <a href="?page=home">Renamed and Redesigned!</a><br/> We have been renamed to OpportuneIT, and are working on a brand new<br/> website... Stay tuned for more info on this.<br/> </div> </div> </body> </html> Code: html, body {
height: 95%;
}
#container
{
height: 100%;
width: 95%;
margin-left: auto ;
background: #FFFFFF;
margin-right: auto ;
}
#nav-menu ul
{
list-style: none;
padding: 0;
margin: 0;
}
#nav-menu
{
margin-left: auto ;
margin-right: auto ;
width:40em
}
#nav-menu li
{
float: left;
margin: 0 0.15em;
}
#nav-menu li a
{
height: 2em;
line-height: 2em;
float: left;
width: 9em;
display: block;
border: 0.1em solid #dcdce9;
color: #0d2474;
text-decoration: none;
text-align: center;
}
#body
{
height:auto;
width: auto;
margin-left: auto ;
background: #FFFFFF;
margin-right: auto ;
padding: 5px;
}
#header
{
margin:0px;
padding:0px;
background: #000000;
width:auto;
height:54px;
font-family:Verdana;
font-size:30px;
text-align:center;
color:#FFFFFF;
border-bottom: #AAAAAA solid 5px;
}
#footer
{
margin:0px;
padding:0px;
background: #000000;
width:auto;
height:24px;
text-align:center;
color:#FFFFFF;
}
.rounded-corners {
-moz-border-radius: 20px;
-webkit-border-radius: 20px;
-khtml-border-radius: 20px;
border-radius: 19px;
border-style:solid;
border-width:20px;
}
Thanks in advance. This is something I've never been able to figure out a good solution for. I've found a few posts about the same issue, but in more specific terms. Quite often they also speak about how to fill the entire viewport in some way. Anyway. Let's say we have a container: <div id="container"></div> Inside this container we have sort of a caption element. An element that is dynamic in height. Font size, padding, margins and the like will affect how high it gets in the end. <div id="container"><h2>My Dynamic Height caption</h2></div> Now. If i add another "sub container" in there. How do i make it take up the remaining space (height) of the parent container, no matter the size of the parent container and no matter the size of the sibling's dynamic height content (the h2 in this example) <div id="container"> <h2>Caption</h2> <div id="subContainer"> I want this div to be as high as what's left of "container" </div> </div> I know I can do this with javascript, calculating exact dimensions of subContainer based on the current environment. I even have a CSS solution, making "container" position relative and positioning subContainer absolute with left,right,bottom = 0 and top = somewhat close to how high the h2 is. Any other ideas? Hey guys, I am working on www. paulfenton .tk/wordpress: The side margins of this site are filled with background gradients. (they take up the left and right halfs of the site, with the main content drawn over the middle). The problem is, the div "bottomLeftGradient" is the width of the whole screen. I know this might be because I am using position:absolute, but that seems to be the only way I can make bottom:0px; take effect and cause this to sit on the bottom of the div rather than the top. It seems that if I use width:50%; that it works, but I did not have to do that for bottomRightGradient so something must be messed up here. Thanks for the help, -Paul |
|||||||