Learn VBA & Macros in 1 Week!

CSS - Centering A Column

Full Excel VBA Course - Beginner to Expert

Centering A Column	View Content

Hello:

I'm having trouble centering my page layout. I never had a problem in the past but someone passed this coding over to me and it won't center. I have a div id named container which is what I'm using to position my layout on the page.

Can someone help me out? Thanks in advance.

This is the HTML:
Code:

<html>
<head>
<link rel="stylesheet" href="dropdown.css" type="text/css" />
<script language="JavaScript" src="email.js" type="text/javascript"></script>
<!--[if IE]><link rel="stylesheet" href="email-archive.css" type="text/css" media="screen" /><![endif]-->
</head>
<body>
<div id="container">

<table width="850" height="27" border="0" cellpadding="0" cellspacing="0">
  <tr>
    <td><div id="menu">
        <ul class="menu1" id="nav">
          <li><span class="menu_top"><a href="#" style="padding: 0;">Communities</a></span>
              <ul>
                  <li><a href="#">Chestatee</a></li>
                  <li><a href="#">Hawks Ridge</a></li>
                  <li><a href="#">Lake Arrowhead</a></li>
                  <li><a href="#">Area Map</a></li>
              </ul>
          </li>
        </ul>

        <ul class="menu2" id="nav">
          <li><span class="menu_top"><a href="#" style="padding: 0;">Build On Your Own Lot</a></span>
            
          </li>
        </ul>
        
       <ul class="menu3">
          <li><span class="menu_top"><a href="#" style="padding: 0;">House Plans</a></span>
            <ul>
              <li><a href="under-3000.html">Examples of stock home plans under 3000 sq.ft.</a></li>
	      <li><a href="over-3000.html">Examples of stock home plans over 3000 sq.ft.</a></li>
	      <li><a href="custom-homes.html">Examples of Custom Homes Plans</a></li>
            </ul>
          </li>
        </ul>

        <ul class="menu4">
          <li><span class="menu_top"><a href="#" style="padding: 0;">Available Homes</a></span>
            <ul>
              <li><a href="#">Chestatee</a>
                <ul>
                  <li><a href="#">The Greens</a></li>
                  <li><a href="#">The Waterfront</a></li>
                  <li><a href="#">Linkside</a></li>
                </ul>
              </li>
              <li><a href="#">Hawks Ridge</a></li>
              <li><a href="#">Lake Arrowhead</a></li>
            </ul>
          </li>
        </ul>
        
      <ul class="menu5">
          <li><span class="menu_top"><a href="#" style="padding: 0;">Gallery</a></span>
            <ul>
              <li><a href="#">Exterior Gallery</a></li>
              <li><a href="#">Interior Gallery</a></li>
            </ul>
          </li>
        </ul>
      
      <ul class="menu6">
          <li><span class="menu_top"><a href="#" style="padding: 0;">Features</a></span></li>
        </ul>
    
      <ul class="menu7">
          <li><span class="menu_top"><a href="#" style="padding: 0;">Design Center</a></span></li>
        </ul>
        
     <ul class="menu8">
          <li><span class="menu_top"><a href="#" style="padding: 0;">Selected Option Prices</a></span></li>
        </ul>
    </div>  </td>
  </tr>
</table>
<div id="main">
this is the main content area

<br><br>
</div>


</div>
</body>
</html>

=====
This is the css file:
Code:

#container
{
width: 850px;
margin: 10px auto;
background-color: #fff;
color: #333;
border: 1px solid gray;
line-height: 130%;
}


/* communities */
.menu1 {
width: 90px;
}
/* build on your own lot */
.menu2 {
width: 140px;
}
/* house plans */
.menu3 {
width: 95px;
}
/* available homes */
.menu4 {
width: 120px;
}
/* gallery */
.menu5 {
width: 65px;
}
/* features */
.menu6 {
width: 70px;
}
/* design center */
.menu7 {
width: 102px;
}
/* selected option prices */
.menu8 {
width: 135px;
}


#menu {
width: 100%;
float: left;
}

#menu ul {
list-style: none;
margin: 0;
padding: 0;
float: left;
}

#menu ul ul li{
width: 120px;
background: #DDDDDD;
}

#menu a, #menu .menu_top {
font-size: 11px;
font-family: Verdana, helvetica, sans-serif;
display: block;
border-width: 0;
border-style: none;
border-color: #ccc #888 #555 #bbb;
margin: 0;
}

#menu .menu_top {
color: #fff;
text-align: center;
}

#menu a {
text-decoration: none;
padding: 3px 3px 4px 10px;
}

#menu a:hover {
color: #ffffff;
background: #8C8C8C;
}

#menu li {position: relative;}

#menu ul ul {
position: absolute;
z-index: 500;
}

#menu ul ul li {
background: #DDDDDD;
}

#menu ul ul li:hover a{
color: #fff;
background: #8C8C8C;
}

#menu ul ul a {
color: #000;
}

#menu ul ul a:active {
background: #8C8C8C;
}

#menu ul ul ul {
top: 0;
left: 100%;
}

#menu ul ul ul li {
background: #8C8C8C;
}

#menu ul ul ul a{
color: #fff;
}

#menu ul ul ul a:hover{
color: #fff;
background: #336699;
}

div#menu ul ul,
div#menu ul li:hover ul ul,
div#menu ul ul li:hover ul ul
{display: none;}

div#menu ul li:hover ul,
div#menu ul ul li:hover ul,
div#menu ul ul ul li:hover ul
{display: block;}
/** end navbar css code **/

