CSS - If Carlsberg Made Webpages: The Bestest Css Layout Ever Ever

Hello, I am using an OS Commerce layout for a client's website. On this page - www.mts-diesel.com you will see how I have the homepage laid out in anticipation of design, with 3 divs of varying colors. One div with an id of #hp_left is where I want to put a nice jquery code. But when I insert that into #hp_left it breaks the whole layout, was seen here www.mts-diesel.com/index2.php I'm not sure what in the css in the code for this script is breaking my layout but Ithought someone here might be willing to shed some light. A big thank you. Tom

I am working on the new home page which is based on a template.

The left sideColumn is working fine, however I am having a few problems with the mainColumn layout.

Here is a static image to show what I want it to look like

Here are the problems I am having:

1) The #scroll box is place where I want it in IE but in foxfire it is right up against the left side of the #sideColumn partially hidden.

There will be text that scrolls into this box and stops. I haven't started on the part yet - in case that makes a difference. Not my choice, but that is what the bosses want.

2) I want the image centered horizontal within the #mainColumn. Here is what I have for the css:

#home img {
margin: 5px auto 5px auto;
}

which I thought would do the trick, but it's not.

3) I want the p text to have a 40px margin on the right and left side like the .large does.

Here is what I have for the css:

#home p, .large {
margin: auto 40px auto 40px;
}

It works for the .large (Welcome to Vitalograph), but not for the text below it. At one point I had it working, but after addtional changes fixing other problems, now it doesn't and I can't figure out why.

Here is the xhtml starting at the 2 column part (wrapper): Code:

  	<!--begin wrapper-->
  	<div id="wrapper">
  
  	<!--begin side column -->
  	<div id="sideColumn">
        <span class="category">Products</span>
    <ul>
		<li><a href="/products/spirometers.html">Spirometers</a></li>
		<li><a href="/products/clinical_trials.html">Clinical Trials</a></li>
		<li><a href="/products/asthma_copd.html">Asthma & COPD</a></li>
		<li><a href="/products/smoking_cessation.html">Smoking Cessation</a></li>
		<li><a href="/products/resuscitaion.html">Resuscitation</a></li>
	</ul>
	
	<span class="category">Resources</span> 
    <ul>
      <li><a href="/resources/contact_us.html">Customer Support</a></li>
	  <li><a href="/resources/training_services.html">Training & Services</a></li>
      <li><a href="/resources/exhibitions.html">Exhibitions</a></li>
      <li><a href="/resources/newsletters.html">Newsletters</a></li>
      <li><a href="/resources/downloads.html">Downloads</a></li>
      <li><a href="/resources/useful_links.html">Useful Links</a></li>
      <li><a href="/resources/industry_information.html">Industry Information</a></li>
	  <li><a href="/resources/industry_information.html">Sitemap</a></li>
	</ul>
  </div>
  <!--end of side column -->
  
  <!--begin main column -->  
  <div id="mainColumn">
  
  	<!-- InstanceBeginEditable name="Main_Section" -->
  
  
  
    <div id="home">	
        <div id="scroll"><span>scrolling news will go hear and stop</span></div>
		
        <img src="/images/boys_bubbles.gif" width="485" height="333" alt="boys and bubbles" />
	
		<span class="large">Welcome to Vitalograph</span>
		
		<p>Vitalgraph offers a wide range of spirometers along with other asthma 
          management equipment with over 40 years experience. From simple hand-held 
          units to sophisticated Windows based spirometry systems, we have it 
          all. Check out our full line of respiratory equipment under the product 
          category.</p>
		
		
      <p><a href="/about_us/about_us.html">more about us...</a></p>
		
		
	</div>
  
  
  <!-- InstanceEndEditable -->
  
  </div>
  <!--end of main column -->
  
  </div> 
  <!--end of wrapper--> 

Here is the vitalograph_master.css: Code:

body {
	font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
	font-size: 12px;
	text-align: center;
	background-color: #ffffff;
	color: #515151;
	margin:0px;
	padding:10px;
}

/*page container settings*/

