CSS - Vertical Centered Three Column Layout(fix Width Middle Col)

Hello,

I am having difficulty with the center column on the following page: http://cbo4edu.org/index2.html

I want to widen the center column so that the CBO NEWS heading touches the blue line which divides the center and right column. When I try to add width to the style sheet the left column moves out of alignment.

Any help is much appreciated, thanks!

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.

Alrighty, I'm trying to produce a layout similar to that of what is shown in the attached image. Please ignore the image being the rainbox colors, but I had to differentiate sections.

I can get the banner/search line to appear properly, but the rest will not. Left menu gets positioned fine, the content does as well (more or less), but the right column is displaced, and shifted down to the very bottom of the window -- far right, though.

I can't explain much better than that, so without further ado:

CSS:
Code:

.columns-float{
    float : left;
    width : 80%;
}
.column-one
    {
    width : 75%; /* NOTE: This needs to be dynamic! THIS is what I'm
          inquiring about. The above problem assumes this attribute
          is set to "auto". */
    float : right;
    }
.column-two
    {
    width : 25%;
    float : left;
    }
.column-three{
	width : 20%;
	float : right;
}
.box-footer{
	clear : both;
}
.column-one-content{
	margin-left: 1px;
	margin-right: 1px;
}
/*Hack below:*/
.box-wrap, .columns-float, .column-one, .column-two, .column-three, h2{
     p\osition: relative;
}

(Above was borrowed from here, albeit with modifications.)

HTML: Code:

...

<div class="columns-float">

<div class="column-one">
<div class="column-one-content">
<h2>column 1</h2>
<p>column filler</p>
<p>column filler</p>
<p>column filler</p>
<p>column filler</p>
<p>column filler</p>
<p>column filler</p>
<p>column filler</p>

<p>column filler</p>
<p>column filler</p>
<p>column filler</p>
<p>column filler</p>
<p>column filler</p>
<p><a href="#" title="fake link for testing">test link</a></p>
</div>
</div>
<div class="column-two">
<div class="column-two-content">
<h2>column 2</h2>

<p>column filler</p>
<p>column filler</p>
<p>column filler</p>
<p><a href="#" title="fake link for testing">test link</a></p>
</div>
</div>
<div class="box-clear">&nbsp;</div><!-- # needed to make sure column 3 is cleared || but IE5(PC) and OmniWeb don't like it  -->

</div><!-- close boxbody -->
<div class="column-three">
<div class="column-three-content">
<h2>column 3</h2>

<p>column filler</p>
<p>column filler</p>
<p>column filler</p>
<p><a href="#" title="fake link for testing">test link</a></p>
</div>
</div>
<div class="box-clear">&nbsp;</div><!-- # needed to make sure column 3 is cleared || but IE5(PC) and OmniWeb don't like it  -->

<div class="box-footer">Footer
</div>

Do not link me to Position Is Everything. Been there already, and it wasn't helpful; the used terminology was too abstruse for me.

Any help would be appreciated, and I thank you very much for your time. This is driving me batty.

hi
is there a way to get a div to be in the vertical middle of the screen. i tried :

margin-top: auto;
margin-bottom: auto;

but it doesn't work.

thanks

Hello I hope this isnt a stupid questions but here goes.

I have a page designed with vertically centered content It works fine but if you view the page in a smaller screen size some of the content disapears in to the menu area of the browser. Its hard to explain but if you use the sorce code below and view it in any broswer. Make it so the browser is not maximized and then change the height of the window until the scroll bar appears ... you will notice that some of the conent goes into neverland before the srollbar appears. Line 1 disapears and can not be reads. This will be an issue for people viewing my site in 800x600

Thoughts?


Code:

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style> 
#horizon {
	background-color: transparent;
	position: absolute;
	top: 50%;
	left: 0px;
	width: 100%;
	margin-top: -200px;
	text-align: center;
	min-width: 900px; 
}
#wrapper {
	background-color: #fff;
	position: relative;
	text-align: left;
	width: 900px;
	height: 380px;
	margin: 0px auto;
	}

	
</style>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
</head>

<body>

<div id="horizon">
<div id="wrapper">
  Line 1<br />
    Line 2<br />
  Line 3<br />
  Line 4
  
</div>
</div>
</body>
</html>

Hi, there.

Having looked around the forum for a CSS method of vertically centering an IMG within a DIV, I found the following code which works perfectly in IE but not FF :

#full-image {
float: right;
width: 380px;
height: 380px;
text-align: center;
line-height: 0px;
background-color: #F0F5F7;
margin-top: 5px;
margin-right: 0px;
margin-bottom: 10px;
margin-left: 10px;
}

#full-image img {
margin-top: expression(( 380 - this.height ) / 2);
}

