CSS - Problems: 4 Columns (var Width) All Centered

Trying to delete my post but no option to delete so just removing content.

Hi, I have a multi-column layout where I want every column to always be the same height. Any one of the columns may be the longest on any given page, so the other columns have to automatically adjust to match that height. Usually I'd just use the faux column technique where you repeat a background image, but that won't work because of two elements on this page:

1. each column has a border all the way around it.
2. one column resizes with the page.

I've read the articles on liquid layouts with faux columns, but as far as I can tell those techniques won't work if your columns have borders.

Does anyone know any technique that would work here?
Thanks.

Hello,
im trying to make Fixed width 3 columns (each column have fixed width) layout 100% height with header and footer.

-Well I see alot of examples around the web, but i dont see complete one and im really tired of searching, i made the Fixed width 3 comlumns layout, left and right are absolute position, and center is relative to the header

-the problem is that all columns dont fill the whole height of the browser windows, the footer doesnot work good. so the whole thing is missed up, so please show 100% working example of what i need.

Thanks in Advanced
Samer

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 all,

I'm trying to achieve the following:

<div id="left">This column is of blue background, and stretches all the way to the left.</div>

<div id="center"> THIS COLUMN IS FIXED WIDTH, 760px </div>

<div id="right">This column is of red background, and stretches all the way to the right.</div>

Hope that is self explanatory.. I've Googled all this but can only find solutions for fluid "center" columns with fixed width right/left columns. I'm trying to do the opposite. Could anyone let me know how I can do this?

I've got some messy CSS that definitely needs to be corrected, I'm trying out different things so here's my 'trial& error' code:
Code:

	#left {
		background-color: blue;
		float: left;
		margin: auto;
		position: absolute;
	}
	#center {
 		background: #DFDFEB url(../images/body/top.jpg) no-repeat;
		width: 760px;
		margin: 0 auto;		
	}
	#right {
		background-color: red;
	}

Thanks in advance!

Hope someone can help with this i've set this code below

<table width="160">
<tr>
<td><div class="mystyle">some text here</div></td>
</tr>
<tr><td>...some other stuff...</td></tr>
</table>

The div style sets padding, background colour, font colour and a background image that's aligned to the right hand side;

.mystyle {
font-size: 10px;
font-weight: bold;
color: #FFFFFF;
background: #003366;
padding: 6px;
white-space: nowrap;
}

The problem is that the div fills the <td>'s 160px width rather than constraining itself to the with of its content, i've tried adding a minimum width of say 10px which seems to work in IE on PC but nothing else. How can i get it to reliably follow the widths of the content and padding??

OK i have a div and inside it i have a flash animation..

i am playing with the width property of div to make it same width as flash however the values are differing between IE and firefox?
in firefox it is 67% and in IE it seems to be 70%!! i have NO other css for that div apart from margin-right/left: auto!!

Hiya,

I am having some problems with 100% width elements.
As you can see he http://explosiveracing.net/new_design/orange/
CSS: http://explosiveracing.net/new_design/orange/styles.css

The horizontal bars go further than 100% across the page resulting in a horizontal scroll bar appearing.

I have only tested in FF1.5 and IE6 so far but both have the same problem.

EDIT: I have fixed the horizontal bars. I cannot work out how to stop the menu bar expanding further than 100% though.

Any ideas?

I'm working on my first website located at http://www.longklaw.com and I started having trouble when I tried to make some changes . I have a header, a middle section (left sidebar, center, right sidebar), and a footer. As you can see, the container seems to be bigger than the total size of the sections and I cannot figure out how to fix it. I figured that it might be a padding/margin issue. I want the page to end where the borders separating the sections on the right sidebar ends. My CSS follows. Thanks in advance for the help.


DIV { margin: 0px;}

body {
margin: 5px 5px 5px 5px;
background-color: #000000;
text-align: left;
}

a {
text-decoration: underline;
}

a:link {
color: #0000FF;
}

a:visited {
color: #8A2BE2;
}

a:active {
color: #0000FF;
}

a:hover {
color: #006699;
}

h1, h2, h3 {
margin: 0px;
padding: 0px;
font-weight: normal;
}