#page {
	width: 750px;
	height: 600px;
	border: 1px solid #5094F9;
	background-color: #FFFFFF;
	overflow: hidden;
	margin: auto;
	padding: 10px 10px 10px 10px;
	text-align: left;
}

/*logo header and tag settings*/
	
#header {	
	margin: 0;
	padding-bottom: 5px;
	width: 450px;
	height: 36px;
	font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
	color: #5094F9;
	text-align: left;
}

#header img {
    vertical-align: -7px;
    }

.tagline {
	color: #5094F9;
	font-size: 16;
	font-style: italic;
	font-weight: bold;
	display: inline;
	clear: both;
	line-height: 20px;
	margin-left: 10px;
}

/*top bar settings*/

#topbar {
	float: top;
	height: 20px;
	background-color: #5094f9;
	clear: both;
	padding-left: 10px;
	text-align: left;
	font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
	color: #FFFFFF;
	font-size: 12px;
	font-weight: bold;
}

#topbar a:link, #topbar a:visited {
	background-color: inherit;
	font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
	text-decoration: none;
	color: #FFFFFF;
	font-size: 12px;
	font-weight: bold;
}

#topbar a:hover, #topbar a:active {
	background-color: #FFFFFF;
	font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
	text-decoration: none;
	color: #5094F9;
	font-size: 12px;
	font-weight: bold;
}

#topbar ul {
	list-style: none;
	margin: 0;
	padding-top: 2px;
}

#topbar li {
	display: inline;
	margin-right: 160px;
}

/*Main Section two columns under top section*/

#wrapper{
	padding: 10px 10px 10px 0px;
	width: 100%;
	height: 100%;
}

#sideColumn {
	float:left;
	width:155px;
	height: 78%;
	background-color: #5094F9;
	padding-top: 50px;
	padding-left:10px; 
	padding-bottom:10px;
	pading-right: 10px;
	margin-right: 10px;
	text-align: left;
	font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
	color: #FFFFFF;
	font-weight: bold;
	line-height: 20px;
}

.category {
	font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
	color: #FFFFFF;
	font-size: 16px;
	font-weight: bold;
	letter-spacing: 5px;
}

#sideColumn a:link, #sideColumn a:visited {
	background-color: inherit;
	font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
	text-decoration: none;
	color: #FFFFFF;
	font-size: 12px;
	font-weight: bold;
}

#sideColumn a:hover, #sideColumn a:active {
	background-color: #FFFFFF;
	font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
	text-decoration: none;
	color: #5094F9;
	font-size: 12px;
	font-weight: bold;
}

#sideColumn ul {
	list-style: none;
	padding: 15px 0px 15px 10px;
	margin: 0px;
}

#mainColumn {
	padding: 0px;
}

/*footer*/

.footer {
	font-family: "Times New Roman", Times, serif;
	font-size: 9px;
	color: #999999;
}

/*text*/

.large {
	font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
	color: #5094F9;
	font-size: 18px;
	font-weight: bold;
	margin-bottom: 15px;
}

Here is the home.css: Code:

/*home page*/

#home {
	margin: auto;
}

#home img {
	margin: 5px auto 5px auto;
}

#home p, .large {
	margin: auto 40px auto 40px;
}

#home a:link, #home a:visited {
	background-color: inherit;
	font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
	text-decoration: none;
	color: #5094F9;
	font-size: 12px;
	font-weight: bold;
}

#home a:hover, #home a:active {
	background-color: inherit;
	font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
	text-decoration: none;
	color: #990099;
	font-size: 12px;
	font-weight: bold;
}

#scroll {
	width: 560px;
	padding: 5px;
	background-color: inherit;
	border: 1px solid #5094F9;
	margin-bottom: 5px;
}

Any help or suggestions are greatly appreciated.

Hi there and thanks for reading & helping! I am new to this site, but here is my question:

I need to build about a 20 page website. I have been told I should do the "layout" for each page using CSS. Is it possible for each page to "link" to one CSS file for layout instructions? I have found suitable CSS layout templates but am unsure how to link each page to the external CSS file for a basic "header, 2 column, footer" layout, or if it is even possible?

My layout is pretty simple. 1 large columb in the center that should extend the full length of the browser(minimum) regardless of how much text is in it. 1 column on either side of it for other content.