That's right - works in IE but not FF, which is most unusual! Any ideas how to make this work cross-browser? Thanks in advance for any assistance.

I've got an image that is 75px high. Right beside it, I have a H1. I want to vertically align the H1 in the middle of the image. Vertical align doesn't work, and for some reason, setting the line height to the height of the image doesn't work either.

Thanks for taking the time to read my question.

I have an image that I want to place in the middle of a contaier. I have <center></center> around the <img /> tag, but I can't get it to center vertically with the css below. What am I doing wrong?

Thanks,

Brad

CSS:
Code:

img.contentimg {
vertical-align: middle;
}

HTML:
Code:

<div class="textbox1"><center><img class="contentimg" src="images/house1.jpg" /></center></div>

hmmm, i can't make this work...the text goes to the top, not the middle...

#mrtop {
height: 33px;
width: auto;
vertical-align: middle;
}

both "title" and "subtitle" are just text attributes, nothing more...

<div id="mrtop"><span class="title"><? echo $a ?></span> <span class="subtitle"><? echo $q ?></span></div>

i would use padding at the top and bottom but i'm concerned about text zooming...if people were to use text zoom and it needed more space for the "mrtop" div it would screw up some other stuff on the page (so i need to make "middle" work if it's possible)...

thanks for any advice...v

Hi there,

I'm trying to display paragraph with a table embedded in there inline. I hope the table can behave like a big letter in the paragraph, with the line aligned in the center of the table. For example, if I want to make "1/2" to a vertical "1 <hr/> 2", I
would put it in a table and change the "display" property as follows:

Code:

<p> This is a long paragraph. This is a long paragraph. This is a long paragraph. This is a long paragraph. This is a long paragraph. This is a long paragraph.

I HAVE <table style="display:inline;vertical-align:middle"> <tr> <td> 1 <hr /> 2 </td> </tr> </table>  PIZZA.

This is a long paragraph. This is a long paragraph. This is a long paragraph. This is a long paragraph. 

This works perfectly for me on IE, but on Firefox only the "inline" property works, and the "vertical-align" property doesn't (i.e., the table and the line text are aligned at the bottom still).

Did I do something wrong? Or is this a Firefox bug?

Thanks

I have an image and to the right of it I have text. I want the text to be aligned veritcally to the middle of the image.

I can do the following and it works:

Code:

.icon {vertical-align: middle;}

<a href="index.php"><img src="images/icon.png" class="icon" border="0" /></a>
Header Goes Here

However, if I wrap H1 tags around "Header Goes Here" the text drops below the image.

Any ideas on how to use header tags and have it aligned? I know I could make the icon as a background with H1 but I want it to be clickable.

Is there any way to make it so the H1

Normally when I want to vertically align some text to the middle of a div I use

line-height: 40px; and vertical-align: middle;

However that only seems to work on single lines of text because with multiple lines of text the line height of each line means there is a large gap between the text rather than centreing the whole lot vertically. How do I get around this?

I thought something like the following would work but it doesn't.

<div style="line-height: 60px; vertical-align: middle;">
<span style="line-height: normal;">line1<br />line 2</span></div>

Hello, 1st post on this forum.

How can I create a three column layout with the left and right div-containers sticking to the left and right sides and then make the middle container stay centered?

I would post links to the pages but this forum will not let me.

Thanks for the help

Ive tried to put stuff to the left of the news room in the blank spot and cannot seem to do so.. here is css:
Code:

#header {
	position: relative;
	margin: 0 auto;
	background: transparent url(img/bg/header-v2.gif) no-repeat bottom left;
	height: 235px;
	width: 760px;
	text-align: left;
	z-index: 10;
}
'#content {
	position: relative;
	background-color: #FFFFFF;
	height:inherit;
	width: 760px;
	margin: 0 auto 0 auto;
	text-align: left;
	border: 1px double rgb(72,183,239);
	overflow: hidden;
		font-size: 10px;
	font-family: Verdana, Arial, Helvetica, sans-serif;
}
#leftpanel{
position: inherit;
float: left;
background-color: #f5f5f5;
height: inherit;
width: 170px;
margin-left: 3px;
}
#leftpanel-head{
width: 158px;
height: 26px;
background-image: url(img/bg/leftpanel-head.png);
padding-left: 12px;
color: #FFFFFF;
font-weight: bold;
font-family: Verdana, Arial, Helvetica, sans-serif;
padding-top: 4px;
}
#content-right {
width: 585px;
height: inherit;
float: right;
}



#newsroom {
float: right;
width: 300px;
height: 30px;
margin-left: 2px;
}

#newsroom-header {
width: 300px;
height: inherit;
background-image:url(img/bg/video-player-head.png);
color: #FFFFFF;
font-weight: bold;
padding-left: 3px;
padding-top: 4px;
}