.container {
line-height: 140%;
margin-right: 0px;
margin-left: 0px;
text-align: left;
padding: 0px;
width: 98%;
background-color: #FFFFFF;
border: 0px solid #FFFFFF;
}

.banner {
font-family: Verdana,Arial,sans-serif;
color: #000000;
background-color: #FFFFFF;
text-align: left;
padding: 15px 0px 0px 10px;
border: 0px solid #000000;
height: 39px;


}

.banner-img {
display: none;
}

.banner a {
color: #999999;
text-decoration: none;
}

.banner h1 {
font-size: xx-large;
}

.banner h2 {
font-size: small;
}

.navigation {
color: #000000;
font-size: x-small;
font-family: Verdana,Arial,sans-serif;
font-size: small;

margin-top: 5px;

border: solid 0px #000000;
}

.navigation table {
border-collapse: collapse;
margin: 0px
}

.navigation td {
border-color: #999999;
border: 1px solid;
}

.content {
color: #000000;
font-size: x-small;
font-family: Verdana,Arial,sans-serif;
background-color: #ffffff;
padding: 15px 15px 5px 15px;
}

.content blockquote {
line-height: 150%;
}

.content li {
line-height: 150%;
}

.content p.posted {
color: #000000;
font-size: x-small;
font-family: Verdana,Arial,sans-serif;
line-height: normal;
text-align: left;
margin-bottom: 25px;
padding: 3px;
border-top: 1px solid #999999;
}

.content h2 {
color: #000000;
font-size: x-small;
font-family: Verdana,Arial,sans-serif;
font-weight: bold;
text-align: left;
margin-bottom: 10px;
}

.content h3 {
color: #000000;
font-size: small;
font-family: Verdana,Arial,sans-serif;
font-weight: bold;
text-align: left;
margin-bottom: 10px;
}

.sidebar {
padding: 0px;
float: left;
width: 20%;
background-color: #FFFFFF;
overflow: hidden;
border-right: solid 0px #000000;
}

.sidebar p {
color: #000000;
font-size: x-small;
font-family: Verdana,Arial,sans-serif;
font-weight: normal;
line-height: 140%;
text-align: left;
margin: 0px;

}

.sidebar h2 {
color: #000000;
font-size: x-small;
font-family: Verdana,Arial,sans-serif;
font-weight: bold;
text-align: center;
text-transform: uppercase;
letter-spacing: 0.3em;
margin-bottom: 10px;
}

.sidebar border {
margin: 0px;
padding: 0px;
}

.sidebar ul {
margin: 0px;
padding: 0px;
}

.sidebar li {
color: #000000;
font-size: x-small;
font-family: Verdana,Arial,sans-serif;
line-height: 140%;
text-align: left;
list-style-type: none;
margin: 0px;
}

.sidebar img {
border: solid 3px #ffffff;
}

.sidesection {
color: #000000;
font-family: Verdana,Arial,sans-serif;
font-size: x-small;
line-height: 140%;
text-align: left;
padding: 15px;
margin: 0px;
border-bottom: 1px solid #999999;

}

.center {
float: left;
width: 57%;
overflow: hidden;
border-right: 1px solid #999999;
border-left: 1px solid #999999;
}

.clearer {
height: 1px;
overflow: hidden;
clear: both;
margin-top: -1px;
}

.footer {
color: #000000;
float: left;
font-family: Verdana,Arial,sans-serif;
font-size: x-small;
line-height: 140%;
text-align: left;
width: 98%;
padding: 15px;
margin-bottom: 0px;
background-color: #FFFFFF;
border-top: 1px solid #999999;
overflow: hidden;
}

.calendar {
line-height: 140%;
color: #666666;
font-family: Verdana,Arial,sans-serif;
font-size: x-small;
padding: 15px;
text-align: center;
margin-bottom: 0px;
border-bottom: 1px solid #999999;

}

.calendar table {
padding: 2px;
border-collapse: collapse;
border: 0px;
width: 100%;
}

.calendar caption {
color: #000000;
font-family: Verdana,Arial,sans-serif;
font-size: x-small;
text-align: center;
font-weight: bold;
text-transform: uppercase;
letter-spacing: 0.3em;
}

.calendar th {
text-align: center;
font-weight: normal;
}

