Jump to content

Alternative to faux columns


kurt.santo
 Share

Recommended Posts

Working on my first ever table-free website (yeah...) and wondered if there is an alternative to faux columns?I placed a container around the the relevant two divs, which references a bg image with the right bg colour for the left nav (and rest to left just being white). Looks cool in all browsers apart from Safari...Any ideas? Also, I wondered how I would have cornered edges around my main container? Would I need to create the relevant image files and use them as bg images in old fashion? And last but not least, to to clear a float: does it only goes inside <div> or <br>? There is a <div> after I cleared a float inside a <br>. The space is much too big...Kurt

Link to comment
Share on other sites

eh?Can you post a link to the site or some code so we can see this in action?:)
Here is comes...This is my CSS:
/* - - GENERAL ELEMENTS - -*/body  		{			font: 12px Verdana, Arial, Helvetica, sans-serif;			line-height:150%;			background: #FFF;			margin: 0; 			padding: 0;			text-align: center; 			color: #7E8082;			}h1			{			font-size:16px;			margin:0px;			}				img			{			margin:0px;			padding:0px;			border:none;			}ul			{			list-style-type:none;			border:none;			width:150px;			margin:0px;			padding:0px;			font:bold 12px;			}				li			{			background-color:#484FBD;			border-bottom-style:solid;			border-width:thin;			border-color:#7e8082;			margin:0px 0px 5px 0px;			padding:2px 10px;			}				a:link, a:visited, a:hover, a:active	{										color:#FFF;										line-height:150%;										font-size:12px;										font-weight:bold;										text-decoration:none;										}										/* - - SPECIFIC SELECTORS - -*/#container 		{ 				width:70%;				min-width:780px;				background: #FFF;				margin: 15px auto;				text-align: left;				}								#border			{				border-style:solid;				border-width:thin;				border-color:#7E8082;				}#logo 			{ 				background: #FFF; 				padding: 5px 0px 5px 10px; 				} 								#blueRow		{				background-color:#484fbd; 				height:108px;				}								#blueRowPic		{				float:left;				padding:4px; 				margin:0px; 				}#blueRowPic img	{				padding-right:4px;				}				#blueRowText	{				margin:0px;				padding:25px 0px 25px 496px;				font-size:14px;				line-height:150%;				color:#FFF;				font-weight:bold;				}												#main			{				background-color:#FFF;				}				#mainNav 		{				float:left; 				width:150px; 				margin:0px;				padding:30px 0px 0px 4px;				}#mainContent 	{ 				float:right;				margin: 0px 0px 0px 150px; 				padding: 30px;				} 								#footer 		{ 				background:#484FBD; 				font-size:9px;				color:#FFF;				margin: 0px auto;				text-align: center;				padding: 0px;				} 								.clearfloat 	{ 				clear:both;    			height:0;    			font-size: 1px;    			line-height: 0px;				}

And this my HTML:

<body><div id="container"><div id="logo"><img src="logo.gif" width="200" height="52" /></div><div id="border"><div id="blueRow"><div id="blueRowPic"><img src="photosSameSize/property.jpg" alt="" width="150" height="100"/><img src="photosSameSize/property.jpg" alt="" width="150" height="100"/><img src="photosSameSize/property.jpg" alt="" width="150" height="100"/></div> <div id="blueRowText">headline</div><br class="clearfloat" /></div>  <div id="main">   <div id="mainNav"><ul><li><a href="#" target="_self">Home</a></li><li><a href="#" target="_self">About us</a></li><li><a href="#" target="_self">Products</a></li><li><a href="#" target="_self">Services</a></li><li><a href="#" target="_self">Our partners</a></li><li><a href="#" target="_self">Contact us</a></li></ul></div>  <div id="mainContent">    <h1> Heading</h1>    <p>Text<p>  </div></div><br class="clearfloat" />  <div id="footer">copyrigh information etc</div></div></div></body>

Currently I took the faux column bg out (will put back in when I resolve some other issues). mainNav and mainContent have a much too big of a gap in between now... (From one problem to the next;-)). I really do not understand why it does that. When I take the div for mainNav out mainContent goes to the place where it should be, but when I put it back it moves too far to right. Why is that? I could tear my hair...Kurt

Link to comment
Share on other sites

The only other option besides faux-columns is display: table-cell but this is still not supported in IE6 or IE7
Cheers, will have a think. But do you know why the mainContent sets itself so far apart from mainNav (in FF it actually shows up underneath, so sth with the clearing seems not to work)? I specified a margin of 150px from left and a left padding of 30px, which should make the text appear at 180px, which it does not...Kurt
Link to comment
Share on other sites

Cheers, will have a think. But do you know why the mainContent sets itself so far apart from mainNav (in FF it actually shows up underneath, so sth with the clearing seems not to work)? I specified a margin of 150px from left and a left padding of 30px, which should make the text appear at 180px, which it does not...Kurt
Found a solution: Took "float: right" out for #mainContent and it does what I want, yeah...Kurt
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...