====

This is the other CSS file being used:
Code:

body {
font-size: 100%; /* enable IE to resize em fonts */
behavior: url(csshover.htc); /* call hover behaviour file */
} 
#menu ul li {
float: left; /* cure IE5.x "whitespace in lists" problem */
width: 100%;
}
#menu ul li a {
height: 1%; /* make links honour display: block; properly */
} 

#menu a, #menu .menu_top {
font-size: 11px;
font-family: Verdana, helvetica, sans-serif;
/* if required use em's for IE as it won't resize pixels */
}

===
This is the .htc file:
Code:

<attach event="ondocumentready" handler="parseStylesheets" />
<script language="JScript">
/**
 *	Pseudos - V1.30.050121 - hover & active
 *	---------------------------------------------
 *	Peterned - http://www.xs4all.nl/~peterned/
 *	(c) 2005 - Peter Nederlof
 *
 *	Credits  - Arnoud Berendsen 
 *	         - Martin Reurings
 *           - Robert Hanson
 *
 *	howto: body { behavior:url("csshover.htc"); }
 *	---------------------------------------------
 */

var currentSheet, doc = window.document, activators = {
	onhover:{on:'onmouseover', off:'onmouseout'},
	onactive:{on:'onmousedown', off:'onmouseup'}
}

function parseStylesheets() {
	var sheets = doc.styleSheets, l = sheets.length;
	for(var i=0; i<l; i++) 
		parseStylesheet(sheets[i]);
}
	function parseStylesheet(sheet) {
		if(sheet.imports) {
			try {
				var imports = sheet.imports, l = imports.length;
				for(var i=0; i<l; i++) parseStylesheet(sheet.imports[i]);
			} catch(securityException){}
		}

		try {
			var rules = (currentSheet = sheet).rules, l = rules.length;
			for(var j=0; j<l; j++) parseCSSRule(rules[j]);
		} catch(securityException){}
	}

	function parseCSSRule(rule) {
		var select = rule.selectorText, style = rule.style.cssText;
		if(!(/(^|\s)(([^a]([^ ]+)?)|(a([^#.][^ ]+)+)):(hover|active)/i).test(select) || !style) return;
		
		var pseudo = select.replace(/[^:]+:([a-z-]+).*/i, 'on$1');
		var newSelect = select.replace(/(\.([a-z0-9_-]+):[a-z]+)|(:[a-z]+)/gi, '.$2' + pseudo);
		var className = (/\.([a-z0-9_-]*on(hover|active))/i).exec(newSelect)[1];
		var affected = select.replace(/:hover.*$/, '');
		var elements = getElementsBySelect(affected);

		currentSheet.addRule(newSelect, style);
		for(var i=0; i<elements.length; i++)
			new HoverElement(elements[i], className, activators[pseudo]);
	}

function HoverElement(node, className, events) {
	if(!node.hovers) node.hovers = {};
	if(node.hovers[className]) return;
	node.hovers[className] = true;
	node.attachEvent(events.on,
		function() { node.className += ' ' + className; });
	node.attachEvent(events.off,
		function() { node.className = 
			node.className.replace(new RegExp('\\s+'+className, 'g'),''); });
}

function getElementsBySelect(rule) {
	var parts, nodes = [doc];
	parts = rule.split(' ');
	for(var i=0; i<parts.length; i++) {
		nodes = getSelectedNodes(parts[i], nodes);
	}	return nodes;
}
	function getSelectedNodes(select, elements) {
		var result, node, nodes = [];
		var classname = (/\.([a-z0-9_-]+)/i).exec(select);
		var identify = (/\#([a-z0-9_-]+)/i).exec(select);
		var tagName = select.replace(/(\.|\#|\:)[a-z0-9_-]+/i, '');
		for(var i=0; i<elements.length; i++) {
			result = tagName? elements[i].all.tags(tagName):elements[i].all; 
			for(var j=0; j<result.length; j++) {
				node = result[j];
				if((identify && node.id != identify[1]) || (classname && !(new RegExp('\\b' +
					classname[1] + '\\b').exec(node.className)))) continue;
				nodes[nodes.length] = node;
			}
		}	return nodes;
	}
</script>

Full Excel VBA Course - Beginner to Expert

Centering An Image In A Float Right Column

Similar Tutorials

View Content

Hello,
I am a fan of css and use it all the time. My one and only one problem with it is centering an image in a column that has been floated right. I've tried numerous ways to do this, but none have worked. Usually I end up adding a 2 column table, fixing the right column with x px, then adding images in rows in the left table column. This really does not center the image for all screen sizes, but it does move the images to the left. Also, margin-right:xpx would do about the same thing.
This long-winded explanation leads to my css question: Is there a way to center images in a column that has been floated right? Maybe I am over-looking the obvious.
Regards,
Lee

Centering A List Within A Table Column

Similar Tutorials

View Content

I know this is probably soooo not kosher, but this is where I'm at ...

I have a star rating graphic that I got off the web that uses an HTML list, turned horizontally, to get the stars to light up when you hover over them. It took me ages to get it working, to customize it to my website's colors, and now it all works great. The only problem is I need it to appear centered in a table column, and no matter what I do with the css code I can't make it happen.

I know I should probably be using divs and all, but I tried that, and ultimately decided tables is easier for this purpose.

Anyway, if someone can forgive my sloppy, amateur ways and tell me how I can get this f-ing thing to center in my table column I would much appreciate it.

Here's the css code:

Code:

/* star rating */

.star * {
float: right;
padding:0px;
margin:0px;
list-style:none;
}
 
ul.rating{
background:url(images/star8.jpg) bottom;
height:21px;
width:115px;
overflow:hidden;
position:relative;
}
 
ul.rating li{
display:inline
}
 
.rating a {
display:block;
width:23px;
height:21px;
float:right;
text-indent:-9999px;
position:relative;
}
 
.rating a:hover {
background:url(images/star8.jpg) center;
width:115px;
margin-left:-92px;
position:static;
}
 
.rating a:active {
background-position:top;
}

and here's the HTML code (in php format):

Oops - won't let me send code because it contains URLs. Either way, it's a straight up table with three columns.

Cheers.

Julian

Centering Images In Vertical <li> Column

Similar Tutorials

View Content

Hello,

Thank you for reading my post

This is what I try to create.
A Vertical Navigator column with images, without knowing their size, as links and javascript actions. The images should be Horizontally centered.
I want to set the width of the div 'navBar' dynamically so that the images inside the 'navElement's grows or shrink but stays in center.
The images could be between 55 - 90 pixels width. And I want to have them grow or shrink between 40 - 80 px width.

What I already got :
The links and javascript actions are working. Also have a column working where the images are centered with a known size, but not working with images without knowing the size.

I did try and search for several hours, but couldn't find a good solution.

Mainly my question would be, how I can shrink or grow an image without knowing his size.

Basicly my html code is

Code:

<div id="navBar">
  <div class="navElement" id="nav1">
	<img class="navImg" src="images/home.gif" />
  </div>
  <div class="navElement" id="navN">
	<img class="navImg" src="images/notHome.gif" />
  </div>
</div>

my latest css for unknown image size

Code:

#navBar { /* main page navigation container */
	height: 460px;
	width: 70px; /* 1. this will be dynamically set */
	left: 100px;
	top: 151px;
	position: absolute;
	visibility: visible;
	}
.navImg {
	height: auto;
	width: auto;
	/*	height: 60px;*/
	/*width: inherit;*/
	position: relative;
	top:0px;
margin:0 auto;
}
#navElement1 {
	position: relative;
	width: auto;
	height: 70Px;
	top:0px;
margin:0 3px;
	visibility: visible; }

With javascript I add a onclick event handler on each navImg wich trigger the action. This works to.

Please, Is someone willing to help with pointers.

Thanks in Advance
SC

Centering Divs In Nav Column Reliably Cross-platform

Similar Tutorials

View Content

Having an odd rendering problem involving centering content in a fixed-width right hand column that lies within a fixed width centered master content div.

Take a look at the template he http://www.ipfwcommunicator.org/devindex.php

At first I tried to center the content using align="center" in the HTML markup, which I know is a no-no, so I'm not too sad it didn't work. I then tried {margin-left: auto; margin-right: auto;}, thinking it would work in IE as it does with tables, but it did not. Both of these attempts worked worked with most modern browsers (Moz/Firefox/Safari/NN7) but failed on MSIE5/Mac and IE6/Win. Nice and compliant, and I would be happy in a perfect world, but alas, 90% of my readers use a (vastly) imperfect browser.

I decided to get a bit more professional and utilize CSS positioning, setting the DIVs that hold the content boxes (i.e., Weather/Search/etc.) as {position: relative; left: 15px;}This also worked in most browsers, but oddly enough on IE5 Mac (and assume IE6 win although I didn't have a chance to test) the boxes centered but the tables inside the weather/search boxes that allow for cross-platform formating jutted out the side.

Lastly, and this is the current solution, since the column is fixed width and the boxes are fixed width, I used the "ice" solution of dividing the remaining margin by two, and setting margin-left: equal to that. In this case:

{margin-left: 15px;}

Oddly enough this works FINE on everything, even IE5/Mac, but doesn't work on IE6/Windows, which instead results in what appears to be 5 or 6px more than the defined 15px.

Compare here between Firefox and IE6 and you'll see it.

And CSS is here

So the question: What IS the best way to center up those boxes in that column? This is my first major CSS undertaking, having worked with nested tables up until now, so any pointers on my bad markup will be gladly accepted

Thanks in advance,

Aiden

Ie6 Issue: Spacer Div In Right Column Sits Below Bottom Of Left Column

Similar Tutorials

View Content

Hi all,

I've tried searching around for this issue, but I've not found any help so far and it's driving me nuts. I hope someone here can advise.

This is an abridged version of the site's code for example:
Code:

<style type="text/css">
<!--
#main1 {
	padding: 0px;
	margin: 0px;
}

#left {
	width:260px;
	margin:0;
	padding:0;
	float: left;
}
#left-top {
	background-image: url(../images/panel-top-left.gif);
	background-repeat: no-repeat;
	background-position: center top;
	height: 16px;
	margin: 0px;
	padding: 0px;
}
#left-middle {
	background-image: url(../images/panel-middle-left.gif);
	background-repeat: repeat-y;
	padding-right: 20px;
	padding-left: 20px;
	padding-bottom: 2px;
}
#left-bottom {
	background-image: url(../images/panel-bottom-left.gif);
	background-position: center;
	height: 18px;
}
#logo {
	background-image: url(../images/swalingslogo.gif);
	background-position: center top;
	width: 260px;
	height: 120px;
	background-repeat: no-repeat;
}
/* Navigation List */
#navlist
{
	padding-left: 0;
	margin-bottom:10px;
	width: 217px;
}
#navlist li
{
	list-style: none;
	margin-bottom:4px;
	padding: 0;
	font-size:1.2em;
	line-height:1.8em;
	width:217px;
	height:32px;
	background-image:url(../images/nav2.gif);
	background-repeat:no-repeat;
	margin-top: 0;
	margin-right: 0;
	margin-left: 0;
}
#navlist li a:link, #navlist li a:visited {
	display:block;
	text-decoration: none;
	color:#039;
	width:207px;
	height:32px;
	font-weight:bold;
	padding-top: 2px;
	padding-right: 5px;
	padding-bottom: 2px;
	padding-left: 5px;
}
#navlist li a:hover { 
	text-decoration: none;
	color:#FF6600;
}
/* Testimonials */
div#fscroller {
	width:200px;
	height:200px;
	background-image:url(../images/bg-testimonials.gif);
	background-repeat:no-repeat;
	margin-left:8px;
}
div#fscroller p {
	margin-left: 10px;
	margin-right: 10px;
	margin-top: 10px;
	margin-bottom: 5px;
}

