|
CSS - How To Stretch Table Vertically Onto An Edge?
I would like the content table on the website to stretch as to the edges of whatever space it is taking up. But when I view the page, the table doesn't stretch vertically down until it hits the bottom edge. Any ideas?
PHP Code: .content { height: 100%; width: 100%; } Similar TutorialsI'm setting up a template for a page where there's essentially three rows. Header, content, and footer. I set the entire table to be 100% vertical and I've also set the table in row 2 (the content row) to be 100% vertical. But when I view the page in IE, the content row only stretches as much as there is content, but I'd like it to stretch and hit the bottom edge of the page even if there is not enough content. Any ideas? Experimenting with layouts.... How do I get the right-hand DIVs (content = 'two') to automatically stretch down to the same height as the left-hand DIVs (as table cells would): Code:
<HTML>
<HEAD>
<STYLE>
.frame {
margin-left : 5%;
width : 90%;
font-size : 1em;
text-align : center;
}
.header {
width : 800;
border : 0.05em dashed black;
text-align : center;
}
.header1, .header2, .header3 {
float : left;
margin : 1px;
vertical-align : center;
font-size : 0.8em;
position : relative;
border : 0.05em red solid;
}
.header1 {
text-align : right;
width : 750;
}
.header2 {
text-align : center;
width : 40;
}
.clear {
clear : both;
}
</STYLE>
</HEAD>
<BODY>
<DIV CLASS="frame">
<DIV CLASS="header">
<DIV CLASS="header1">One<BR>One Again</DIV>
<DIV CLASS="header2">Two</DIV>
<DIV CLASS="clear"></DIV>
<DIV CLASS="header1">One</DIV>
<DIV CLASS="header2">Two</DIV>
<DIV CLASS="clear"></DIV>
<DIV CLASS="header1">One</DIV>
<DIV CLASS="header2">Two</DIV>
<DIV CLASS="clear"></DIV>
<DIV CLASS="header1">One<BR>One Again</DIV>
<DIV CLASS="header2">Two</DIV>
<DIV CLASS="clear"></DIV>
</DIV>
</DIV>
</BODY>
</HTML>
Is it somehow possible to stretch a containing (relatively positioned) div vertically around its child p's, which are absolutely positioned, without setting the height of the parent? I have tried the following code, which - obviously - does not work: 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" xml:lang="en" lang="en"> <head> <title></title> </head> <body> <div style="position: relative; width: 764px; border: solid 1px #C63949; background-color: grey;"> <p style="position: absolute; left: 255px; top: 29px; width: 164px; height: 113px; background-color: orange;"> </p> <p style="position: absolute; left: 25px; top: 27px; width: 198px; height: 175px; background-color: blue;"> <a title="x.jpg" href="x.jpg"> <img alt="x.jpg" src="x.jpg"/> </a> <br/> <strong>description</strong> </p> <p style="position: absolute; left: 255px; top: 151px; width: 168px; height: 164px; background-color: red;"> another div </p> <p style="position: absolute; left: 436px; top: 34px; width: 238px; height: 138px; background-color: green;"> <a title="y.jpg" href="y.jpg"><img alt="y.jpg" src="y.jpg"/> </a> </p> <p style="position: absolute; left: 29px; top: 220px; width: 182px; height: 153px; background-color: yellow;"> <a title="z.jpg" href="z.jpg"> <img alt="z.jpg" src="z.jpg"/> </a> <br/> <strong>description</strong> </p> testing testing testing </div> </body> </html> The problem is, I am using a online editor which creates the code for the child. I cannot change that css code. I am able to add to it, or change the css for the parent. If you have a suggestion how I can stretch the containing div, so it goes just below the lowest p, I would be very happy! EDIT: I just read on http://css-discuss.incutio.com/?page=AbsoluteOrFloatLayout "There is no way to instruct other parts of the page to start or end with respect to the absolutely positioned element" If this is true, than is there another way I can solve this problem? All I wanna do is to stretch my container div vertically depending on the maincontent div part of my css PHP Code: body { margin: 0px; background-color: #000000; text-align: center; /*height: 100%;*/ } #container { /*using this to center*/ margin-right: auto; margin-left: auto; width: 720px; height: 100%; padding-top: 0px; position: relative; border: 1px solid #FFFFFF; <<<<-----bottom-border must stretch, sort to speak } #mainContent { /*div on the right of my nav-div*/ width: 560px; height: 100%; right: 0px; top: 40px; position: absolute;/* voor ie*/ text-align: left; background-color: #FF0000; } But my border(container div does't stretch) Complete PHP Code: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <title>Untitled Document</title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> <style type="text/css"> <!-- body { margin: 0px; background-color: #000000; text-align: center; /*height: 100%;*/ } #container { /*using this to center*/ margin-right: auto; margin-left: auto; width: 720px; height: 100%; padding-top: 0px; position: relative; border: 1px solid #FFFFFF; } #mainContent { width: 560px; height: 100%; right: 0px; top: 40px; position: absolute; text-align: left; background-color: #FF0000; } --> </style> </head> <body> <div id="container"> <div id="mainContent"></div> </div> </body> </html> Any tips, solutions Hello, I have a page that has one big table covering all areas. The problem is that there is a tiny white gap between edges of the table and the edge of the page. How do I eliminate this? Thanks, Jeff I'm trying to vertically align two divs inside a table cell. I have the cell's vertical-align property set to text-top because I want the first div to be aligned at the top of the td but I can't, no matter what I try, get the second div to align to the bottom. Is there a better way to accomplish this without nesting tables or is this the right way and I'm just missing something? How would I prefectly fit a table or div against the edge of a browser without any white space? I've tried setting the margin border to 0px without any success. I can't believe I need to ask this simple task but I am stuck. I have a container on top of screen for a horizontal menu on far right and text on far left. I use float right for text links on right and just display text on left no problems I thought. The links on the right go flush in top-right hand corner and I use margin-top to bring them down a bit. I can't move the links in from the far-right edge as it is flush againt it. I use margin-right/left to no effect. q) when using float right I want a space between the edge of right screen ? Im think to accomplish a rounded edge I could create an image and then create a small td for it with all borders set to 0 so it would fit the rest of the black thin border on the table. However is there a better way to accomplish this effect? I was thinking maybe float? Hi all, For some reason, my site (http://www.emineer.com) cuts off a bit when viewed on an iPhone. Here's a screen-capture to show what I mean: You can see that the right edge of the top blue background is getting cut off (it should stretch to the edge of the screen). It even happens on inner pages: As you can see, the right side of my site is cut off a bit. I have width set to 100%, so I'm not sure why this happens. It's not my phone because other sites work just fine. Any reason for this? I have been trying to figure out how to achieve this layout with css for about an hour. I'm sure it is something very simple that I am missing. Can anyone help? It looks like the image at the address below. tophermorrison.com/css_layout.jpg I have 3 divs 1.banner (100px tall 100% wide) 2.content (100% tall 650px wide) 3.image (100px x100px) I want the image to stay relative with the content and the content to be centered. The image should be 0 from the top and centered over the right edge of the content. Is this possible? Greetings, I have the following in a style sheet: Code:
.nameColumn {
width: 200px;
}
.groupColumn {
width: 100px;
}
.statusColumn {
width: 682px;
}
In the body of the page, I have table rows like this: Code: <tr> <td class=nameColumn>foo</td> <td class=groupColumn>bar</td> <td class=statusColumn>foobar</td> </tr> Even though I have declared widths, they show up differently on Windows IE7 than on Mac Safari. In IE, the "statusColumn" column falls short of the right edge of the window. Is there a way, with the width property, to make the rightmost column automatically stretch to the right edge of the browser window? If I use width:auto, it makes the cell only as wide as the text it contains. Thanks!! DM I am using the code shown he http://webdesign.about.com/od/css/a/aa072406.htm Code:
.container {background:#ccc; color:#fff; margin:0 15px;}
.rtop, .rbottom{
display:block;
background:#fff;
}
.rtop *, .rbottom *{
display: block;
height: 1px;
overflow: hidden;
background:#ccc;
}
.r1{margin: 0 5px}
.r2{margin: 0 3px}
.r3{margin: 0 2px}
.r4{
margin: 0 1px;
height: 2px
}
Code: <div class="container"> <b class="rtop"><b class="r1"></b> <b class="r2"></b> <b class="r3"></b> <b class="r4"></b></b> CONTENTS GOES HERE <b class="rbottom"><b class="r4"></b> <b class="r3"></b> <b class="r2"></b> <b class="r1"></b></b> </div> the code works ok, but i would like it tweaked so the text is not so close the the egdes, the top and bottom seems ok but it is the left and right margins that are too close to the edges, can these inner margins be increased so the text is not so close? thanks in advance for your help hello genius people... please help this designer move more toward css after years of tables and images... I have a prob with ie 5 and 6 [not sure on 7] showing the content of a scrolling div outside of a containing frame. http://jodihelmer.com/portfolio.html and http://jodihelmer.com/journal.html the content in the scrolling frame shows up outside of the centered content. one possible fix I came up with is to increase the size of the divs at the edge and give them a background color. this seems to work. but, I also need to hide the content to thetop and left of the frame as well. is there a way to keep these divs within the centered wrapper while allowing them to expand to go to the edge of the browser window's relative size? or is there a better way to do this altogether? thanks so much. s Is there any way to make divs stretch to fit the content of the div? I don't want to hear about how to make them stretch to the size of the page. How do you get them to streth to fit what is in them? right.... i have two fixed width columns and i want them to be the same height - the height of whichever has the most content. so i figured i do something like: +---------------------+ | +-----+ +----+ | | | | | | | | | | | b | | | | a | | | | | | | +----+ | | | | | | +-----+ | +---------------------+ (OK - problems with spaces and non breaking thingy.. do you get the idea though? ) the container div will stretch to fit the content, divs a and b will increase in height depending on content. so i was thinking if i set divs a and b to be 100% height it would work. however, this will do nothing if i haven't defined the height of the parent (container). so i think, ok, i'll set that to 100% as well. however this does not work. when i say "does not work" i mean the following: my container div fills the viewport. the column divs stretch from the bottom to the top of the page. -- all ok this far. when i add a load of content, i the div (a or b) will stretch beyond the viewport BUT the other one doesn't. now.. does anyone have any ideas of how i could do this? has anyone seen this anywhere? any help appreciated. d Hi, I am editing a dynamically driven site and I don't have access to edit the HTML code, just the CSS. I have a <div> with content in it within a <td> tag. When the div stretches past the width of the <td> tag it makes the table cell wider. Is there any way in CSS to have it not stretch the width of the cell? The <div> has an id="mylinks" on it, however the <td> or the <table> doesn't have any id or class on them. I'm pully my hair out trying to figure out a fix, any help would be greatly appreciated, Thanks in advance Can someone please tell me what the font-stretch property within CSS does? I have been playing around with the following online example, but the way the text is rendered never changes. [access the world wide web]w3schools.com/js/tryit.asp?filename=try_dom_style_fontstretch Could someone please tell me how to use the font-stretch property? I am just trying to see what it does. Thank you! I have been trying to work a lot with CSS3 to rotate, scale, etc. One effect I've been trying to figure out is how to stretch something. I could scale it along the y axis but that's not really stretching. A stretch would mean the top and bottom (or left and right) sides would curve inward. How can I distort an element in this fashion? Hello... I'm having some trouble. I have a container div set to 100% width. I have 2 small fixed width divs floated right and left and then a div between them that needs to stretch to fufill the 100% width while showing the background image of the container div. Works in Firefox, IE7... not so much. Any help is appreciated in advance CSS #container { width: 100%; background: url('images/topM.gif') repeat; } #leftFloat { width: 30px; float: left; } #rightFloat { #width: 30px; float: right; } #middleStretch { height: 25px; } --------------------------- XHTML <div id="container"> <div id="leftFloat"/>image goes here</div> <div id="rightFloat">image goes here</div> <div id="middleStretch">this div should stretch to fill the space between the left & right floats showing while repeating container background image</div> <!--end #container--></div> |
|||||||