#welcome{
float: left;
height: 27px;
width: 279px;
color: #FFFFFF;
font-weight: bold;
padding-left: 3px;
padding-top: 4px;
}

#welcome-text {
float: left;
height: 27px;
width: 279px;
color: #FFFFFF;
font-weight: bold;
padding-left: 3px;
padding-top: 4px;
}

#primary-nav {
	position: absolute;
	background: transparent url(img/bg/primary-nav-v2.gif) no-repeat;
	list-style: none;
	width: 760px;
	height: 26px;
	top: 203px;
	left: 1px;
	z-index: 10;
	padding-left: 5px;
}

#primary-nav li {
	float: left;
	background-position: 0 -26px; 
}

#primary-nav li ul {
	position: absolute;
	background: transparent url(img/primary-nav-top.png) no-repeat;
	list-style: none;
	width: 159px;
	left: -9999px;
	margin-left: -9px;
	padding-top: 5px;
}

#primary-nav a {
	display: block;
	height: 0px !important;
	text-decoration: none;
	overflow: hidden;
}

#primary-nav li a {
	background-position: 0 0; 
}

#primary-nav li#nav-1 {
	background: transparent url(img/bg/nav-1.png) no-repeat;
	margin-right: 1px;
}

#primary-nav li#nav-2 {
	background: transparent url(img/bg/nav-2-shopping.png) no-repeat;
	margin-right: 1px;
}
#primary-nav li#nav-3 {
	background: transparent url(img/bg/nav-3-restaurants.png) no-repeat;
	margin-right: 1px;
}

#primary-nav li#nav-4 {
	background: transparent url(img/bg/nav-4-hotels.png) no-repeat;
}

#primary-nav li#nav-5 {
	background: transparent url(img/bg/nav-5-history.png) no-repeat;
}
#primary-nav li#nav-6 {
	background: transparent url(img/bg/nav-6-links.png) no-repeat;
}
#primary-nav li#nav-7 {
	background: transparent url(img/bg/nav-7-about.png) no-repeat;
}


#primary-nav li#nav-1:hover, 
#primary-nav li#nav-1.sfhover,
#primary-nav li#nav-2:hover, 
#primary-nav li#nav-2.sfhover,
#primary-nav li#nav-3.hover,
#primary-nav li#nav-3.sfhover,
#primary-nav li#nav-4:hover, 
#primary-nav li#nav-4.sfhover,
#primary-nav li#nav-5:hover, 
#primary-nav li#nav-5.sfhover,
#primary-nav li#nav-6:hover, 
#primary-nav li#nav-6.sfhover,
#primary-nav li#nav-7:hover, 
#primary-nav li#nav-7.sfhover{
	background-position: 0 -26px;
	font-family:Verdana, Arial, Helvetica, sans-serif;
}

#primary-nav li#nav-1 a, 
#primary-nav li#nav-2 a,
#primary-nav li#nav-3 a,
#primary-nav li#nav-4 a,
#primary-nav li#nav-5 a,
#primary-nav li#nav-6 a,
#primary-nav li#nav-7 a  {
	width: 107px;
	height /**/: 26px;
	padding: 26px 0 0 0;
}

#primary-nav li#nav-1 ul li,
#primary-nav li#nav-2 ul li,
#primary-nav li#nav-3 ul li,
#primary-nav li#nav-4 ul li,
#primary-nav li#nav-5 ul li,
#primary-nav li#nav-6 ul li,
#primary-nav li#nav-7 ul li{
	background: transparent url(img/bg/primary-nav-link-up.png) no-repeat;
	height: 21px;
}

#primary-nav li#nav-1 ul li.bottom,
#primary-nav li#nav-2 ul li.bottom,
#primary-nav li#nav-3 ul li.bottom,
#primary-nav li#nav-4 ul li.bottom,
#primary-nav li#nav-5 ul li.bottom,
#primary-nav li#nav-6 ul li.bottom,
#primary-nav li#nav-7 ul li.bottom{
	background: transparent url(img/bg/primary-nav-bottom.png) no-repeat;
	height: 14px;
	width: 159px;
}

#primary-nav li#nav-1 ul li a,
#primary-nav li#nav-2 ul li a,
#primary-nav li#nav-3 ul li a,
#primary-nav li#nav-4 ul li a,
#primary-nav li#nav-5 ul li a,
#primary-nav li#nav-6 ul li a,
#primary-nav li#nav-7 ul li a {
	overflow: hidden !important;
	overflow: visible;
	font-size: 10px;
	color: #FFF;
	height: 19px !important;
	height: 19px;
	width: 107px;
	padding: 1px 3px 2px 19px;
}