I cannot get the middle column to extend to 100%. it stops at the data. Here is my CSS.

Code:

body {
	margin: 0;
	padding: 0;
	font-size: 12px;
	font-family: 'Trebuchet MS', 'Lucida Grande',
	  Verdana, Lucida, Geneva, Helvetica, 
	  Arial, sans-serif;
	background-color: #C10E0E;
}

#leftcolumn {
	display: inline;
	float: left;
	left: 15%; 
	width: 150px; 
}

#centercolumn {
	float: left;
	width: 511px;
	height: 100%;
	margin-left: 2px; 
	padding: 8px;
	border-left: 1px solid #494949;
	border-right: 1px solid #494949;
	background:  url(/images/bg.png) no-repeat top left;
	background-color: #FFDCAA;
}

#rightcolumn {
	float: left;
	width: 150px;
	margin-left: 1px; 
} 

#mainnav {
	width: 150px;
	padding: 0 0 0 0;
	font-size: 12px;
	font-family: 'Trebuchet MS', 'Lucida Grande',
	  Verdana, Lucida, Geneva, Helvetica, 
	  Arial, sans-serif;
	background-color: #C10E0E;
	color: #FFDCAA;
}

#mainnav ul {
	list-style: none;
	margin: 0;
	padding: 0;
	border: none;
}
		
#mainnav li {
	margin: 0 0 0 0;
	border-left: 7px solid #C10E0E;
	padding: 0 5px 0 0;
}

#mainnav li a {
	display: block;
	height: 15px;
	vertical-align: middle;
	padding: 0 0 0 0;
	margin: 0 0 0 0;
	background-color: #C10E0E;
	color: #FFDCAA;
	text-decoration: none;
	text-align: right;
}

html>body #mainnav li a {
	width: auto;
	padding: 0;
	margin: 0;
}

#mainnav li a:hover {
	background-color: #C10E0E;
	border-left: 7px solid #FFDCAA;
	color: #FFF;
	padding: 0;
	margin: 0;
}
	
#mainnav h3 {
	padding-left: 5px;
	font-size: 14px;
	font-weight: bold;
	color: #F6D4A4;
	font-style: italic;
}

thanks!

Hi
I have a problem where my design does not look the same in 2 browsers for MACS. Netscape 7 MAC OSX 10.3 and Opera 6 MAC OSX 10.3.

If you take a look at http://dmumford.bizhat.com/calibre/ you will see what it is supposed to look like.

The links below are the MAC screenshots taken from browser cam
http://www.bullsigns.com/netscape7-mac-osx-10.3.jpg
http://www.bullsigns.com/opera6-mac-osx-10.3.jpg

If anyone could help, i would be eternally grateful, as I have never needed to worry about MACS before.

Thank you

Hello,

I am creating the base design of a web site that consists in two
horizontal bars: Navigation and Intro.

"Navigation" will contain the menu.

"Intro" will contain two items: a logo (image) on the left and a
banner (flash) on the right.

In this moment I have the following:
http://www.27lamps.com/Beta/Bar/Bar.html

I am not sure if using a background image is the best way to do
this ...
... it seems to me that since the two bars are two different sections
then I should use two divs.

So the questions I have:

1. Should I use two divs, one for each bar, and setting the line-
height in em instead of using the background image?
2. How to place side by side the logo and the banner and centered them
vertically?
3. I would like the Navigation and the Intro bars to have a minimum
height.

Thanks,
Miguel

I'm doing a layout with div's and I want to have my navigation a pixel size, but my content area a percentage. (and have them beside each other)

Here's what I've tried, but the 'main' div goes 100% of the window instead of 100% of the space between the left side and the 'nav' div. Is what I'm trying to do possible with div's?

HTML:
<div id="main">
stuff
</div>

<div id="nav">
navigation
</div>

CSS:
#main {
float: left;
width: 100%;
background: #efe;
}

#nav {
float: left;
width: 200px;
margin-left: 4px;
background: #999;
}

