CSS - Table 100% Wide 100 % High

**** EDIT PROBLEM FIXED

Hey guys I'm turning a psd I got from a designer into an html template, but I'm having a little trouble with ie7. It's giving me a ton of space on the right side. I also have a body background set to center and with the space on the right, it's not lining up right.

I've spent way too much time trying to figure out what it is, any help would be awesome.

http://www.bryanlbuchanan.com/sierra/

css: http://www.bryanlbuchanan.com/sierra/includes/style.css


**** EDIT Problem fixed. I had a div nested inside another div that had a defined width. I thought div's inherited the width of it's parent when there was no width defined, but apparently ie7 was rendering the nested div 100% of the screen width while it was offset to the right by about 600px by it's parent. I defined the nested div's width and it all seems to be working fine now.

I'm trying to figure out the exact height of a single line of text in units of em. I have a nice tabbed navigation system going with two levels, but the 1.25em that I had estimated isn't exactly correct (I get some misalignment when changing the font size). By putting a character in a div and modifying the height of another <div> next to it, with the font at max size, I managed to come to 1.165em, but this got misaligned at a few lower font sizes. Does anyone know an accurate measurement for this? Or should I just get it close enough for "normal" font sizes?
In case that didn't make sense, I'll try to illustrate with some ASCII art:
Code:

+---DIV---+ +-DIV-+
|some text| |     |   <- what height should this be to line up perfectly?
+---------+ +-----+

I have a div like this:

Code:

<div class="image_box">
<img src="">
</div>

I have a border and background-color going on w/the div, but I want it to only be as wide as the image. It is stretching as wide as the screen. How do I force it shrink down and only be as big as the image that is inside of it?

This should be simple, I just don't know how to do it. Thanks.

I have a very high div which I want to resize depending on the height availible (it has the central BG image) e.g. if the user is on 1024 they dont have to scroll down for miles to see the whole page. But if the user is on a higher res then the div should become the full length available.

Is this possible?

I thought height: 100%; would work but it doesn't seem to do much. Also had at look at the overflow options but hidden wont do me any good because if the user is on 800x600 then you cant see the rest of the content.

Any help appreciated thanks!

Well i am working on a new design but there's a problem, if you go to www.majd-gfx.com you see that the left column does not stretch fully (as long as the content column)

i have searched for this and found a tutorial on alistapart.com but it wasn't very helpful as i would have had to rework the whole layout. Is there an alternative?


p.s. i have tried height:auto and height:100%...neither worked....

Hi everyone

I have a 3 column layout with a footer. If the content ends up being too wide for the middle column (ie a large data table) I can't get the middle column to push the right hand column beyond the width of the screen. If the right column is absolutely positioned, the middle column just continues underneath the right column (overlaps). If the right column is floated right, it just drops down below the middle column. What I want it to do is bring up a horizontal scroll bar in the browser and let people scroll across for the right column.

Based on the code below, if anyone has any ideas I would be unbelievably greatful. I've been pulling my hair out all day...

My HTML is as follows:

Code:

<div id="content_container"> 
  <div id="lft"> 
   ... 
  </div> 
  <div id="mainbody"> 
   .... 
  </div> 
  <div id="rght"> 
   ... 
  </div> 
  <div id="footer"> 
   ... 
  </div> 
</div>

My relevant CSS is as follows:

Code:

#content_container { 
   position: relative; 
   min-height: 100%; 
   top: 0; 
   left: 0; 
   width: auto; 
   height: auto; 
   border: 1px solid red; 
} 

#lft { 
   float: left; 
   left: 0; 
   top: 0; 
   width: 24%; 
   visibility: visible; 
} 

#mainbody { 
   position: relative; 
   left: 0; 
   top: 0; 
   width: 50%; 
   height: auto; 
   visibility: visible; 
} 

#rght { 
   position: absolute; 
   right: 0; 
   top: 0; 
   width: 22%; 
   visibility: visible; 
   padding-right: 10px; 
} 

#footer { 
   float: left; 
   bottom: 0; 
   left: 0; 
   top: 0; 
   clear: both; 
   width: 100%; 
   margin-top: 40px; 
   padding-top: 15px; 
   padding-bottom: 15px; 
   visibility: visible; 
}