.calendar td {
text-align: center;
}

.photo {
text-align: left;
margin-bottom: 20px;
}

.comment-data {
float: left;
width: 180px;
padding-right: 15px;
margin-right: 0px;
text-align: left;
border-right: 1px dotted #BBB;
}

textarea[id="comment-text"] {
width: 80%;
}

Hi,

The site I'm developing is:
http://www.jaysonsgroup.com/index2.html

It's only a temporary page..some old <table> tags are in there..which don't validate as XHTML. But, I come across many IE 5.0 - related problems for many of my sites..i.e. even those that validate under W3C etc. So I'm just asking generally, does anyone know a site that has fixes for IE 5.0 bugs? My sites seem to be fine on most browsers except this one.

In regard to the above link, I had some major problems with IE 5.0 on the middle area (i.e. the images & text under "news" and "login").

The basic HTML code for that:

Code:

<div class="outerblock">
		<div class="news">

			<div class="news_left"><div class="news_left_text">My text</div></div>

			<div class="news_mid"><img src='images/sinhala.gif' width='431' height='286' alt='' /></div>

		</div>

		<div class="login_right">
			my login table
		</div>
</div>

and the CSS for that:

Code:

	.outerblock {
		width: 100%;
		overflow:hidden;
		display: block;
		clear: both;
	}

	.news {
		width: 607px;
		overflow:hidden;
		float: left;
		border-right: 1px solid #C5C5DD;
	}

	.news_left {
		width: 163px;
		float: left;
		overflow:auto;
		display: block;
		background: url(../images/home_worldwide.gif) no-repeat;
		padding: 110px 0px 0px 0px;
	}

	.news_left_text {
		padding: 0px 0px 0px 5px;
		color: #3B537D;
		font-family: Verdana, Arial ; 
		font-size:7.5pt ; 
		font-weight:normal; 
		line-height: 13px;
	}

	.news_mid {
		width: 440px;
		height: 300px;
		float: left;
		overflow:hidden;
	}
	.login_right {
		width: 160px;
		height: 250px;
		padding: 50px 0px 0px 0px;
		float: left;
		background: #ECEDF2;
		border-right: 1px solid #C5C5DD;
		border-left: 2px solid #FFFFFF;
		overflow: hidden;
	}

One problem I had (on IE 5.0) was that the middle 'news_mid' image was overflowing, positioned just below the 'news_left' area. The widths etc are all correct because the container width is 771px. So the entire area should just fit and not overflow (even though in IE 5.0 it did). The 'news' overflow property was AUTO, and I fixed the problem by specifying the overflow:hidden.

Likewise, the 'login_right' div was overflowing just below the entire news section, and not to the right as it should have been. Once again I fixed this by specifying overflow:hidden for the outer div.

Is it common to use overflow:hidden for things like this? Or is there a more appropriate fix?

Another small problem I noticed for IE 5.0 :
http://www.jaysonsgroup.com/ie5win.jpg (screenshot). The login_right background does not extend all the way. The height of the div should be 250 pixels + 50pixels on the padding - so 300 pixels total. But IE 5.0 ignores the 50pixels padding and leaves the background with a height of 250px.

Thanks very much in advance!

Hi!

I'm working on a design for an art gallery client that calls for a primary image of variable width with static alignment to the right and bottom, with a row of thumbnails below that align with the left edge of the image.

This is working fine in FF and Chrome, but I can't seem to get IE to constrain the containing div by the image width. The thumbnails, floated left, go all the way to the edge of the layout...

I've tried different combinations of positioning on the containing div (you can see the comments in my CSS), but can't seem to get it to go.

The URL in question is here .

Any help would be mightily appreciated!
-BBD

Please delete...

Here is the relevant HTML code:

<table>
<tr>
<td>
<div style="float:left;">
<div class="middle"><div class="r"><div class="l">
<a id="gridtitle" href="javascript:void(0)" onclick="reload()"></a>
</div></div></div>

<div style="width: 200px;">
<a href="#" onclick="addheader()"><img border="0" src="tab_new_header.png" alt="Delete this grid"/></a> <a href="#" onclick="addfooter()"><img border="0" srctab_new_footer.png" alt="Delete this grid"/></a>
</div>
</div>