Attached is my html page and my css file. The css is a template i got off ssi-developer. I'm changing it around a bit to fit my needs. The way I have the page now is fine I'm just curious to know if I can do this one thing. What I'm wondering is if I have to make different classes for the multiple rows that I have. Is there a way I can make the same layout without making all the rows. Once you see my files you will get a better understading of what I'm trying to accomplish.

The site I'm working on is located at the following address:

http://www.solinari.net/div.php

On the left, the navigation is in two pieces - a left and a right piece. I need to have both pieces extend to the bottom of however long the page is. The bottom div's of both pieces of the navigation each have an image repeating vertically, my question is how to get the div to extend to the bottom of the page. Any help would be greatly appreciated.

Regards, Solinari

I'm working on converting a website from tables to div's and running into one little issue. The site is a basic header on top, navigation on left, content on right and a footer on the bottom.

I would like the navigation div to grow in height to match the height of the content div so that the background fills the left side of the page. I have placed the nav and content divs in a container div and set a min-height on the container. I was hoping that that would let me place height: 100% on the navigation div but it isn't growing ever. Is there a way to get something like this done?

FYI, the site is currently at http://users.adelphia.net/~mmorasch/

I am working on a site for a class assignment and got it too look how I wanted in firefox 3 but then when I tested it in Explorer it is a completely different monster! I know that explorer is backwards but could someone shed some light on my code for me and get me going down the right path...

http://jjs5327.aisites.com/IMD311/index.html

Code:

@charset "UTF-8"; 
/* CSS Document */  
body { 	
background-color:#FFFFFF; 	
text-align:center; 	
font-family:Arial, Helvetica, sans-serif; 	
font-size:12px; 	color:#000000; 	
} 	 

#site { 	
width:775px; 	
height:500px; 	
margin:25px auto 0 auto; 	border:none; 	
} 	 
#container {     
width:775px;      
height:500px;      
margin:0 auto 0 auto;      
border:1px solid #99CCCC;  	
} 	 
#header, img { 	
margin-top:10px; 	
border:none; 	
cursor: default; 	
} 	 
#left { 	
width:210px; 	
height:208px; 	
margin-top:80px; 	
margin-left:20px; 	
border-top:1px solid #99CCCC; 	
border-right:1px solid #99CCCC; 	
border-left:1px solid #99CCCC; 	
float:left; 	
clear: both;  	
}	 	 
#menubar, #menubar p { 	
background-color:#FFFFFF; 	
text-align:left; 	
margin:auto; 	
} 	 
#menubar a { 	
display:block; 	
font-family:Arial, Helvetica, sans-serif; 	
font-size:12px; 	color:#FF9933; 	
text-decoration:none; 	
padding: 7.1px 0px 7.21px 10px; 	
border-bottom:1px solid #99CCCC; 	
cursor:default; 	
} 	 
#menubar a.active { 
color:#99CCCC; 	
} 	 	 
#menubar p:hover a, #menubar a:focus, #menubar a:active { 	color: #FFFFFF; 
background-color: #99CCCC; 	
} 	 
#right { 	
width:520px; 	
height:390px; 	
margin:15px 40px 15px 255px;  	
border-top:1px solid #99CCCC; 	
border-left:1px solid #99CCCC; 	
} 	 
#headline { 	
font-family:Arial, Helvetica, sans-serif; 	
color:#000000; 	
font-size:14px; 	
text-align:center; 	
margin-top:60px; 	
} 	 
#content { 	
font-family:Arial, Helvetica, sans-serif; 	
font-size:12px; 	
text-align:left; 	
width:380px; 	
margin:10px 60px 10px 60px; 	
padding:5px; 	
line-height:20px; 	
} 	 
#sumheadline { 	
font-family:Arial, Helvetica, sans-serif; 	
color:#000000; 	font-size:14px; 	
font-style:italic; 	
text-align:left; 	
margin:60px 0 0 90px; 	
} 	 
#sumcontent ul{ 	
font-family:Arial, Helvetica, sans-serif; 	
font-size:12px; 	
list-style:disc; 	
text-align:left; 	
width:250px; 	
padding:10px; 	
margin-left:150px; 	
line-height:20px; 	
} 	 
#techcontent { 	
font-family:Arial, Helvetica, sans-serif; 	
font-size:12px; 
text-align:left; 	
width:380px; 	
margin:60px 60px 10px 60px; 	
line-height:20px; 	
} 	
 .tech2 { 	
font-family:Arial, Helvetica, sans-serif; 	
font-size:14px; 	
color:#FF9933; 	
font-style:italic; 	
} 	 
#expcontent { 	
font-family:Arial, Helvetica, sans-serif; 	
font-size:12px; 	
text-align:left; 	
width:460px; 	
height:330px; 	
margin:59px 30px 10px 30px; 	
line-height:20px; 	
overflow: auto; 	
}  	
 .exp2left { 	
font-family:Arial, Helvetica, sans-serif; 	
font-size:14px; 	
color:#FF9933; 	
font-style:italic; 	
} 	 
#gencontent { 	
font-family:Arial, Helvetica, sans-serif; 	
font-size:12px; 	
text-align:left; 	
width:490px; 	
height:385px; 	
margin:15px 10px 10px 15px; 	
line-height:22px; 	
} 	 
.deshead { 	
font-family:Arial, Helvetica, sans-serif; 	
font-size:14px; 	
color:#FF9933; 
font-style:italic; 	
margin-left:115px; 	
padding-top:10px; 	
} 	 
.description { 	
width:350px; 	
margin-left:115px; 	
} 	 
#example { 	
overflow-y:scroll; 	
overflow-x:hidden; 	
height:389px; 	
width:519px; 	
} 	 
#example1 img, #example2 img, #example3 img, #example4 img { 	float:left; 	
} 	 
#example1 { 	
width:505px; 	
height:100px; 	
margin:10px 0px 0 10px; 	
text-align:left; 	
} 	 
#example2 { 	
width:505px; 	
height:100px; 	
margin:10px 0px 0 10px; 	
text-align:left; 	
} 	 
#example3 { 	
width:505px; 	
height:100px; 	
margin:10px 0px 0 10px; 	
text-align:left; 	
} 	 
#example4 { 	
width:505px; 	
height:100px; 	
margin:10px 0px 0 10px; 	
text-align:left; 	
}  	 
#content li { 	
padding:5px; 	
} 	 
#footer { 	
color:#999999; 
font-family:Arial, Helvetica, sans-serif; 	
font-size:10px; 	
text-align:right; 	
width:775px; 	
height:20px; 	
margin-top:5px; 	
}