/* Middle Column */
#middle {
	margin-top: 0;
	margin-right: 0px;
	margin-bottom: 0;
	padding-right: 0px;
	padding-left: 0px;
	padding-top: 0px;
	text-align: justify;
	margin-left: 260px;
}
#middle #top-left {
	background-image: url(../images/panel-top-rightleft.gif);
	height: 16px;
	font-size: 2px;
	background-repeat: no-repeat;
}
#middle #top-right {
	float: right;
	margin-top: -16px;
	background-image: url(../images/panel-top-rightright.gif); 
	height: 16px; 
	width: 20px;
	font-size: 2px;
}
#middle a {
	color: #003399;
}
#middle a:hover {
	text-decoration: none;
}
/** Country Titles **/
#middle h2#unitedkingdom {
	background-image: url(../images/title-unitedkingdom.gif);
	background-repeat: no-repeat;
	height: 26px;
	width: 201px;
	margin-bottom: 6px;
}
#middle h2#antigua {
	background-image: url(../images/title-antigua.gif);
	background-repeat: no-repeat;
	height: 26px;
	width: 128px;
	margin-top: 16px;
	margin-bottom: 6px;
}
/* Minisite Links */
div.minisite {
	float: left;
}
div.minisite span {
	display: none;
}
div.minisite a {
	background-position: top;
	background-repeat: no-repeat;
	height: 168px;
	width: 190px;
	display: block;
}
div.minisite a:hover {
	background-position: bottom;
}
a#minisite-swimminglessons {
	background-image: url(../images/swimming-lessons-uk.jpg);
}

