CSS - Table To Edge Of Page

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 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?

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

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

Hi,

Im having a problem centering a DIV table exactly how i want it too.

I want to be use the DIV table so that it will be only a few pixel away from the top.. so lets say 80px from the top and being centered horizontaly, so that it will display the samething for both 1024x768 & 800x600.

ps: the DIV table needs to be aligned to the right so that the image will appear on the right in both 1024x768 & 800x600

I have included/attached a image to kinda give a better idea.

how do i center align table on page with CSS?

Thanks for taking the time to read my question.

I have an events page for my band. The page is layed out using tables.

I'd like to change my pages over to using css.

I'm having problems putting things where they need to go.

Can someone help?

it needs to work for both FireFox and IE

Thanks

Good Page (tables):
www.pierced.ca/pierced-events.htm

Messed up Page (css):
www.pierced.ca/pierced-eventsWithCSS.htm

I've been tweaking a bit of the site I edit for Oxford Hash House Harriers (search Google for Oxford Hash House Harriers and our site will appear at the top) and trying to get a blue bar for the left and right side bars all down the page, which I've now succeeded in doing, however in my changes something has changed because now there is a large gap between any content and a table but only in some browsers. The tables are used for actual data, not for layout. I use CSS and <div> for layout.

The layout is along these lines:

Code:
<body>
<div id="page">

<div id="banner">
<div id="leftlogo"> <!-- logo here --> </div>
<div id="rightlogo"> <!-- logo here --> </div>
<div id="oh3banner"><p class="pagetitle">Oxford H3</p></div>
</div><!-- close div banner -->

<div id="mainbody">

<div id="wrap1">
<div id="wrap2">

<div id="leftnavigation">
</div><!-- close div leftnavigation -->

<div id="rightnavigation">
</div><!-- close div rightnavigation -->

<div id="content">
<h1>Oxford Hash House Harriers</h1>
<h2>Oxford H3 Hash Diary </h2>
<div id="hashdiary">
<table summary="Oxford H3 Run Diary">
<caption>Forthcoming Oxford H3 Hashes</caption>
<colgroup>
<col id="date" />
<col id="postcode" />
<col id="venue" />
<col id="hare" />
<col id="beermaster" />
<col id="chef" />
<col id="run" />
</colgroup>
<thead>
<tr>
<th scope="col">Date</th>
<th scope="col">Post Code & Grid Ref.</th>
<th scope="col">Venue</th>
<th scope="col">Hares</th>
<th scope="col">Beer Master</th>
<th scope="col">Chef</th>
<th scope="col">Run#</th>
</tr>
</thead>
<tbody>

<tr>
<td>data</td>
<td>data</td>
<td>data</td>
<td>data</td>
<td>data</td>
<td>data</td>
<td>data</td>
</tr>
</tbody>
</table>
</div>
</div><!-- close div content -->

</div> <!-- close div wrap1 -->
</div> <!-- close div wrap2 -->

</div> <!-- close div mainbody -->
</div><!-- close div page -->
</body>

Whilst the relevant (I think) parts of the CSS look like this:
DIV#page{
margin-top: 0px;
}

DIV#banner{
width:100%;
background-color : #06168a;
height : 130px;
margin-left : 0px;
margin-top: 0px;
position : absolute;
top: 0px;
float : none;
}

DIV#oh3banner{
clear : none;
background-image : url('images/oxfordh3banner.jpg');
background-repeat : no-repeat;
height : 110px;
margin-top: 10px;
background-position : center;
}

DIV#mainbody{
margin-top: 130px;
}

DIV#wrap1{
background-color : #06168a;
}

DIV#wrap2{
background-color : #06168a;
}

DIV#leftnavigation{
width:15%;
background-color : #06168a;
margin-left : 0%;
float: left;
}

DIV#rightnavigation{
width:15%;
background-color : #06168a;
margin-right : 0%;
margin-left : 3%;
float: right;
}

DIV#content{
width:auto;
margin-left : 15%;
margin-right: 15%;
padding-left: 5px;
padding-right: 5px;
background-color: White;
}

I found to begin with that there was a very large gap between the table and any content on the page in all browsers until I put a <div> </div> around the actual table itself. When I did this the page looks okay in Firefox and Safari, but still looks incorrect in Internet Explorer and Chrome. It looks to me as if the table is being pushed below the content in the right sidebar in IE or the left sidebar in Chrome for some reason.

I've been messing about for a while now trying to get this to work but without success. Can anybody spot where I'm going wrong?
Regards,
James

hi

i have a page that contains a large html table. this table spans many pages (in internet explorer it spans 6 pages). however, when i view the print preview in firefox it only shows 1 of 1 page, and at the bottom of the page, where i would expect a page break to exist, the table continues on and then off the bottom of the page. basically, it seems to be attempting to render the entire table on to one page, even though it won't fit.

has anyone got any ideas how i can make this table print on multiple pages?

i've read somewhere that gecko based browsers have a problem with floated content, but i'm sure i've un-floated everything.

thanks in advance.

dave

Hi there,

I have an HTML/CSS design I'm working on, that can be accessed he

http://www.design-portal.co.uk/demo/

The CSS can be found he

http://www.design-portal.co.uk/demo/style.css