Probably there already was such question, but my Internet connection is very slow and I don't have time to search thru topics.

So, when I put an image into centercolumn that has big width my right column stays where it was, but center column with the picture goes to the right widely, and right column stays over the picture.
But I want right column always follow center column (stays on the right of centercolumn whatever size it is).

How to fix it in css?

here is my code:

BODY {
PADDING-RIGHT:0;
PADDING-LEFT:0;
BACKGROUND:url(img_86.gif) #ddd;
PADDING-BOTTOM:0;
MARGIN:0;
PADDING-TOP:0;
FONT-SIZE:12px;
LINE-HEIGHT:18px;
FONT-FAMILY:tahoma,verdana,geneva,arial,helvetica,sans-serif;
}

.registered {
BACKGROUND-COLOR:#ff9;
}

#centercolumn {
BORDER-RIGHT:#666 0 solid;
PADDING-RIGHT:4px;
BORDER-TOP:#666 0 solid;
PADDING-LEFT:4px;
PADDING-BOTTOM:10px;
MARGIN-LEFT:179px;
BORDER-LEFT:#666 0 solid;
MARGIN-RIGHT:179px;
PADDING-TOP:10px;
BORDER-BOTTOM:#666 0 solid;
}

#header {
PADDING-RIGHT:8px;
BORDER-TOP:#182746 2px solid;
PADDING-LEFT:8px;
BACKGROUND:url(img_87.gif) #314e8c;
PADDING-BOTTOM:8px;
PADDING-TOP:8px;
BORDER-BOTTOM:#182746 2px solid;
}

#leftcolumn {
MARGIN-TOP:4px;
LEFT:0;
WIDTH:180px;
POSITION:absolute;
FONT-SIZE:11px;
LINE-HEIGHT:16px;
}

#rightcolumn {
MARGIN-TOP:4px;
RIGHT:0;
WIDTH:180px;
POSITION:absolute;
FONT-SIZE:11px;
LINE-HEIGHT:16px;
}

#footer {
CLEAR:both;
MARGIN-BOTTOM:12px;
}

.block {
BORDER-RIGHT:#999 1px solid;
PADDING-RIGHT:4px;
BORDER-TOP:#999 1px solid;
PADDING-LEFT:4px;
BACKGROUND:#fff;
PADDING-BOTTOM:4px;
MARGIN:6px 6px 12px;
BORDER-LEFT:#999 1px solid;
PADDING-TOP:4px;
BORDER-BOTTOM:#999 1px solid;
}

.block H3 {
PADDING-RIGHT:4px;
PADDING-LEFT:4px;
FONT-SIZE:11px;
BACKGROUND:#a7b6c9;
PADDING-BOTTOM:4px;
MARGIN:-4px -4px 4px;
COLOR:#26344c;
PADDING-TOP:4px;
BORDER-BOTTOM:#999 1px solid;
}

.block P {
MARGIN:0;
}

.content {
BORDER-RIGHT:#999 1px solid;
PADDING-RIGHT:4px;
BORDER-TOP:#999 1px solid;
PADDING-LEFT:4px;
BACKGROUND:#fff;
PADDING-BOTTOM:4px;
BORDER-LEFT:#999 1px solid;
PADDING-TOP:4px;
BORDER-BOTTOM:#999 1px solid;
}

.entrycontent {
BORDER-RIGHT:#999 1px solid;
PADDING-RIGHT:12px;
BORDER-TOP:#999 1px solid;
PADDING-LEFT:12px;
BACKGROUND:#fff;
PADDING-BOTTOM:12px;
BORDER-LEFT:#999 1px solid;
PADDING-TOP:12px;
BORDER-BOTTOM:#999 1px solid;
}

.content P {
MARGIN:4px 2px;
}

H1 {
DISPLAY:inline;
FONT-SIZE:16px;
MARGIN:4px;
COLOR:#fff;
}

H2 {
PADDING-RIGHT:2px;
PADDING-LEFT:2px;
FONT-SIZE:13px;
PADDING-BOTTOM:2px;
MARGIN:0;
COLOR:#26344c;
PADDING-TOP:2px;
BORDER-BOTTOM:#999 1px dashed;
}

H3 {
FONT-SIZE:13px;
}