.clear {
	clear:both;
}
.hidden {
	display: none;
}

.notopgap {
	margin-top: 0;
}

.nobottomgap {
	margin-bottom: 0;
}
.inside {
	background: #EFEFEF;
	padding-left: 10px;
	padding-right: 10px;
}
-->
</style>
<div id="main1">
<div id="left">
<!-- Logo -->
<div id="logo"></div>
		
<div id="left-top"></div>
<div id="left-middle">

<!-- Navigation -->
<!--#include file="../inc/nav2.asp" -->

<!-- Testimonials -->
<!--#include file="../inc/testimonials.asp" -->
<!--#include file="../inc/special-offers.asp" -->
</div>
<div id="left-bottom"></div>
</div>
	
<!-- Middle Column -->
<a name="skipnav" class="hidden"></a>
<div id="middle">
	
<div class="top-left"></div><div class="top-right"></div>
<div class="insideleft"><div class="insideright"><div class="inside"><div class="gap-saver"></div>
	
<!-- UK Sites -->
<h2 id="unitedkingdom"><span class="hidden">United Kingdom</span></h2>
<div class="minisite"><a id="minisite-swimminglessons" href="(URL address blocked: See forum rules)"><span>Swimming Lessons</span></a></div>
<div class="minisite"><a id="minisite-swimminglessons" href="(URL address blocked: See forum rules)"><span>Swalings Training</span></a></div>
<div class="minisite"><a id="minisite-swimminglessons" href="(URL address blocked: See forum rules)"><span>Swalings Residential Courses</span></a></div>

<div class="clear"></div>

<!-- Antigua Sites -->
<h2 id="antigua"><span class="hidden">Antigua</span></h2>
<div class="minisite"><a id="minisite-swimminglessons" href="(URL address blocked: See forum rules)"><span>Swalings Soccer</span></a></div>
<div class="minisite"><a id="minisite-swimminglessons" href="(URL address blocked: See forum rules)"><span>Swalings Parties and Events</span></a></div>
<div class="minisite"><a id="minisite-swimminglessons" href="(URL address blocked: See forum rules)"><span>Swalings International School of Swimming</span></a></div>
<div class="minisite"><a id="minisite-swimminglessons" href="(URL address blocked: See forum rules)"><span>Swalings Babysitting and Nanny Agency</span></a></div>
<div class="minisite"><a id="minisite-swimminglessons" href="(URL address blocked: See forum rules)"><span>Swalings School of Rugby</span></a></div>
<div class="minisite"><a id="minisite-swimminglessons" href="(URL address blocked: See forum rules)"><span>Swalings School of Volleyball</span></a></div>
<div class="minisite"><a id="minisite-swimminglessons" href="(URL address blocked: See forum rules)"><span>Swalings Training</span></a></div>
			
