CSS - Force Div Only As Wide As Content?

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

Hi guys,
I've got both long and wide table to be showed and printed.
Customer would like that for scrolling, some left columns will freeze on the left (when printed, will be printed on every page), same for table header (fixed when scrolling, repeated on top of every page when printing).
For fixed table headers, there are lots of tutorials, like:
http://www.cssplay.co.uk/menu/tablescroll.html
And for printing, good browsers can repeat thead on every page (don't know how to achieve this for IE).
But for columns locking (repeating for print), I'm totally stuck. Yes, some stuff can be found for scrolling, like:
http://web.tampabay.rr.com/bmerkey/...column-csv.html
But these solutions usually use JavaScript or are not cross-browser.

Is there any way how to do this?
Primarily for IE 6.0/7.0

Help! I am trying to build my site in CSS. Here is the CSS for my top layer, despite the size being specified to 130px and an image inside it being 130px high, it is still 5px too high... any ideas?

Code:

#page_top_sizing {
	background-color: red;
	width: 764px;
	height: 130px;
	position: absolute;
	top: 5px;
	left: 5px;
	z-index:1;
	padding:0;
}

Thanks.

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

This is the line in my index.html:
PHP Code:
<PRE class=yup>blah blah blah and more blah blah blahblah more blah blah blah yes yes blah blah</PRE> 





This is my PRE code in style.css:
PHP Code:
 PRE {
    BORDER-RIGHT: #2f6fab 1px dashed; 
    PADDING-RIGHT: 1em; BORDER-TOP: #2f6fab 1px dashed; 
    PADDING-LEFT: 1em; PADDING-BOTTOM: 1em; BORDER-LEFT: #2f6fab 1px dashed; 
    COLOR: #000000; LINE-HEIGHT: 1.1em; PADDING-TOP: 1em; 
    BORDER-BOTTOM: #2f6fab 1px dashed; BACKGROUND-COLOR: #f9f9f9;
    width: 90%;
}
PRE.yup {
    COLOR: #000000;
    FONT-FAMILY: Verdana,Arial,Helvetica,sans-serif;
    FONT-SIZE: 12px;
    text-align: left;
    width: 80%;
    margin: 12px auto;
} 





The PRE tag is in a table and i want the long text the same lenght as the short text, but i have no clue how to do it. Any ideas?

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?

how can i keep these 2 divs i have on the same line, i tried min-width for the div they are in and it works perfect but IE doesn't support it, i even tried a extra div to use as a spacer but IE seems to make keep them on the same line even though there is already enough space for it, here is the html i'm using

Code:

<div id="ms_all" ><!-- Start all mapserver -->
<div id="ms_main_map_div">
	
<input alt="Map" id="ms_main_image" type="image" name="mapa" src="map_img.phtml?[data_to_img]" />
	
</div>
<div id="ms_side_bar" >
<!-- A bunch of form stuff -->
</div><!-- End Side Bar -->
</div><!-- End all mapserver -->

and here is the css

Code:

#ms_all			{
			/*padding:5px;*/
			height:610px;
			min-width:810px;
			position:relative;
			
			}
#ms_main_map_div	{
			padding:2px;
			left:5px;
			float:left;
			/*top:2px;*/
			width:600px;
			}
#ms_main_image 		{
			cursor:crosshair;
			width:600px;
			height:600px;
			}
#ms_side_bar 		{
			right:2px;
			float:right;
			padding-top:20px;
			/*top:10px;*/
			padding:2px;
			width:200px;
			/*clear:both;*/
			}

i want the 'ms_main_map_div' and the 'ms_side_bar' to be on the same line, but the 'ms_side_bar' stuff keeps jumping to the bottom of the page if it doesn't fit in the window, so does anyone know of a way to get IE to display this the right way or maybe make IE support the min-width thing, preferably keeping my CSS and XHTML valid

I heve three images - all in their own div - across the page. I want these images centered. I then want text UNDER these images. As you can see in my page, the text is actually starting to the right of my images. Why is this happening?

http://69.89.31.86/~gentryfo/

Thanks.

Here is a snippet of the DIV I am working on. Regardless of what I put in between the h-2 tags, I would like the box to be 320 pixels wide instead of only being as wide as the text within the h-2 tags. I have ended up padding the h-2 content with blank spaces to widen it out. There must be a cleaner solution?

Code:

<div id="box_header">	   	
<h2>Make This 320 pixels wide?</h2>
</div>

Code:

#box_header  h2{
      color:#359764;
      line-height: 35px;
      font-size: 14px;
      padding: 5px 5px 5px 5px;
      border: double #5B85C5;
      display:inline;
      font-weight: bold;
      width: 320px;
}