Need help with layout, picture attached. I need the footer's end to be at the level of the sidebars end unless content is too long and in that case it would expand in height. In other words there has to be a min height for content so footer wont go any higher than in the picture, but will go down if content expands.

Any tips on how this needs to be done?

I'm using a similar template to the one located he

http://www.linux.co.uk

In Internet Explorer you'll notice a space to the right of the "sponsored links" text in the right hand portlets area. Also a space at the bottom of this same porlet on the left hand side.

It seems to be aggravated at different font sizes.

These spaces don't show up on Mozilla, it works perfectly.

Any ideas for fixing this behaviour?

Thanks..

-j.

tiny pic .com/nqb f9i.png
Hey, I'm super sorry for the url but that's the ONLY way you guys will know what I'm talking about.


Obviously I'll be doing the more advanced graphics later.

Please answer the following questions:

I would like the white and the yellow to go on for the rest of the page (no matter how big your monitor is). How would I do this?

I also want the green and the dark blue to stretch if I were typing more and more. (I know I would have to save the bottom of the sections of those images and the middle if I were to do this.)

And I need this to be completely centered on the webpage.

Overall, I can handle the rest.
So what attributes/properties do I have to study to get this to work?

If you're feeling super nice you can code it for me. ;D

I'm trying to figure out if the following layout is possible using css such that it will appear correctly in all "major" browsers:

lab.wx3.com/cssprob/layout_challenge.png
(sorry, I'm a new user so I can't post the http part)

The center column should be fixed width, 100% of browser in height. Values marked as "fixed" would have a defined pixel size. Values marked as "fluid" would fill available space.

I know this layout can be done with tables, but I'm at a loss to figure out how it can be done in css.