<div class="clear"></div>
			
<div class="gap-saver"></div>
</div></div></div>
<div class="bottom-left"></div><div class="bottom-right"></div>
	
</div>	
<!-- End Middle Column -->
	
</div>

I've placed the Country Title in an H2 tag, then beneath that, each anchor is enclosed in a DIV, and is set as a left-floated block. Then I placed a spacer DIV (clear: both) to create a new line, then repeated with H2 and links.

This all works fine in Firefox, IE7 and Opera, but of course IE6 is being a pig as usual. The spacer DIV is pushed to sit alongside the bottom of the left column, and I can't figure out how to (or if I can) stop this.

I can't add in links properly, so I hope this is acceptable under the rules --
The site in question is: www.swalings .com/swalings/index4.asp
and here's a screenshot of IE6 behaviour: www.swalings .com/images/swalings-ie6-troubleshoot.jpg

Hopefully that's enough information to go on, please let me know if there's something I missed out.

Thanks a lot!

Rob

Fixed Width Table Column With One Column Spanning The Rest

Similar Tutorials

View Content

Hi

I am trying to make a table to display some stuff within a fix sized window. I want to have 5 columns of fixed width and one column that spans the rest of the remaining space. The Idea is to allow the widths of the first 5 columns to be changed by a script and having the last one adapting as needed...

html Code:
Original - html Code <div class="container"><table cellspacing="0"> <colgroup> <col width="40" /> <col width="220" /> <col width="120" /> <col width="65" /> <col width="40" /> </colgroup> <thead> <tr> <th>A</th> <th>B</th> <th>C</th> <th>D</th> <th>E</th> <th style="width: 100%;></th> </tr> </thead> <tbody> <tr> <td>1</td> <td>2</td> <td>3</td> <td>4</td> <td>5</td> <td style="width: 100%;></td> </tr> </tbody> </table></div>

  

    <div class="container"><table cellspacing="0">
      <colgroup>
        <col width="40" />
        <col width="220" />
        <col width="120" />
        <col width="65" />
        <col width="40" />
      </colgroup>
      <thead>
        <tr>
          <th>A</th>
          <th>B</th>
          <th>C</th>
          <th>D</th>
          <th>E</th>
          <th style="width: 100%;></th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>1</td>
          <td>2</td>
          <td>3</td>
          <td>4</td>
          <td>5</td>
          <td style="width: 100%;></td>
        </tr>
      </tbody>
    </table></div>

css Code:
Original - css Code div.container { height: 400px; width: 800px; overflow: scroll; } table { width: 100%; } td { border-style: solid; border-color: silver; border-width: 0px; padding: 1px 3px; } th { border-style: outset; border-color: silver; border-width: 2px; background: silver; padding: 1px 3px; }

  

  


 div.container


 {


   height: 400px;


   width: 800px;


   overflow: scroll;


 }


 table


 {


   width: 100%;


 }


 td


 {


   border-style: solid;


   border-color: silver;


   border-width: 0px;


   padding: 1px 3px;


 }


 th


 {


   border-style: outset;


   border-color: silver;


   border-width: 2px;


   background: silver;


   padding: 1px 3px;


 }

It really does fill the entire space but the last column crushes all the other into their minimal width resulting in linebreaks between words inside the cells...

Please help me

Three Column Layout: Middle Column Width Woes

Similar Tutorials

View Content

Hey,
So I have a three column layout being implemented as such:

html:
Code:

<div class="content">
    <div class="col1 column"></div>
    <div class="col3 column"></div>
    <div class="col2 column">
        <div class="header">Header</div>
    </div>
</div>

CSS:
Code:

.column {
padding: 10px;
position:relative;
}

.header {
background:#cfe6f5;
color:#416383;
font-size:11px;
font-family:Arial;
font-weight:300;
padding-left:15px;
}

.col1 {
float: left;
width:250px;
}

.col2 {
margin-left: auto;
margin-right: auto;
}

.col3 {
float:right;
width:250px;
}

The problem is that the width of the header div extends all the way to the left and right of the page when it's in the middle column, but behaves the way I want it to (extends to the left and right of the column) when it's in the left or right column. Any ideas? Thanks.
--Surgery

A 2 Column Layout, Let Only The Second Column Scroll Horizontally But Both Vertically

Similar Tutorials

View Content

Question title:
A 2 column layout, let only the second column scroll horizontally and let them both scroll vertically

Hello

I did try several idea's, but all failed. Then I did search the web but found a list of > 400.000 in google.

If someone is willing to tell me if it is possible and give me some directions, please do. Everything is welcome.

I got a list with 3 columns ( basically you could say I have only two columns because 2-3 could be concatenated to together, but they have a different style and justification, but I could live to start with a two column sample)

f.e
line 1 : value_one - ( some_text - value_two (right justified) )
line 2 : value_one - ( some_text - value_two (right justified) )
line 99:....
e.t.c

Column one has a fixed width of 32px.
'some text' can be longer then the wide available and value_two is with 3 spaces appended to column 2. I want that column one is fixed horizontal and that the second and the third column can scroll horizontally. Of course when there are more line's then the height of the container is should be posable to scroll vertically.

Finally I need the color behind column one be different then the column 2 and 3.

So what I did create is a container with two containers where the left one has a different colour then the right one and above those a container with the list. I have overflow on auto, so I get scroll-bars when necessarily.
But my problem is that when I scroll horizontally that my first column scrolls away to the left.