#primary-nav li#nav-1 ul li a:hover,
#primary-nav li#nav-2 ul li a:hover,
#primary-nav li#nav-3 ul li a:hover,
#primary-nav li#nav-4 ul li a:hover,
#primary-nav li#nav-5 ul li a:hover,
#primary-nav li#nav-6 ul li a:hover,
#primary-nav li#nav-7 ul li a:hover {
	background: transparent url(img/bg/primary-nav-link-over.png) no-repeat 0 0;
}

#primary-nav li:hover ul, 
#primary-nav li.sfhover ul {
	left: auto;
}

html:
Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html class="sIFR-active" id="home" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml" lang="en"><head style="background-color: rgb(255, 0, 0);">
	<title>TysonsCorner.com&trade;</title>
	<link rel="shortcut icon" href="#">
	<link href="home.css" rel="stylesheet" type="text/css">
	<link href="global.css" rel="stylesheet" type="text/css">
    <link href="nav1.css" rel="stylesheet" type="text/css">

</head><body>
<div id="container">
	<!-- HEADER AREA STARTS HERE -->
        <div id="content">
<div id="header">
	<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,0,0" width="760" height="200" id="Banner(FLASH) - Beta" align="middle">
	<param name="allowScriptAccess" value="sameDomain" />
	<param name="allowFullScreen" value="false" />
	<param name="movie" value="Banner(FLASH) - Beta.swf" /><param name="quality" value="high" /><param name="bgcolor" value="#ffffff" />	<embed src="Banner(FLASH) - Beta.swf" quality="high" bgcolor="#ffffff" width="760" height="200" name="Banner(FLASH) - Beta" align="middle" allowScriptAccess="sameDomain" allowFullScreen="false" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" />
	</object>
		<ul id="primary-nav">
			<!-- PRIMARY NAVIGATION (CATEGORIES) STARTS HERE -->
			<li id="nav-1"><a href="#" title="Tysons Corner Homepage">Tysons Homepage</a>
				<ul>
					<li><a href="#" title="Tysons 1 Stores">News</a></li>
					<li><a href="#" title="Tysons 2 Stores">Events</a></li>
                    <li><a href="#" title="More Tysons Shopping">Contact Us</a></li>
					<li class="bottom"></li>
				</ul>
			</li>
			<!-- PRIMARY NAVIGATION (BRANDS) STARTS HERE -->
			<li id="nav-2"><a href="#" title="Tysons Corner Shopping">Tysons Shopping</a>
				<ul>
					<li><a href="#" title="Tysons 1 Stores">Tysons I</a></li>
					<li><a href="#" title="Tysons 2 Stores">Tysons II</a></li>
                    <li><a href="#" title="More Tysons Shopping">More Shopping</a></li>
					<li class="bottom"></li>
				</ul>
			</li>
			<!-- PRIMARY NAVIGATION (PRODUCTS) STARTS HERE -->
			<li id="nav-3"><a href="#" title="Tysons Corner Restaurants">Tysons Restaurants</a>
				<ul>
					<li><a href="#" title="Cajun Food">Cajun</a></li>
					<li><a href="#" title="Grilled Food">Grilled</a></li>
					<li><a href="#" title="Foreign Food">Foreign</a></li>
					<li><a href="#" title=" Full List Restaurants">Complete List</a></li>

					<li class="bottom"></li>
				</ul>
                <li id="nav-4"><a href="#" title="Tysons Corner Restaurants">Tysons Restaurants</a>
                <li id="nav-5"><a href="#" title="Tysons Corner Restaurants">Tysons Restaurants</a>
                <li id="nav-6"><a href="#" title="Tysons Corner Restaurants">Tysons Restaurants</a>
                <li id="nav-7"><a href="#" title="Tysons Corner Restaurants">Tysons Restaurants</a>
		</li>
    </ul>

</div>

<div id="leftpanel">
<div id="leftpanel-head">
Search
</div>

<form id="form1" method="post" action="">
  <p>
    <label>
      <input type="text" name="IDsearch" id="IDsearch" width="150"/>
      </label>
  </p>
</form>

<div id="leftpanel-head">
Events Calendar
</div>


<div id="leftpanel-head">
Sponsored Ads
</div>
<script type="text/javascript"><!--
google_ad_client = "pub-8246327012745782";
/* 120x600, created 10/23/08 */
google_ad_slot = "1782998545";
google_ad_width = 120;
google_ad_height = 600;
//-->
</script>
<script type="text/javascript"
src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script>
</div>  


<div id="newsroom">
<div id="newsroom-header">News Room</div>
</div>    

<div id="welcome">Test</div>

<div id="newsroom">
<script language="javascript" src="http://www.thenewsroom.com//mash/swf/voxant_player.js?a=V3126802&m=669243&w=300&h=290&v=2"></script>
</div> 
</div>  


</body></html>

Demo: http://www.reston.com/Tysons Corner COM