Pretty Common issue.... I think...

I need my div's background to go all the way down the page.... even on small pages!!

Here is an example...

Sign Up Page

I hate it when browsers jump when the scrollbar appears on a longer page. Is there any way to force scrollbars to stay on the page on all browsers?

Hello all. I have a site with 2 columns. I would like the left column to be the same height as the right column. The right column will always be longer than the left. Here is what I have so far:

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>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <meta name="GENERATOR" content="vi" />
    <title>My page </title>
    <style type="text/css">
      * { font-family: verdana, arial, helvetica, sans-serif; margin: 0; padding: 0; }
      body { background: #0b89b8; margin: 0; padding: 0; }
      #container { width: 100%; } 
      #header { 
        width: 100%;
        color: #ffffff;
        font-size: 2em;
        padding: 0.5em 0;
        text-indent: 0.5em;
        background-color: #00ff00;
      } /* end #header */
      #header p { padding-left: 10%; }
      #side_menu { 
        background-color: #ff0000;
        float: left;
        margin: 0;
        width: 10%;
        color: #ffffff;
      } /* end .side_menu */
      #side_menu ul { list-style-type: none; border-top: 1px solid #ffffff; }
      #side_menu ul li { border-bottom: 1px solid #ffffff; padding: 0.5em 0; text-align: center; }
      #side_menu ul li a { color: #ffffff; text-decoration: none; }
      #content { width: 90%; float: left; background: #ffffff; }
      .content_container { clear: both; padding-bottom: 1em; }
      .content_header_even, .content_header_odd { 
        width: 100%;
        background-color: #69bfde;
        color: #595441;
        padding: 0.5em 0;
        text-indent: 1em;
      } /* end .content_header_even, .content_header_odd */
      .content_header_odd { background-color: #b4e8fb; }
      .content_graph { float: left; padding-right: 1em; }
      .content_graph_info, .content_info { padding: 1em; margin: 1em; }
      .content_graph_info { float: left; }
    </style>
  </head>
  <body>
    <div id="container">
      <div id="header"><p>Header</p></div>
      <div id="side_menu">
        <ul>
          <li><a href="index.php">Home</a></li>
        </ul>
      </div>
      <div id="content">
        <div class="content_container">
          <p class="content_header_even">Subheader</p>
          <div class="content_info">
            <p>Number: 34906607<br />
            Percent: 21.84%<br />
            Size: 1.085<br />
            Total size : 11.78%</p>
          </div>
          <div class="content_graph_container">
            <div class="content_graph_info">Text a. </div>
            <div class="content_graph_info">Text b.</div>
          </div>
        </div>
      </div>
    </div>
  </body>
</html>

Any thoughts?

Hi everyone

I am running a blog that uses xhtml and css style sheets to generate templates. I have about 10 templates that I would like to switch to and from. I want to add a banner on the bottom of the page, but I cannot figure out how to do it correctly.

If I add it to the footer templates, before the </body> tag, it does not always come out correctly. Sometimes it the banner ends up in the 3rd column over to the right, sometimes the banner is obscured by the body of the main column.

I am trying to find a way to forcefully push the banner to the bottom of the page, below all of the text that is generated. I was thinking that perhaps javascript could be used to force a banner underneath, but I am not too familiar with the sort of code that is in my blog.

any ideas?

thanks

Roy

What I have: I have a <div id="content"> that contains the main content of the site. In this <div> I have two other <div>s that are arranged in columns, using float. The left column forms the Navigation for the site and is surrounded by a black border.

Here is the problem: If the content on the right is small, the border on the left stretches from top to bottom (since the left div controls the height). However, when there is a lot of content on the right, the border on the left only surrounds the content of the left div and leaves space underneath the bottom border-line.

My question: Is there a way to "stretch" the left div so the border touches the top of its parent div on top and the bottom of its parent div on the bottom? Or in other words: Can I force the left div to have the same height as the right div?

Here is an example of what I have right now (before tackling the problem):

CSS:
Code:

#content {
	width: 800px;
	margin: 0;
	padding: 0;
}

#contentNav {
	width: 140px;
	float: left;
	border: thin solid black;
	margin: 0;
	padding: 0;
}

#contentMain {
	width: 600px;
	float: right;
	margin: 0;
	padding: 0;
}

HTML:
Code:

 
<div id="content">
	<div id="contentNav">
		<a href="">Link1</a><br />
		<a href="">Link2</a><br />
		<a href="">Link3</a><br />
	</div>
	<div id="contentMain">
		<p>Here comes a lot of text that spans over many lines.
	</div>
</div>