Basically my question is. How can I get a 2 column layout, let only the second column scroll horizontally ( first is locked in horizontal place ) and let them scroll both vertically?

3-column Catastrophe (left Column Pushed Down)

Similar Tutorials

View Content

Hi, hopefully you enjoyed the title, I had a good laugh thinking of it in that split second it took me to write it.

So, I found a 3 column css layout on a CSS generator website, because I got sick of trying to hack up layouts I've made in the past that didn't work.

Anyhow, it was working fine with one line of content in each column when I tested it out, however, once content in the middle column was added, and stretched vertically beyond a certain point, it will drag the left columns content down with it. The right column is not affected in any way.

I have spent a few hours trying to look for reasons as to why it would happen, but I had no luck. I would appreciate any help... so thank you in advance if you take a stab at it.

Here's the html:

Code:

<body>

<div id="pagewidth">
	<div id="header"></div>

		<div id="wrapper" class="clearfix" > 
			<div id="twocols" class="clearfix"> 
				<div id="maincol">Main Text, woot. (aka hi hi hi)</div>
				<div id="rightcol">Sidebar, yippee.</div>
			</div> 
		<div id="leftcol">

			<div id="navigation">test</div>
		</div>
	</div>
		
	<div id="footer"></div>
</div>

</body>

and the CSS:

Code:

html, body
{
 background: #333399;
 margin:0; 
 padding:0; 
 text-align:center;
 font-family: Verdana, Arial, Tahoma;
 font-size: 12px;
 font-weight: normal;
 color: black;
 	 
} 
 
#pagewidth
{ 
 width: 750px; 
 text-align:left;  
 margin-left:auto; 
 margin-right:auto;
 background: #333399 url('images/bodycontent.gif') repeat-y center top;
} 
 
#header
{
 position:relative; 
 height:138px; 
 background: url('images/header.gif') center;
 width: 100%;
} 
 
#leftcol
{
 width: 118px; 
 float: left;
 left: 25px;
 position: relative; 
 background-color: transparent;
 margin:0; padding:0;
 }
 
#twocols
{
 width: 700px; 
 float: right; 
 position: relative; 
  }
 
#rightcol
{
 width:180px;
 right: 25px;	 
 float:right; 
 position:relative; 
 background-color: transparent;
 }
 
#maincol
{
 background-color: transparent;  
 float: left;
 left: 100px; 
 display: inline; 
 position: relative; 
 width: 390px; 
 }
 
#footer
{
 text-align: center;
 height:39px;
 background: url('images/footer.gif');
 clear:both;
 } 
 


.clearfix:after 
{
 content: "."; 
 display: block; 
 height: 0; 
 clear: both; 
 visibility: hidden;
 }
 
.clearfix{display: inline-table;}

/* Hides from IE-mac \*/
* html .clearfix{height: 1%;}
.clearfix{display: block;}
/* End hide from IE-mac */  


 
 /*printer styles*/ 
 @media print{ 
/*hide the left column when printing*/ 
#leftcol{display:none;} 

/*hide the right column when printing*/ 
#rightcol{display:none;} 
#twocols, #maincol{width:100%; float:none;}
}

Again, thank you in advance if you can come up with anything.

Make Left Column Same Height As Right Column?

Similar Tutorials

View Content

can i make my left column, the same height as my right column? or infact, if the left is taller than the right, the right extends to it and if the right is taller than the left the left extends to it?

is this possible, cheers

heres my css:
left column, is #leftNav and the right column is #contentMain

PHP Code:
#content {
        margin:0px auto;
        padding: 0;
        width: 760px;
    }

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

    #leftNav {
        color: #000;
        float: left;
        margin: 0;
        padding: 0;
        width: 128px;
    }

Center Column Width In 3-column Layout

Similar Tutorials

View Content

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!

4 Column With One Fluid Column And Footer

Similar Tutorials

View Content

hi all, right have got a problem which has been bugging me for days now. i have 4 columns in a row (inside a wapper div)which all will have different content image, text other divs/classes etc. now one of these columns will be quite fluid as it will have different text on each page meaning it will be quite long on some pages not on others. the problem i am getting is in the good browsers firefox etc its ok in IE6+. the wapper does'nt seem to see the divs in the content meaning it does not get filled, meaning that the footer flys to the top and not where it should be, i dont have a live version but heres the code: mainly thanks Dan

<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">

</style>
</head>
<body>
<div id="wapper">
<div id="menu-pronuptia">
<p>test</p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
</div>

<div id="menu-pronuptia1">
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
</div>

<div id="menu-pronuptia2">
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
</div>

<div id="menu-pronuptia3">
<p> </p>
<p> </p>
<p> </p>
<p> </p>
</div>
</div>
<div id="box">
<p><br />
</div>
</body>
</html>

Help : Two Column Layout : Table In Right Column

Similar Tutorials

View Content

Hi,

http://www.dudley.nhs.uk/search.asp has a two column effect. The CSS for it is he http://www.dudley.nhs.uk/css/screen.css I was wondering why if there is a table in the right hand column with a width percentage over 77% there is some horizontal scrolling? This happens in IE.

Any help would be greatly appreciated.

Thanks.

Janusz Jasinski

2 Column Layout - Problem With Right Column

Similar Tutorials

View Content

Hello!

I'm new to CSS, so any help would be greatly appreciated!

I'm working on this page:
sugarhooker[dot]com/testing/index2.html
*The CSS is included in the head

The right column is suppose to start where it says 'Are you hooked...'
It should be right underneath the navigation bar. Anyone know what I'm doing wrong?

