|
CSS - Width Of Absolutely Positioned <div> Constrained By Width Of Parent Container
I have an absolutely positioned <div> containing a block of text. I have not specified a width for this <div>.
This <div> is nested within another <div> for which I have specified a width of 200px. So something like: html4strict Code: Original - html4strict Code <div style="position: relative; width: 200px;"> <div style="position: absolute; top: 10px; left: 20px; z-index: 100;"> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Curabitur eu purus a tellus mollis consequat. Phasellus aliquam sapien quis mauris. </div> </div> <div style="position: relative; width: 200px;"> Since the absolutely positioned <div> is not part of the page's normal flow, I would expect that its width would expand according to its contents (and the browser window's boundries). Instead, in Firefox only, the width of the absolutely positioned <div> expands only to the width of its parent - in this case 200px. Am I doing something wrong? or is there a workaround for this? Similar TutorialsThe goal of the following code is to have a search box with several tabs above it to narrow down the search. The issue is that the design calls for a little upside down triangle to appear below the tab and bleed into the text box. The code works great in Firefox and even in IE6 where the Doctype was switched to HTML 3.2. I'm using 4.01 Transitional and noticing that the arrow doesn't center itself below the tab, rather it centers itself in the entire page. If I take out the width: 100% from .searchbox li.active .downarrow, then both browsers behave the same, although the downarrow now appears in the left bottom corner of the tab rather than the center. Note that I've stripped most of the code away to narrow down the issue. Code:
<style>
.searchbox ul { float: left; padding-left: 10px; list-style: none; padding: 0; margin: 10px 0 0 0; }
.searchbox li { float: left; }
.searchbox li .downarrow { display: none; }
.searchbox li a { display: block; float: left; font-size: 12px; padding: 3px; color: #213327; }
.searchbox li.active { position: relative; }
.searchbox li.active a { color: #fff; border: 1px solid #b3b2b0; background: #266d1e url('/c2footsearchbg.jpg') repeat-x scroll top left; }
.searchbox li.active a:hover { text-decoration: none; }
.searchbox li.active .downarrow { display: block; position: absolute; bottom: -9px; width: 100%; height: 10px; text-align: center; margin: auto; }
.searchbox div { clear: both; display: inline-block; }
.searchbox input.txt { border: 2px solid #999; padding: 5px 0 0 3px; width: 305px; height: 30px; }
.searchbox input.submit { font-weight: bold; font-size: 12px; color: #fff; width: 71px; height: 30px; border: 0; background: transparent url('/c2searchbutton.jpg') no-repeat scroll top left; vertical-align: top; cursor: pointer; }
.searchbox input.submit:hover { background-position: 0 -30px; }
</style>
<div class="searchbox">
<h3>Search</h3>
<ul id="c2FootSearch">
<li class="active"><a href="/index.php">Main</a><div class="downarrow">↓</div></li>
<li><a href="/groups/">Groups</a><div class="downarrow">↓</div></li>
<li><a href="/people/">People</a><div class="downarrow">↓</div></li>
<li><a href="/petitions/">Petitions</a><div class="downarrow">↓</div></li>
<li><a href="/news/">News</a><div class="downarrow">↓</div></li>
<li><a href="http://www.google.com">Google</a><div class="downarrow">↓</div></li>
</ul>
<div>
<form action="/searchall.html" method="post">
<input type="hidden" name="search" value="main" />
<input type="text" name="q" class="txt" />
<input type="submit" value="Search" class="submit" />
</form>
</div>
</div>
Ok. Here's the problem: I have a asp.net 1.x datagrid inside a floated div and I want the datagrid to stretch the width of the div. This div is in the center of two other floated divs. Is there a way to make a table go 100% the width of its container div? Css code: Code:
/* left bar: */
#navBar{
width: 185px;
float: left;
}
/* right bar: */
#rightModulesContainer {
width: 130px;
margin: 0;
padding: 0px 0px 0px 10px;
float: right;
}
/* center content: */
#content{
padding: 0px 5px 0px 0px;
margin-top:0;
margin-bottom:0;
margin-left:4px;
margin-right:0px;
float: left;
text-align:left;
/*display: inline;*/
}
/* contained in #container: */
#dataGridContainer{
margin: 0;
padding-bottom: 10px;
min-width:360px;
}
.categoryGridStyle {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;
font-style: normal;
color: #000000;
width:100%;
}
and here is the layout of the divs: Code: <div id="navBar">left navigation bar here (tree view)</div> <div id="rightModulesContainer">right side bar here</div> <div id="content"><div id="dataGridContainer">datagrid here</div></div> Thanks for your help in advance. I've been messing with this for a while - trying to get it to work cross browser is driving me nuts. I've tried placing the divs in containers and floating the containers, I've tried everything I can think of... Hi, I have the following css: Code: #container { background: url(../images/page.gif) repeat-y center;
position:relative;
width:100%;
height:100%;
}
#banner {background:url(../images/banner.gif) no-repeat center;
height:108px;
width:100%;
position:relative;
}
#menu {background:url(../images/menu.gif) no-repeat top center;
height:124px;
width:100%;
position:relative;
}
#content {
margin-left: 240px;
font-family:'Helv', Arial, Helvetica, Geneva, sans-serif;
font-size:14px;
letter-spacing:1px;
color:#000;
text-align:justify;
width:580px;
position:relative;
}
#footer {background:url(../images/pgfooter.gif) bottom center no-repeat;
height:46px;
width:100%;
position:relative;
}
all background are fixed width for 1024x768 and i have the following html <div id="container"> <div id="banner"></div> <div id="menu"></div> <div id="content"> All text goes here </div> <div id="footer"></div> </div> now the problem is that if i set the #container width to let say 1000px; it works fine (only resizeing the browser instantly ihave the horizontal scroller). So i want to set thethe container width to 100%. As soon as i set that and resize the browser the page flows well But the text in the #content div remains static and doesn't move along with the bkgrounds, thus flowing "out" of the text area. the links is here Code: http://ocdmonline.org/michael/ username: ocdmonline pass:4yGx3fM Any ideas? 10x I have a site with a fixed width, but a few pages on the site are reports with wide tables that overflow that fixed width. Per the spec, they overflow their containers instead of expanding the containers (as happened in the old table layout). Is there a way to get the old table behavior out of the styled div tags? This is a short example of what the site uses for layout. The first block is normal content. The second has content overflowing and I would like all containers to expand (Main expands for the content, Page expands b/c Main expanded, Header* and Footer expand b/c their container (Page) expanded). The third is what it'd look like after that expansion (table rendered). Code: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01
Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<style type="text/css">
<!--
body { background-color: green }
.Page {
width: 200px;
margin: 50px auto;
}
.Header1 {
}
.Header2 {
background-color: red;
border: 1px solid Black;
border-width: 1px 1px 0;
}
.Footer {
background-color: blue;
border: 1px solid Black;
border-width: 0 1px 1px;
}
.Main {
background-color: white;
border: 1px solid Black;
border-width: 0 1px;
}
-->
</style>
</head>
<body>
<div class="Page">
<div class="Header1">Header1</div>
<div class="Header2">Header2</div>
<div class="Main">
Main
</div>
<div class="Footer">Footer</div>
</div>
<div class="Page">
<div class="Header1">Header1</div>
<div class="Header2">Header2</div>
<div class="Main">
MainMainMainMainMainMainMainMainMainMainMainMain
</div>
<div class="Footer">Footer</div>
</div>
<table class="Page" cellpadding="0" cellspacing="0">
<tr><td class="Header1">Header1</td></tr>
<tr><td class="Header2">Header2</td></tr>
<tr><td class="Main">MainMainMainMainMainMainMainMainMainMainMainMain</td></tr>
<tr><td class="Footer">Footer</td></tr>
</table>
</body>
</html>
I won't go back to tables, but I'd really like a general solution that can be applied to all pages, instead of doctoring widths and margins on the pages in question to get tolerable results. The page should be the set fixed width unless the content demands otherwise, then the entire page should stretch to flow. Any ideas? A screenshot for viewing sans personal test file. Sorry if this has been discussed, I can't seem to find it if it has been. I'm attempting to absolutely display several <div> tags, with padding and a set width/height. However, when I place them side by side, the borders overlap, and the width/height is larger than the values I've assigned. Is there some sort of formula to calculate the left, top, width and height values to make it so they do not overlap, the padding is applied, and the correct width/height is displayed (cross-browser, back to at least IE 6)? Thanks! 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 Can someone tell me how z-index calculated on two elements that are both absolute position I've been playing around with centering an absolutely positioned div and in this post is the method I've come up with. I've tested it in firefox and IE but am curious as to whether it works in opera and if there are better ways of doing it. The div needs to be absolutely positioned because I'm using top & bottom to set it's height. Here's the code Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
<title>Center Test</title>
<style>
body
{
margin: 0px;
height: 100%;
}
.centered
{
position: absolute;
border: 2px solid black;
width: 196px;
background: orange;
margin: auto;
top: 100px;
left: 0px;
right: 0px;
bottom: 100px;
min-height: 50px;
height: expression((document.body.clientHeight < 250 ? 50 : document.body.clientHeight - 200 ) + 'px');
left: expression('auto');
right: expression(((document.body.clientWidth < 200 ? document.body.clientWidth - 200: document.body.clientWidth / 2 - 100 )) + 'px');
}
</style>
</head>
<body>
<div class='centered'>
I'm a centered absolutely positioned div.
</div>
</body>
</html>
Hi I need to create a base box with 9 sub elements, four boxes in each of the four corners, four edges between the corners and a center box. The problem I'm having is that I can only position the corner and edge boxes precisely if I make the base box absolute and position the sub boxes absolutely. The problem with this though is that the base box "offsetHeight" property never grows when items are added to it. The items appear in their correct position but the base box height is always zero. The only time the base box changes size is if I add text to it. Is there no way to create a box with precisely positioned sub elements that grows in depth in response to added sub divs? Thanks for any help. What causes this? I have my small login form absolutely positioned relative to the content div, and it displays differently when there is/isn't content in it... have a look Test you can click the link to remove the data and position the bitlogin div as it is supposed to be... when the content is added, the bitlogin div moves down approx. 13px... What's the deal? I have this structure setup in XHTML Code:
<div class="contentShellHeader">
Header
</div>
<div class="contentShellContent">
Content
</div>
I'd like to have contentShellHeader's width to only be as wide as the text within it, but have contentShellContent be the width of the parent shell. Any idea how I can do this across all browsers? 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 .... Alright guys. I'm working on a horizontally scrolling news ticker type deal. I have two divs on screen, and the rest are off screen using the overflow:hidden on the parent. The divs are set to 466px wide, float:left, and the parent is 932px wide. Since div 3 and up are all 466px, they drop down below the other two. Not a problem, since the overflow is set. However the jquery animation does not reset the reference point when it scrolls, so the divs stay in this arrangement. Is there any way to keep them all lined up next to eachother horizontally? I'm wondering if there is a CSS solution first, before I get creative with the jQuery. I could easily set it for the next two divs to display right, but there is no telling how many divs there will be and it would quickly become a nightmare trying to account for all possibilities. Here is the current CSS I'm using: Code: #test {background-color:#F1F2F2; width:932px; padding:10px; margin-top:20px;overflow:hidden; display:inline-block; height:400px;} #newswrapper {height:100px; position:relative; left:0px;} #newswrapper div {float:left; position:relative; background:#CCC; width:466px; height:400px;}
Hi, I have hit the "wall" in my knowledge of CSS while trying to implement a "flex-width-equal-height-sidebar-layout" style of layout as a skin/theme for a message board system and need some help. My trouble occurs when a direct link to the post is used (instead of following the menu navigation system) where the top menu information/links area (the area between the banner and the post) is chopped off... The relevant portion of the CSS seems to be the .col_wrap {margin-top: 10px; border: 0; overflow: hidden; float: left; width: 100%; position: relative; z-index: 10; clear: both;} portion of my CSS because if I take out the overflow:hidden declaration then the menu portion of the skin/theme/layout shows correctly but the sidebar the shows the part which should be hidden at the bottom and the footer completely vanishes from view! My apologies but this is the best I can do without having the ability to post pics or urls which could better explain what is wrong and frankly speaking I don't know how anyone here can help given my inability to show the problem but hopefully someone knows or has run into this problem before or can offer some resources that may be of assistance.... i ve been playing with my page and been trying to modify the width of the page (divs) according to the browswer's width. The problem is i want the navigation menu on left to be fixed width (say 200px) and the center div and the right column to be variable width. Also, i want to set a minimum width , so that the floating divs dont roll below the navigation menu. here s the link to the page. try reducing ur browser windows size . the content div rolls down under theleft nav menu. http://ccc.1asphost.com/pacemakerpr...r/cicuitlab.htm Also , i get wierd result in netscape navigator. please help I have seen a design which I find pretty interesting where in the main site is aligned left and fixed width at say 700px wide. Yet the footer seems to span the entire screen. The header also seems to use the entire screen width but that is beign accomplished with the background image, but this footer goes all the way to end of the screen and naturally adjusts itself under all the content. Is there a way to get this effect? Hello I have a DIV (let's call it "the parent") which contains three child DIVs. Each of the children has some text in it. Neither the parent nor any of the three children have any special positioning attributes applied to them, and so the parent sizes just so that it wraps the children. So far so good. Now I want another DIV child, which when visible will completly fill the parent (using the size the parent now has because of its other three children, not stretching the parent in any way). I tried giving the parent "position:relative", and giving this fourth child "position:absolute; top:0; left:0; width:100%; height:100%", which works fine in FF but doesn't work in IE. I tried also "bottom:0; right:0" instead of the "width:100%; height:100%", still to no avail. Is there a way to make this work in IE? Is there maybe another way to make this without absolutely-positioning the fourth DIV? Cheers, Calius Sample code follows: Code: <html> <body> This is a test<br /> <div style="width:400px; position:relative; border:1px solid red;"> <div style="position:absolute; background-color:green; height:100%; left:0; top:0; width:100%;">COVER ALL</div> <div style="border:1px solid blue; margin-bottom:16px;">1</div> <div style="border:1px solid blue; margin-bottom:16px;">2</div> <div style="border:1px solid blue;">3</div> </div> This is a test<br /> </body> </html> I'm at the very very very begaining of a table-less design (my first, actually). The problem is, since I have decided to have a non-fixed width, when the browser is minimized, at a certain point the design breaks. See it here (please don't make fun! it's just the start): SiliconSatan.com/test.php I'd like to set a minimum width, probably on the container <div>, so at a certain point it sort of becomes like a fixed width? No smaller than a set width? [EDIT] Also, I have a question about background color mismatch, but it was not quite OT for the CSS forum: http://forums.devshed.com/web-desig...e7t-403266.html Hello, (please also see attached/uploaded style sheet) I'm puzzled why (in the following code) the TEST #2 table renders as required (i.e. 2 rows in 1 column, all with the same cell WIDTH) but the table in TEST #1 seems to render the table cells (i.e. 2 columns in 1 row) without a common cell WIDTH. How can I get all the cells (there are plenty more!) in table TEST #1 to all be exactly the same width (preferably 85px)? Code: <link rel="stylesheet" type="text/css" href="http://thinet/cgi-bin/thinetStyleSheet.css"> TEST #1 <table class="menu" border=1 CELLPADDING=2> <tr> <td class="pinkButtons"><a title="Treats menu" href='http://thinet/theread/forumdisplay.php?s=&forumid=82'>Treats</a></td> <td class="pinkButtons"><a title="New Starters, Leavers and Transfers" href='http://thinet/theread/forumdisplay.php?s=&forumid=41'>Joiners etc.</a></td> </tr> </table> <P> TEST #2 <table class="menu" border=1 CELLPADDING=2> <tr><td class="pinkButtons"><a title="Treats menu" href='http://thinet/theread/forumdisplay.php?s=&forumid=82'>Treats</a></td></tr> <tr><td class="pinkButtons"><a title="New Starters, Leavers and Transfers" href='http://thinet/theread/forumdisplay.php?s=&forumid=41'>Joiners etc.</a></td></tr> </table> I don't think I've quite grasped the idea of CSS yet?!?! Any help/pointers would be appreciated. Thanks, Andy I have a page with an ASP.NET Gridview on it...this Gridview is located in a child DIV inside a parent DIV. That Gridview can often go wider than the parent DIV width set. In IE6 the MAINDIV (Parent DIV) would expand to fit the expanded Gridview contained within the child DIV. In IE7 the DIV will not expand so it overlaps the DIV and looks bad. I want that MainDiv to dynamically grow with the child DIV width, like it did in IE6. Please see my code below. I want the MainDiv to remain ~800px unless it is pushed out further. Thanks for any ideas on a fix for this. Whenever I try min-width it just blows the parent DIV out to 100% screen size. Code:
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
</head>
<body style="width:100%;text-align:center;background-color:#68838B" onload="loadpage();">
<form id="frmMain" runat="server">
<div id="mainDiv" style="position:relative;top:10px;width:800px;height:auto; background-color:white;border:solid 1px #666666">
<div id="contentDiv" style="text-align:left;width:797px; padding:3px 3px 3px 3px;">
<asp:ContentPlaceHolder ID="contentBody" runat="server"></asp:ContentPlaceHolder>
</div>
</div>
</form>
</body>
</html>
|
|||||||