.entryfooter {
CLEAR:both;
PADDING-RIGHT:0;
PADDING-LEFT:0;
FONT-WEIGHT:normal;
FONT-SIZE:11px;
PADDING-BOTTOM:6px;
MARGIN:0;
COLOR:#666;
LINE-HEIGHT:16px;
PADDING-TOP:6px;
FONT-FAMILY:tahoma,verdana,geneva,arial,helvetica,sans-serif;
TEXT-ALIGN:right;
}

.entryfooter_linkdump {
PADDING-RIGHT:0;
PADDING-LEFT:0;
FONT-WEIGHT:normal;
FONT-SIZE:10px;
PADDING-BOTTOM:6px;
MARGIN:0;
COLOR:#666;
LINE-HEIGHT:16px;
PADDING-TOP:6px;
BORDER-BOTTOM:#666 1px dashed;
FONT-FAMILY:tahoma,verdana,geneva,arial,helvetica,sans-serif;
TEXT-ALIGN:right;
}

A {
COLOR:#253a69;
}

.prevnext_links {
FLOAT:right;
COLOR:#fff;
}

.searchbox {
FONT-SIZE:10px;
WIDTH:10em;
}

.searchbutton {
BORDER-RIGHT:#000 1px solid;
BORDER-TOP:#000 1px solid;
FONT-SIZE:10px;
BORDER-LEFT:#000 1px solid;
BORDER-BOTTOM:#000 1px solid;
}

IMG.badge {
BORDER-TOP-WIDTH:0;
BORDER-LEFT-WIDTH:0;
BORDER-BOTTOM-WIDTH:0;
MARGIN-BOTTOM:2px;
BORDER-RIGHT-WIDTH:0;
}

A IMG.badge:hover {
MARGIN-BOTTOM:1px;
BORDER-BOTTOM:#314e8c 1px solid;
}

P,HTML,TABLE,TD {
FONT-SIZE:12px;
LINE-HEIGHT:18px;
FONT-FAMILY:tahoma,verdana,geneva,arial,helvetica,sans-serif;
}

#leftcolumn P,#rightcolumn P {
FONT-SIZE:11px;
LINE-HEIGHT:16px;
}

H4,.subtitle {
DISPLAY:inline;
FONT-SIZE:14px;
MARGIN:4px;
COLOR:#fff;
FONT-STYLE:italic;
}

.date_linkdump,.date {
FONT-WEIGHT:normal;
FONT-SIZE:10px;
FLOAT:right;
COLOR:#666;
LINE-HEIGHT:16px;
FONT-FAMILY:tahoma,verdana,geneva,arial,helvetica,sans-serif;
}

.entryfooter A,.date A,.entryfooter_linkdump A,.date_linkdump A {
FONT-WEIGHT:bold;
COLOR:#5c6b8e;
TEXT-DECORATION:none;
}

.date A:hover,.entryfooter A:hover {
FONT-WEIGHT:bold;
COLOR:#5c6b8e;
TEXT-DECORATION:underline;
}

H1 A,.prevnext_links A {
FONT-WEIGHT:bold;
COLOR:#fff;
TEXT-DECORATION:none;
}


and here's screenshot

Hello, I'm afraid I'm back with more problems

I have a 3 column layout. the Left column is floated left, right floated left and the middle column uses left and right margins. I then had cause to set a width on the middle column to give something with Layout for IE.

When I add the width to the middle column, it looks fine in firefox but for some reason in IE, my middle div drops underneath the two floated divs, as if it is too wide.

I have tried debuging by using background colours on the Divs and the width of the coloured area is the same in both browsers. It is as if there is something leaking out the sides. Even on this most basic example. Am I missing something basic?

Code:

<div id="wrapper" style="width:996px; background-color:#666666; margin-left:auto; margin-right:auto;">
	<div id="lbar" style="float:left; width:170px; padding-left:10px; background-color:#FF0000; ">
	  <p>left</p>
	</div>
	<div id="rbar" style="float:right; width:305px; background-color:#0033FF;">
	  <p>right</p>
	</div>
	<div id="middle" style="margin-left:190px; width:491px; margin-right:315px; background-color:#99CCCC;">
	  <p>middle</p>
	</div>
</div>

Thank you for any time taken in reading this