Thanks in advance!

Css Three Column Layout Column Length

Similar Tutorials

View Content

I am a HTML&CSS novice - I am trying to write a page using a three column layout but the column colour doesn't reach the footer.

I understand that this is a common problem and I've looked at a lot of examples on the web of how to work around this or create a better layout but I'm still not sure enough to know which would be the easiest and best to go within the page I have written.

I want to avoid images but other than that any help would be great!

I have validated the HTML & CSS and they are copied below (could any advice be really specific, as I said this is very new to me!).

Thanks

HTML:

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Drivers Jonas Information Unit</title>
<meta name="keywords" content="1" />
<link rel="stylesheet" type="text/css" href="djiucss.css" media="screen" />
<link rel="stylesheet" type="text/css" href="djiuprintcss.css" media="print" />
</head>
<body>
<div id="top">
<div id="picture">
<img src="GIF.gif" alt="DJ" width="200" height="100" />
</div>
<div id="heading">
<div id="title"><h1>Drivers Jonas Information Unit</h1></div>
</div>

</div>
<div id="left">
<br/><p><a href="about.html">About us</a></p><br/>
<p><a href="company.html">Company Information</a></p><br/>
<p><a href="legal.html">Legal information</a></p><br/>
<p><a href="landreg.html">Land Registry</a></p><br/>
<p><a href="research.html">Research</a></p><br/>
</div>
<div id="right">
<div id="title"><h2> News
</h2></div>
<ul>
<li>The Information Unit has recently acquired a set of new APC guides</li>
<li>If you would like any training on databases</li>
<li>The Information Unit has created an economy timeline </li>
</ul>
</div>

<div id="main">
<div id="title"><h2>Main stuff</h2></div>
<p>Suspendisse adipiscing malesuada lectus. Cras vitae dolor. Donec consequat, lectus sed euismod consequat, ipsum mi mollis nunc, eget nonummy neque purus a tortor. Ut vel lorem. Curabitur mollis mauris id diam. Nam posuere. In placerat sapien ut nisl. Donec volutpat augue ut velit. Proin nec mi sit amet metus placerat egestas. Quisque porttitor massa eu lacus. Donec tristique, neque in sollicitudin euismod, enim tellus varius mauris, id vestibulum est massa id massa. Integer et purus. Vivamus condimentum tincidunt ipsum. Duis augue lorem, pretium vel, cursus at, vulputate sed, neque. Quisque justo. Nunc rhoncus. In ornare venenatis velit. </p>
<p>Donec facilisis ante sit amet mauris. Nunc fermentum orci eu quam. Donec vestibulum. Vestibulum ultricies nisl eu eros. Curabitur urna. Duis enim erat, lobortis nonummy, mollis non, porttitor nec, nisi. Phasellus pulvinar purus eu pede. In mollis. Duis sit amet dui et arcu rhoncus auctor. Integer est dui, pharetra vel, volutpat ac, luctus in, elit. </p>
<p>Suspendisse adipiscing malesuada lectus. Cras vitae dolor. Donec consequat, lectus sed euismod consequat, ipsum mi mollis nunc, eget nonummy neque purus a tortor. Ut vel lorem. Curabitur mollis mauris id diam. Nam posuere. In placerat sapien ut nisl. Donec volutpat augue ut velit. Proin ne</p>
</div>
<div id="bottom">
Drivers Jonas Information Unit
</div>
</body>
</html>

CSS:

#top
/*DJ logo and page title - includes h1*/
{
color: black;
font-family: arial, sans-serif;
font-size: 20px;
background: #d31145;
padding-bottom: 15px;
}

body
{
color: black;
font-family: arial, sans-serif;
font-size:14px
}

img /*DJ logo*/
{
padding: 20px;
float:left;
}

#heading
{
text-align: center;
padding:20px;
}

/*main page title*/
/*should change all reds to DJ red: #d31145*/

#left, #right, #main
{
color: white;
background: black;
}

#left
{
float: left;
width:140px;
border-right:2px solid #d31145;
text-align:left;
padding-left: 1em;
}

#right
{
float:right;
width:140px;
border-left:2px solid #d31145;
text-align:left;
padding-right: 1em;
}

#main
{
margin-left: 150px;
margin-right: 150px;
border-left: 1px solid;
border-right: 1px solid;
padding: 1em;
}

#bottom
{
clear:both;
margin: 0;
color:black;
background: #d31145;
font-size: 16px;
font-family: Arial, sans-serif;
text-align: center;
}

#title
{
text-align:center;
}