<div style="float:right;">
<a href="#" onclick="javascript:toggleLayer('newgrid');"><img border="0" src="button_add.png" alt="Add a grid"/></a>
<a href="#" onclick="deleteGrid()"><img border="0" src="button_delete.png" alt="Delete this grid"/></a>
</div>
</td>
</tr>
<tr>
<td>
<div id="gridbox3" class="gridbox" width="870px" height="600px" style="background-color:white;"></div>
</td>
</tr>
</table>


And the relevant CSS code [which just sets the background of the tab]:

.l {background: url(../../datadir/client/images/billinggrid/name_sidebg1.png) 0 0 no-repeat; height: 43px;}
.r {background: url(../../datadir/client/images/billinggrid/name_sidebg2.png) 100% 0 no-repeat; height: 43px;}
.middle {background: url(../../datadir/client/images/billinggrid/name_sidebg.png); height: 43px;}


This is the output (i can't post images?)
http://i34 [.] tinypic [.] com/4hpqag [.] png


The first problem I am having is that the div my gridtitle (CIBC) is in does not set its width automatically to the text width. Instaed, it spans the whole table ...

Position-wise, I would like the tab with "CIBC" to be to the far left, the header and footer tabs to be right of "CIBC" but still floating left, and the + and x signs to be floating right, all on the same line.

Help? Thanks in advance.

I don't mind telling yall, I'm a bit hesitant to post here, only because I'm very new to html and css, just learning. Folks here are far above my ability, I've got many of the pages on site bookmarked for reference.

I'm taking this plunge because I'm ready to rip hairs one by one on a problem.

I have a friend who originally made a site in a builder program *shudders* and he has asked me to convert it to more conventional pages (he's determined to keep this theme and I'm not good enough to remake the entire site by hand yet). This program created every thing on the pages as a Div with css styling embedded in the document.

Ive got everything working perfectly except that I can not for the life of me get the Div.banner to stretch the width of pages in order for it to span the width of any resolution.
What I'm trying to do is simply (or should be) make a 93px by 3 or 4 px bar repeat the length of the div. Here is the code its using at this time.

Code:

<STYLE TYPE="text/css">
DIV.banner { position:absolute; top:0px; left:0px; z-index:0; }
....</STYLE>

<DIV class="banner"><IMG SRC="images/vbar.PNG"  WIDTH=900 HEIGHT=93 BORDER=0></DIV>

The above works but its a fixed width and I would like it to be full width no matter what resolution ones using.

I have tried making the Div class="banner" use a width=100%.
This causes the image to be shown at top=0 and left=0 once only. I tried adding background-repeat repeat-x to the css code. Any other changes I make like removing the Width from the Div class all together causes it to just go away.

I've been able to manipulate everything else from this horrible theme fine except this. I'm sure there is something simple I'm missing and if you need to see more of the index page code just let me know (its not online at this time). I didn't want to put in too much stuff and being such a n00b at all this, I'm learning so be gentle with me..

Thanks in Advance
Me

Hello,

I'm working now on div layout that contains 3 sections (header, body, footer) in one centered wrapper with border (divs with background imgs).

My problem is:

- divs that are in fact borders (id="l_outerborder_b" and id="r_outerborder_b") don't stretch when main container (id="body_content_text") grows.

Here is a html code:

Code:

<!--BEGIN TEMPLATE HEADER -->

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
   	
<link href="template.css" rel="stylesheet" type="text/css" />
    <script type="text/javascript" src="template.js" />
</head>
<body onload="onloadprocedures()">
<div id="main_container">
	<div id="template_header">
		<div id="tl_outerborder"></div>
		<div id="t_outerborder"></div>
		<div id="tr_outerborder"></div>
		<div id="l_outerborder_h"></div>
		<div id="header_content">
			<div id="logo"><img src="img/logo.png" alt="" /></div>
			<div id="slogan"><img src="img/slogan.png" alt="Centrum zdrowia" /></div>
		</div>
		<div id="r_outerborder_h"></div>
	</div>
  
  <!-- END TEMPLATE HEADER -->
  <!-- BEGIN TEMPLATE BODY -->
	  <div id="template_body">
		<div id="l_outerborder_b"></div>
		<div id="body_content">
			<div id="body_content_text">
			  <p>TEST</p>
			</div>
		</div>
		<div id="r_outerborder_b"></div>
		
	  </div>
  <!-- END TEMPLATE BODY -->
  <!-- BEGIN TEMPLATE FOOTER -->
	<div id="template_footer">
		<div style="clear:both"></div>
		<div id="l_outerborder_f"></div>
		<div id="footer_content"></div>
		<div id="l_outerborder_f"></div>
		<div id="bl_outerborder"></div>
		<div id="b_outerborder"></div>
		<div id="br_outerborder"></div>
	</div>
</div>
</body>
</html>
<!-- END TEMPLATE FOOTER -->

and CSS:

Code:

@charset "utf-8";
/* CSS Document */
body {
	background-color:#FFFFFF;
	font-family:Tahoma, Verdana, "Times New Roman", Arial;
	font-size:12px;
}
a:link {text-decoration: none}      /* unvisited link */
a:visited {text-decoration: none}  /* visited link */
a:hover {text-decoration: none}  /* mouse over link */
a:active {text-decoration: none}  /* selected link */
#main_container {
	position:relative;
	margin:auto;
	width:960px;
	height:auto;
}
#template_header {
	float:left;
	position:relative;
	width:960px;
	height:300px;
}
#header_content {
	float:left;
	position:relative;
	width:900px;
	height:270px;
}
#logo {
	width:310px;
	height:130px;
	position:relative;
	float:left;
	top:0px;
	left:0px;
}
#slogan {
	width:580px;
	height:100px;
	position:relative;
	float:left;
	top:0px;
	left:0px;
}
#tl_outerborder {
	float:left;
	position:relative;	
	background-image:url(img/tl_outerborder.png);
	width:30px;
	height:30px;
}
#t_outerborder {
	float:left;
	position:relative;
	background-image:url(img/t_outerborder.png);
	width:900px;
	height:30px;
}
#tr_outerborder {
	float:left;
	position:relative;
	background-image:url(img/tr_outerborder.png);
	width:30px;
	height:30px;
}
#l_outerborder_h {
	float:left;
	position:relative;	
	background-image:url(img/l_outerborder.png);
	background-repeat:repeat-y;
	width:30px;
	height:270px;
}
#r_outerborder_h {
	float:right;
	position:relative;
	background-image:url(img/r_outerborder.png);
	background-repeat:repeat-y;
	width:30px;
	height:270px;
}
#body_content {
	float:left;
	position:relative;
	width:900px;
	
	overflow:hidden;
}
#body_content_text {
	float:left;
	position:relative;
	width:600px;
	
	margin: auto;
	overflow:hidden;
}
#l_outerborder_b {
	float:left;
	position:relative;	
	background-image:url(img/l_outerborder.png);
	background-repeat:repeat-y;
	width:30px;
	height:inherit;
}
#r_outerborder_b {
	float:right;
	position:relative;
	background-image:url(img/r_outerborder.png);
	background-repeat:repeat-y;
	width:30px;
	height:inherit;
}
#l_outerborder_f {
	float:left;
	position:relative;	
	background-image:url(img/l_outerborder.png);
	background-repeat:repeat-y;
	width:30px;
	height:inherit;
}
#r_outerborder_f {
	float:right;
	position:relative;
	background-image:url(img/r_outerborder.png);
	background-repeat:repeat-y;
	width:30px;
	height:inherit;
}
#template_body {
	float:left;
	position:relative;
	width:960px;
	
	overflow:hidden;
}
#bl_outerborder {
	float:left;
	position:relative;	
	background-image:url(img/bl_outerborder.png);
	width:30px;
	height:30px;
	
}
#b_outerborder {
	float:left;
	position:relative;
	background-image:url(img/b_outerborder.png);
	width:900px;
	height:30px;
}
#br_outerborder {
	float:left;
	position:relative;
	background-image:url(img/br_outerborder.png);
	width:30px;
	height:30px;
}

Thanks in advance for info how to stretch those doomed divs

EDIT: Here is layout concept.

URL
hTTp://qsrc.pl/layout.jpg