Basically what I would like is this:

I want another static area that always appears at the bottom of the page underneath the main content text. As I've fixed the big box thing's height (it's going to appear the same height on every page) I want the user to be able to scroll to the next page if the text is too long to fit on the one page. I've created a screenshot as an example:

http://www.design-portal.co.uk/demo/images/demo.jpg

As you can see, the text at the bottom allows the user to scroll forwards and backwards. I can do this, but it never appears at the bottom; always just underneath the text above it depending on how much text is in the place. How can I just get the damn thing to stay at the bottom regardless of how much content is above it?

Cheers in advance,

Dave

Hello everyone,

I have a drop-down menu that is currently working well.

The only change I need to make is to have the right edge of the drop-down menu to align with the right edge of the parent menu. When you hover over the menu, it currently "drops" down and to the right, with the left edges aligned.

I want the menu to "drop" down and to the left, so the right edges are aligned.

I have tried fiddling with floats and absolute/relative positioning. I'm not sure what needs to be changed.

Any help you can provide is greatly appreciated! I'm learning via "cut and paste", so please go easy on any terminology you may use.

Thank you!

Here is the page: http://www.littlebuddymedia.com/site05/012.html



The menu currently drops like this (aligned along the left edge): http://www.justskins.com/wp-content/uploads/2008/12/drop-down-menu.gif



I want the menu to do this (align along the right edge; see how "Artists" is aligned under "Music" along the right edge): http://artatm.com/wp-content/uploads/2009/11/mtvmenu.JPG

Here is my code:

Code:

.chromestyle{
     width: 100%;
     font-weight: bold;
     float: left;
     height: 29px;
}

.chromestyle:after{ /*Add margin between menu and rest of content in Firefox*/
content: "."; 
display: block; 
height: 0; 
clear: both; 
visibility: hidden;
}

.chromestyle ul{
border: 0px solid #BBB;
width: 100%;
background: url(chromebg.gif) center center repeat-x; /*THEME CHANGE HERE*/
padding: 4px 0;
margin: 0;
text-align: right; /*set value to "left", "center", or "right"*/
}

.chromestyle ul li{
display: inline;
}

.chromestyle ul li a{
color: #000000;
padding: 4px 7px;
margin: 0;
text-decoration: none;
border-left: 1px solid #DADADA;
}

.chromestyle ul li a:hover, .chromestyle ul li a.selected{ /*script dynamically adds a class of "selected" to the current active menu item*/
background: url(chromebg-over.gif) center center repeat-x; /*THEME CHANGE HERE*/
}

/* ######### Style for Drop Down Menu ######### */

.dropmenudiv{
position:absolute;
top: 0;
border: 1px solid #BBB; /*THEME CHANGE HERE*/
border-bottom-width: 0;
font:normal 12px Verdana;
line-height:18px;
z-index:100;
background-color: white;
width: 200px;
visibility: hidden;
}


.dropmenudiv a{
width: auto;
display: block;
text-indent: 3px;
border-bottom: 1px solid #BBB; /*THEME CHANGE HERE*/
padding: 2px 5px;
text-decoration: none;
font-weight: bold;
color: black;
}

* html .dropmenudiv a{ /*IE only hack*/
width: 100%;
}

.dropmenudiv a:hover{ /*THEME CHANGE HERE*/
background-color: #0000ff;
color: #fff200;
}

I have a textarea in a <td>which asks for users for some description.

If users enter text and don't use any space or enter, the
width of the table gets bigger and bigger and damages the pages
design.


What can I add (to td.fixed_width css for example )to make the line
break after the width of the table is reached???


There is a solution that I put a div in td and then
Code:

#desc {
	width:"100%";
	width::fixed;
	overflow:scroll;}

but it is not exactly what I want

hi every one...

How can I display static headers in a table, so that headers remain visible while user scrolls the table body?

This is not working in IE 7 any working example please

2.
iam having a column which holds data around some 100 to 200 characters...
by default i want to display some 50 characters and rest of the characters can be viewed by moving the column...

if this is possible let me know how to do it with some sample code......i dont know much about CSS

3. One more problem iam facing is with the number of columns displayed in the table.

I have to display around 15 to 20 columns in a table...
with this 15 to 20 columns in a table, i can see scrollbar to the page ....but i dont want scrollbar to the page, instead i want want scroll bar to the table (so that it doesnot effect the design of the page)

I need a fixed table width and height and also fixed column width and height.....
Note: I dont mind if columns are not visible (thru scrool bar i should see the hide columns)

I am generating a list with PHP that is going to be printed out and hung up for display. I would prefer if the following weren't printed.

1) Top Left - Page Title (I know I can have this disappear by having a blank title, but I would prefer to have one)
2) Top Right - Page URL
3) Bottom Left - Page number (ex: 1 of 2)
4) Bottom Right - Date

Is there any way to print the list without these? I wasn't sure if there is some css I can use, or if this is something that the printer prints automatically.

Thanks

Alright, this is probably a simple fix but I can not find the solution anywhere. I'm trying to highlight a table cell with a 2px solid red border when it is clicked.

Is there a way to get this to happen with out changing the size of the cell?

I hope this makes sense. Basically the cell is expanding by 1 px causing movement in the table.