a:link {color:white}
a:visited {color:silver}
a:hover {color:#d31145}
a:active {color:#d31145}

Multi Column Horizontal Menu With Multi Column Drop Down

Similar Tutorials

View Content

hello. I am currently using a simple horizontal top menu with a vertical drop down. I would like to change the vertical drop down to be horizontal, multi column, and should accomodate more than one line, if possible. The example I'm going for is used as top navigation he
nfl - baltimore ravens home page
and he
ge home page

Here is the code I'm using currently (would like it to be all CSS).
####

ul#mainNavigation
{
padding-left:185px;
}
ul#mainNavigation li
{
padding:0 16px;
float: left;
display:inline;
position: relative;
list-style: none;
color:White;
_width:1px;
}
ul#mainNavigation li.Seperator
{
padding:0px;
_width:1px;
}
ul#mainNavigation li.over
{
background-color:white;
}
ul#mainNavigation li.over a
{
color:Red;
}
ul#mainNavigation li a
{
color:White;
text-transform:uppercase;
text-decoration:none;
font-weight:bold;
display:block;
}
ul#mainNavigation a:hover {
color: Red;
}
ul#mainNavigation li a
{
display: block;
}
ul#mainNavigation li p
{
height:19px;
}
ul#mainNavigation li ul
{
display: none;
position: absolute;
background-color:Black;
opacity:.8;
filter: alpha(opacity=80);
-moz-opacity: 0.8;
margin-left:-16px;
}
ul#mainNavigation li.over ul
{
display: block;
z-index:999;
}

ul#mainNavigation li.over ul li
{
float: none;
background:none;
border:none;
white-space:nowrap;
padding:0px;
}
ul#mainNavigation li.over ul li a
{
color: white;
padding:5px;
border-bottom:solid 1px black;
}

ul#mainNavigation li.over ul li a:hover
{
background: #3d1f6e;
color: white;
}
~~~~~~~ HTML ~~~~~~~~~~~~~~

<ul id="mainNavigation">

<li>
<p><a href="Mainlink1.html">Mainlink1</a></p>
<ul>
<li><a href="link2.html">LINK 2</a></li>
<li><a href="link3.html">LINK 3</a></li>
<li><a href="link4.html">LINK 4</a></li>
<li><a href="link5.html">LINK 5</a></li>
<li><a href="link6.html">LINK 6</a></li>
<li><a href="link7.html">LINK 7</a></li>
</ul>
</li>

<li>
<p><a href="Mainlink2.html">Mainlink2</a></p>
<ul>
<li><a href="link2.html">LINK 2</a></li>
<li><a href="link3.html">LINK 3</a></li>
<li><a href="link4.html">LINK 4</a></li>
<li><a href="link5.html">LINK 5</a></li>
<li><a href="link6.html">LINK 6</a></li>
<li><a href="link7.html">LINK 7</a></li>
</ul>
</li>
</ul>

####
Thank you, in advance!
~ lahddah

Centering

Similar Tutorials

View Content

Hi, I'm trying to design a web page and I want to center all the content (including the background), and have another background behind all of that. I can't figure out how to center everything. When I put a <div> around all the content and center it in CSS, only certain elements(some graphical buttons) get centered while all of the text stays lined up to the left. Any ideas? I'm sure I'm making a really silly mistake.

Centering A Div Within A Div

Similar Tutorials

View Content

Hello, I have tried to use the auto margin to center a div within a div, but the auto margin only seems to work on the outermost div. Is there a workaround where I can center my content inside of a nested div? Take the example code:

Code:


<html>
<head>
<style type="text/css">
body {
background-color: orange;
}
#container {
width: 700px;
margin: 0 auto;
background-color: red;
}
#nested {
width: 700px;
margin: 0 auto;
background-color: blue;
}
</style>
</head>
<body>
<div id="container">
	<div id="nested">
		Text Here
	</div>
</div>
</body>
</html>

So I want the nested div to have its content centered, so "Text Here" is in the center.

Need Help Centering A Div With Css

Similar Tutorials

View Content

Hey everyone,

I am fairly comfortable with HTML, and even know a decent amount of PHP and Javascript. But sometimes trying to do the simplest things in CSS makes my head spin! (this is one of those times).

I've got a "scrolling" header at the top of a page (stays visible even when scrolling), and am trying to center a DIV (which contains opt-in forms) inside that header. It looks good when my browser window is maximized (at 1280x1024 resolution). But when I minimize the browser or check it in other screen resolutions, the "centering" of the opt-in forms are off.

Here is the page...

www.wordflood.com/Test/Scrolling_Header.html

And here are the CSS includes...

www.wordflood.com/Test/style.css
www.wordflood.com/Test/IE6_style.css

This was really just a quick hack from a "scrolling header" demo I found online, so I must have overlooked something.

Any ideas?

Centering Everything

Similar Tutorials

View Content

Hi all, this is my CSS:

Code:

body {
	font-family:arial;
	font-size:14px;
	background-color:#FFFFFF;
	margin: 0;
    padding: 0;
}

.mainbar {

	position:absolute;
	height:100%;
	width:600px;
	display:block;
	background-color:#F2F2F2;
	top:0px;
	bottom:0px;
	z-index:0;
	border-top: 0px solid #000000;
	border-right: 1px solid #000000;
	border-bottom: 0px solid #000000;
	border-left: 1px solid #000000;
}

.contact {
	position:absolute;
	display:block;
	height:40px;
	width:600px;
	background-color:#FFFFFF;
	top:80%;
	bottom:0px;
	z-index:0;
	border-top: 1px solid #000000;
	border-right: 1px solid #000000;
	border-bottom: 1px solid #000000;
	border-left: 1px solid #000000;
}

.logo { 
	position:absolute;
	display:block;
	height:200px;
	width:600px;
	background-color:#CCCCCC;
	top:10%;
	bottom:10%;
	border:1px solid #000000;
	z-index:2;
}

.logoborder {

	border-top: 0px solid #000000;
	border-right: 1px solid #000000;
	border-bottom: 0px solid #000000;
	border-left: 1px solid #000000;
	
}

Now how do I go about centering all of this? I have put many frustrated hours into this, and have tried everything that could have a possibility of working but have come out with nothing. Any help would be appreciated!

Please, I have read other forum posts and it is not clear what to do, so treat me like i'm 5 years old!!!

Thanks!

Jack.