|
CSS - Make Div Expand The Rest Of The Empty Space
First off, I apologize if my explanation is bad. Also, please refer to the link below. You will have to delete from the spaces from the URL because I was not allowed to post a url since I am a new user :/
http://img240. imageshack. us/my.php?image=forumexplanationje5.jpg This is what I want to do... I want to make a "table" in css. I want to make the "table" always be 890px. The css for the orange items would be .orange { margin:0px; padding:20px; } Now, I want the width of the orange items to be the width of the text in them + the padding. So basically the width is going to be dependant on the text in the tag. My problem is that I don't know how to make the blue part fill up the rest of space without knowing what the width of the orange part is. Please help, thanks. Similar TutorialsI have 2 div .In top div i have menu.In bottom div i have iframe . i want that top div should take about 20 % space and bottom div take rest of the space .iframe refresh every min and it content changes everytime .Currently scrollbar are appear both horizontally and vertically . How can i remove this scrollbar. I give a sample code <body class="body"> <div class="container"> <div class="top"> some contents here </div> <div class="bottom"> <iframe class="iframeclass></iframe> </div> </div> </body> how i design this classes The content of iframe is dynamic its height change everytime page refresh. I have stripped the whole page down to the bare bones and can not seem to get the center DIV to be the same height as the rest of the page. Is there a simple fix for this or would I need to redo it completely ? The left and right content is not always the same so their height is also variable. I have a min-height in the center DIV, and using height 100% does not seem to work either. Can anyone suggest what I could change to make it the same or suggest how I redo this so it is. Code:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Welcome to our web site</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css"><!--
body { border: 0em solid #000; background-color: #ddd; }
.bodyContainer { background-color: blue; height: 100%; width: 71.875em; margin: 0em auto; padding: 0em 0em 0em 0em; border: 0em solid #000; border-top-left-radius: 1.125em; border-top-right-radius: 1.125em; }
.menu { background: #3F65CC; margin: 0em; text-align: center; font-size: 1.1em; font-family: Broadway; border: 0em solid #EDB6B6; padding: 0.313em 0em 0.313em 0em; border-top-left-radius: 1.125em; border-top-right-radius: 1.125em; }
.clearfloat { clear: both; }
.leftSidePanel { background-color: blue; float: left; width: 8.835em; min-height: 43.75em; padding: 0.313em 0.625em 0em 0.625em; }
.mainContent { background-color: lightblue; margin: 0em auto; text-align: center; border-left: 0.5em solid #ddd; border-top: 0.3em solid #ddd; border-right: 0.5em solid #ddd; float: left; width: 49.4em; min-height: 43.438em; height: 100%; padding: 0.625em 0.625em 0.625em 0.625em; border-top-left-radius: 1.125em; border-top-right-radius: 1.125em; }
.formWrapper{ margin: 0em auto; min-height: 43.375em; border: 0em dashed #E5E5E5; padding: 0em; text-align: left; border-top-left-radius: 1.125em; border-top-right-radius: 1.125em; }
.rightSidePanel { background-color: blue; float: right; width: 8.835em; min-height: 43.75em; padding: 0.313em 0.713em 0em 0.313em; }
.footer { background-color: #ddd; margin: 0 auto; text-align: center; padding: 1em 0em 0em 0em; border: 0em solid #fff; font-size: 0.875em; }
--></style>
</head>
<body>
<!-- bodyContainer start -->
<div class="bodyContainer">
<!-- menu start -->
<div class="menu">
<div class="clearfloat"></div>
</div>
<div class="clearfloat"></div>
<!-- menu end -->
<div class="leftSidePanel">
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
</div>
<!-- mainContent start -->
<div class="mainContent">
<div class="formWrapper">
<br><br><br>
</div>
</div>
<!-- mainContent end -->
<div class="rightSidePanel">
</div>
<!-- Footer start -->
<br class="clearfloat">
<div class="footer">
some text
</div>
</div>
<!-- body container end -->
</body>
</html>
http://www.thegi.net/tree/retail.htm I'm taking a Photoshop layout and turning it into HTML for a friend of mine. I just started the HTML process and am having issues right off the bat. NOTE: Pardon the semi-complete markup, I like to make small HTML documents locally to get the pieces to line up correctly and then I merge it with the final document template once it works. If you look at the above link in FireFox you will see everything lines up correctly, but in IE 7 (and maybe other browsers, I haven't gone that far yet) you will see gaps below the top set of divs and above the bottom set of divs. I have tried setting the margins and padding to 0 with no luck. Any ideas? Edit before posting: ACK! I solved it in IE by adding a DOCTYPE. Guess quirks mode made it render stupid. Is there anything I should be aware of here regarding this issue? Any pointers or gotchas I should look out for? I am a hell of a PHP developer, CSS is my weak point =) EDIT AGAIN! I am also going to move the styles into an external sheet once I get it working. I am building this layout using strict xhtml and css. Now I run into a problem with the menu buttons. On Firefox they look just like they should. Though, Internet Explorer 6 adds an empty space between each button. See the example page and CSS. Basically, Internet Explorer adds that space under images. You can also see it under the header image. Any idea on how to fix it? I tried to add overflow: hidden; - it seemed to fix the issue with the header div, but did not make any effect in the list. Actually, in THIS case, as in the example page, I could make it without using images. Add text, borders and so on, which would probably fix the problem, but there are cases when I just want to use images. Both, Strict XHTML and CSS of the page are 100% valid. Thanks, Timo I have the following code. I realize some of you are going to cringe when you see the tables in the div tags. This application was completely tables a few months ago and I have nearly completed the switch to divs.. but this page is a generated page that is customizable and I haven't had the time to spend on converting it. unfortunately I cannot give a link to this page. I've believe I've slimmed this down to only the relevent code. The extra space occurs after the outerImageTable's content. If I set the outerImageTable's background color then the extra space also changes colors so it is part of the outerImageTable. note: There would actually be multiple instances of the innerImageTable each representing a tab. Code: <div id="content" class="ParentDivBrowse"> <div id="subContent" class="ChildDiv"> <div class="outerImageTable"> <div class="innerImageTable"> <img src="/XXXXYYYY/images/leftselected.bmp" /> <button class="XXXXTabSelected" tabindex='-1' type="submit" name="DLG1_T801_MAIN" value="0" onClick="buttonClick(this)"> Mainn </button> <img src="/XXXXYYYY/images/rightselected.bmp" /> </div> </div> <div style="float:left;"> <table border="0" cellspacing="0" cellpadding="0" width="100%"> <tr> <td colspan='2' valign="middle"> <table class='XXXXDlgTable'> <tr> <td colspan="2" height="60%"></td> </tr> </table> </td> </tr> </table> <table class="XXXXActionTable"> <tr> <td class="XXXXActionTable"> <table class='XXXXActionWidthFix'> <tr align='center'> <td width='0'></td> <td align='center' class='ActionButtons'> <button title='Clear' onMouseOver="Clear_img.src='/XXXXYYYY/images/actions/shadow/action_clear.png'" onMouseOut="Clear_img.src='/XXXXYYYY/images/actions/plain/action_clear.png'" onClick='buttonClick(this)' id='button_Clear' name='Clear' tabindex='-1' value='Clear' type='submit'> <img vspace='0' width='16' height='16' name='Clear_img' src='/XXXXYYYY/images/actions/plain/action_clear.png'> Clear </button> </td> <td width='0'></td> </tr> </table> </td> </tr> </table> </div> </div> </div> Thanks if anyone can help me. CSS entrys Code:
.OmniTabSelected{
font-size: 12px;
font-family: avenir, arial;
color: white;
background-color: #826182;
border-top:1px solid;
border-bottom:1px solid;
border-top-color:black;
border-bottom-color:#826182;
border-left: 0px;
border-right: 0px;
height:19px;
vertical-align: top;
margin-right: -2px;
margin-left: -2px;
padding:0px;
padding-right:8px;
padding-left:8px;
padding-right:expression('2px');
padding-left:expression('2px');
}
.innerImageTable{
position: relative;
float: left;
cellspacing:0px;
cellpadding:0px;
border: 0px;
margin-top:-2px;
margin-top:expression('-4px');
white-space: nowrap;
vertical-align:;
}
.outerImageTable{
position: relative;
float:left;
cellspacing:0px;
cellpadding:0px;
border: 0px;
margin-top:2px;
margin-top:expression('4px');
}
.ParentDivBrowse {
position: relative;
width: 100%;
width:expression(document.body.clientWidth < 997 ? '997px' : '100%');
min-width:997px;
max-width:100%;
overflow:hidden;
}
.ChildDiv {
position: relative;
width: 100%;
width:expression(document.body.clientWidth < 997 ? '837px' : '100%');
}
So probably my topic title explains my problem pretty clearly, but basically I've got this div and I'd like it to expand downward as I fill a div contained within with content. Can anyone explain how I can do this? I tried placing a fairly tall picture in my inner div and right now it extends past the bottom of the outer div and looks really weird. Actually if there was even just a way I could tell the outer div exactly how tall the inner div is, that would also be fine, but I can't find a way to do this. I've tried the height: 253px; tag, but it hasn't changed anything. My outer div still doesn't go as far down the page as the inner one, so I'm left with an image thats halfway sticking out my content box. Any help would be great, thanks! Thanks for taking the time to read my question I am starting to make a page, and for some reason I have a white space between two sections of my page. I don't know why. I don't have a domain for this page yet, so I've put it under my band domain. The space is between the Menu and the info portions of the page. Any ideas? http://www.pierced.ca/kelly/ css: Code:
@charset "iso-8859-1";
body {
text-align:center;
margin-top: 10px;
background-color: green;
background-image: url(C:/Documents and Settings/McIntyBD.MAPLELEAF/Desktop/Kelly/images/fall-leaves.jpeg)
/*background-color: #d8d8d8;*/
}
#frame {
width: 640px;
text-align: center;
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
background-color: white;
}
#header {
width: 640px;
height: 100px;
color: #A6A6A6;
background-color: #b12514;
padding-top: 20px;
padding-left: 8px;
padding-right: 20px;
padding-bottom: 8px;
/*border: medium solid #E0E0E0;*/
}
#footer {
width: 640px;
height: 20px;
background-color: #b12514;
color: #A6A6A6;
padding-top: 20px;
padding-left: 8px;
padding-right: 20px;
padding-bottom: 8px;
/*border: medium solid #E0E0E0;*/
}
#menu {
color: white;
font-weight: bold;
float: left;
width: 100px;
height: 400px;
text-align: left;
text-transform: uppercase;
font-size: 20px;
background-color: #FD9800;
/*border-left: medium solid #E0E0E0;
border-right: medium solid #E0E0E0;
border-bottom: medium solid #E0E0E0;*/
padding: 8px;
line-height: 25px;
}
#menu a:visited {
color:aqua;
font-size: 12px;
width: 84;
}
#menu a:hover {
color:#005c00;
font-weight: bold;
font-size: 12px;
width: 84;
}
#Menu a {
color:yellow;
font-size: 12px;
width: 84;
}
#info {
background-color: #ffc047;
color: #005c00;
height: 400px;
padding-top: 20px;
padding-left: 8px;
padding-right: 20px;
padding-bottom: 8px;
text-align: left;
font-size: 16px;
}
#info p {
text-indent: 12px;
font-family: ZapfChan MdIt BT;
letter-spacing: 4px;
line-height: 25px
}
a:visited {
color:#FFFF00;
font-size: 12px;
}
a:hover {
color:#FFFFFF;
font-size: 12px;
}
a {
color:#A0E5FF;
font-size: 12px;
}
Hello. I have just finished migrating my vbulletin template to XHTML 1.1 strict and it validates just fine. The css shows 2 errors but they are known and have no effect on the display (effective for windows resizing). My question is why do I have ~500px of white space to the site of my http://forums.xedge.net ? I did a * { border: 1px solid red; } to see where the space lined up in the scheme of things and it looks like it's part of the main div (siteWrap). Code:
/* *** This wrapper sizes the appearance of the entire site *** */
div#siteWrap {
width: 95%;
min-width: 770px;
margin-left: auto;
margin-right: auto;
background-color: #606A8C;
}
siteWrap sets the page to render at 95% of the current window. I also have a div for contents which gives 15px to the left and right to give spacing for all following elements. In researching this problem I have read that percentage widths sometimes can be problematic with static paddings, but it was working at one time. I just can't figure out what I did wrong. The white space only appears in firefox, in ie and opera the site renders perfectly. Thanks. Hi I have a page that looks something like this Code:
<style>
#container {
border: solid 1px #000000;
width: 600px;
padding: 10px;
}
#banner {
height: 200px;
width: 600px;
background-color: #FF0000;
font: bold 20px Arial, Helvetica, sans-serif;
}
#layer {
position: relative;
top: -198px;
height: 196px;
width: 150px;
z-index: 1;
left: 2px;
background-color: #FFFFFF;
}
</style>
<div id="container">
<div id="banner">Hello</div>
<div id="layer">This is a layer</div>
<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore
magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis
nisl ut aliquip ex ea commodo consequat.
</p>
</div>
If you view that site, you will see that there is an empty space below the banner-div, which is reserved for the layer. I need to get rid of that empty space, in other words, I want the text to begin right after the banner-div. Any ideas how I can accomplish this? Using relative positioning for the text is not possible, because of the structure of the rest of the page (which I haven't pasted here). [edit] Floating the layer will work partially, the text will begin right below the layer, but there is still an empty space on the left side of the text - that has to go too. [/edit] All help is appreciated. Thank you in advance - Kimppa I've looked over a couple of answers and they didn't seem to help me. I have a css "container" box defined like so, containing another "content" box. I'd like the container's height to stretch to contain whatever is in the content box. #container { width: 720px; height:????????????????; margin: auto; text-align: left; position: relative; } #content { position: relative; left:125px; top: 105px; width:500px; border:0px solid #000; } with html like so: <div id="container"> <div id="content"> </div> </div> The content always spills over, unless I set overflow, but that does not solve the problem. Hi there, Not entirely sure this is a CSS issue, but something tells me it is... I'm getting a weird space at the top of my pages in IE, which consequently causes the header to not align properly with the header background image. It works just fine with FireFox though. You can view the issue he http://hsdc.groundedgroup.com/ Does anybody know how to remove this space? Thanks in advance. Check it out: http://www.wdoucette.com/awards/ Look at the part that looks like this: - link 1 - link 2 You can hover over the empy space after "link 1" and it clicks "link 1"! If I put a space before the "<br>" code after the link, the problem goes away. Know what causes it? (BTW, this is a site I'm creating for my father. It is unfinished.) I've got the div below Code:
<style>
div
{
height: 100px;
position: absolute;
overflow-y: auto;
}
</style>
<div>
Some text goes here<br>
Some text goes here<br>
Some text goes here<br>
Some text goes here<br>
Some text goes here<br>
Some text goes here<br>
Some text goes here<br>
Some text goes here<br>
Some text goes here<br>
</div>
This div is the width required to hold the text. Unfortunately once the scroll bar is added to the div it obscures the text. Is there a way to make the div expand horizontally that bit extra required by the scrollbar? I know i can put padding-right on the div. I'm looking for a way that will only expand if further if a scrollbar is needed. Hi guys! Just wondering if this is an easy fix, otherwise I'll just switch the layout to a table. HTML: Code: <div id="box"> <div id="left"> <h1>MENU left</h1> <p>Content on the left.</p> </div> <div id="content"> <p> content... </p> </div> <div id="right"> <p>content...</p> </div> </div> CSS: Code:
#box {
width:750px;
margin: 0px auto;
padding:0px;
border:1px;
}
#content {
width:400px;
padding:0px;
float:left;
overflow: auto;
}
#left {
width:173px;
padding:0px;
float:left;
background-color: #223344;
border-color:white;
}
#right {
width:173px;
padding:0px;
float:left;
background-color: #223344;
border-color:white;
}
I want all three columns to expand vertically to the size of the largest column. As of right now it's set up using CSS and I would prefer to keep it that way, but if switching the layout to tables would be much easier, I would be happy to do that too. Thanks for the help in advance! I am having a problem with a menu generated by a CMS. Basically it generates a series of nested unordered lists for the navigation. It only shows a parents children menu items if you are within that section. The problem is that it still outputs the unordered list and list item elements for the other child menus, but just leaves them blank. Leaving something like this: Code: <ul><li></li> <li></li> <li></li> <li></li> <li></li> </ul> This works fine in Firefox... but of course when you get to IE, it leaves big vertical spaces in the navigation. Unfortunately, I can't attach any IDs or classes to the child UL or LI elements. There is only one ID on the main UL, <ul id="subnav">. So my question is, can anyone think of a way that I can modify my CSS to take out those blank spaces created by empty <ul>s in IE? You can see the page he http://www.holidaytravelincentives.com/index.php/products/air-accommodations/ Hi, I was wondering if it is possible to make a div, where only the images have a margin. How would I do that ? Can anyone help me thx! greez OK...thbbt. Situation 1 (the one that works as I want) Code: <table style="width: 100%">
<tr>
<td style="width: 15em">Column 1</td>
<td>Column 2</td>
</tr>
</table>
In Situation 1, the second column expands to be all of the remaining width. This is good. Situation 2 Code: <table style="width: 100%">
<tr>
<td style="width: 15em">Column 1</td>
<td>Column 2</td>
<td>Column 3</td>
</tr>
</table>
In Situation 2, column 2 and 3 share the remaining space. I want column 2 to take no more than exactly the space it needs. I want column 3 to expand to take all the remaining space. The only way I've found that (sorta) works is to actually use the old HTML width="" attribute and make it a percentage that's impossible. If you make it 95% or something, then all the other columns squeeze down pretty far. The issue with this approach is that it ignores the style width of the first column and just crushes it as much as possible. Anyone have an idea? Thanks Tim |
|||||||