JJ

i have a basic navigation system - 12 items divided into 3 columns - fitted together horizontally in a row. On a windows xp machine with a high resolution display which is set to automatically resize all ie browser pages to make them appear larger (readable or lower-res) - somehow my navigation columns no longer fit into a single row...

as far as i know under all other browsers/platforms the menu appears correctly. i've tested the navigation layout in opera, ie, firefox, netscape on my own windows computer, and have tested the pages using some online site that takes snapshots of your page in various browsers on various operating systems (including linux and apple)....

the problem may be with the way i am calculating the pixels for the div widths? or...?

the page is at gatewoodfarms.com
(gatewoodfarms.com/gwf.css)
a screenshot of the problem is at
gatewoodfarms.com/screenshot.png

here is the Basic Structure/CSS:

<body style="border:0px;padding:0px;margin:0px;min-width:630px;">
<div id="wrap" style="border:0px;padding:0px;margin:0px auto;width:630px;">
<div id="top" style="">
...
<div id="nav" style="border:0px;padding:0px;margin:0px;height:90px;width:630px;">
<div id="nav1" style="width:210px;height:90px;border:0px;margin:0px;float:left;"></div>
<div id="nav3" style="width:210px;height:90px;border:0px;margin:0px;float:left;"></div>
<div id="nav3" style="width:210px;height:90px;border:0px;margin:0px;float:right;"></div>
</div>
</div>
<div id="main" style="border:0px;padding:0px;margin:0px;height:auto;width:630px;top:250px;">
...
</div>
</div>

any ideas how i can fix this? thanks!

I can't connect to W3C CSS and HTML tutorials. Does anyone else have the same problem?
http://www.w3schools.com/css/default.asp

Whats wrong? Did the Iceland Volcano ash break down the site?

Does any one have another good resource that is as concise as WC3?

A number of years ago I created a web site for a mattress store where I worked (7 days a week, for 5 years). The point is this: I'm not a great web designer. The code is ancient and the owner wants me to bring the thing up to date. Using tables, I had a system for creating thin, vertical lines that went up and down the entire heighth of the page. The lines divided the content area from the borders in a neat way - although, again, using very old HTML. It looks like this:
http://www.wholesalewarehouseinc.com
What I'd found was that if I used a fixed-sized header and some tables I could produces the thin line that you see on that page. This was the basic code:
Code:

<table width=100% height=100% cellpadding=0 cellspacing=0 topmargin=0 leftmargin=0 rightmargin=0>

<td background="http://www.wholesalewarehouseinc.com/lf.gif" width=50% align=left><td width="1" background="dot.png">
<img src="dot.png"></td>
</td><td valign=top>
<table cellpadding=0 cellspacing=0 border=0 rightmargin=0 leftmargin=0 bottommargin=0>
<img src="logo.png"></td>
<td background="http://www.wholesalewarehouseinc.com/lf.gif" width=100% align=left><td width="1" background="dot.png">
<img src="dot.png"></td>
</table>

My question is this, and maybe this is too general for a meaningful answer. Is there a way to do the same sort of thing with CSS?

I've run into a problem with a 3-column layout I'm making. The problem is to get the columns equally high. Previously I've just made the "illusion" of equally high columns by making a background image and repeating it in the y-direction (like this). This works fine as long as the page has a fixed with - in this case the left and right column have a fixed width but the center column is dynamic.

So, how can I make all the columns look equally high? (without using tables, obviously)


Btw, I can't show you an example of the page, but hopefully you'll get the picture and could point me to an article or something about the subject.


EDIT: Never mind! I found an example and it worked!
http://www.pixy.cz/blogg/clanky/css-3col-layout/ <-- thats the one.

Hi,

Instead of organising an image sprite as follows:

image image image
image image image

i'm wondering if there are any negative effects to organising the images in a linear fashion as follows

image image image image image image

I know that Flash will only render images that are a certain width or height but is there any such limitations when using css sprites?



Thanks

Hi,

I am a wannabe css compiler...

Have the following problem.

wrote css for a square screen monitor and placed css box in an area to the right of center, my partner called and told me it sat to the left over the side menu onher wide screen.

I cannot figure out how to compensate the (top/left) position to cover both type screens...

Anyone help me?