CSS - 2 Column Float Layout Percentage Help

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.

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!

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}

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

I am working on a simple css design for my site. It has a header, footer, and I am trying to divide the content into two columns.

the attempt is he

http://www.jimpix.co.uk/rejig/008.htm

I have the two content columns defined as:

#leftcol {
width:70%;
float:left;
border:1px solid black;
}

#rightcol {
width:25%;
float:right;
border:1px solid black;
}

The above divs sit within a main 'content' div:

#content {
padding:10px;
border-top:2px solid #999999;
border-bottom:10px solid black;
}

But when I view the site in either IE6 or Firefox, the rightcol and leftcol divs do not sit within the content div, or at least, they don't appear to on the screen. Instead of the 'content' div expanding to contain the leftcol and rightcol divs, it just sits at the top, hence why there is a big black line at the top, instead of at the bottom, underneath the columns.

Can anyone see what I am doing wrong please?

Thanks

Jim

Hi all, I'm currently working on converting a table based site to a CSS table less one. I have a fairly good understanding of CSS, but have come across a problem and would like some help in sorting it out if possible.
The code I am pasting here is a quick mock up of what I am trying to acheive. It is a 2 column page, with a header and footer. When I run this code in IE 6, it seems to work as I think it should. When I run it in Opera 9, the maincenter content seems to move to the top of the last float in left column.

I assume that my css code is wrong or my understanding is wrong, or there is some quirk, hack etc that I should be using.

Code:

<!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>  <!--Don't add anything above this line, you may change the DTD to match your page-->  
<title>Test Page</title>  
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />  
<link href="stylesheet.css" rel="stylesheet" type="text/css" />  
</head>  
<body>  
<div id="container">  	
<div id="header">This is the header</div>  	  		  	
<div id="main">  		
<div id="mainleft">stuff on the left<br />
  			more stuff on the left</div>
<div id="mainleft1">stuff on the left<br />
  			more stuff on the left</div>
<div id="mainleft2">stuff on the left<br />
  			more stuff on the left </div>
<div id="mainleft3">stuff on the left<br />
  			more stuff on the left</div>
<div id="mainleft4">stuff on the left<br />
  			more stuff on the left</div>
<div id="mainleft5">stuff on the left<br />
  			more stuff on the left</div>
<div id="maincenter">stuff on the right<br />
  			    stuff on the right<br />
	                     stuff on the right<br />
   			    stuff on the right<br />
 			    stuff on the right<br /> 
 			    stuff on the right<br />
  			    stuff on the right<br />
  			    stuff on the right<br />
  			    stuff on the right<br />
  			    stuff on the right<br /></div>
<div class="clear"></div>
</div>
<div id="footer">This is the footer</div>
</div>
</body>
</html>

CSS:
Code:

#container {
  	width: 600px;
  	text-align: center;
  	margin: 20px auto 0 auto;  }
#header {  	
        width: 598px;
  	margin: 0px 0px 0px 0px;
 	border: solid 1px;  }
#main {  	
        margin: 20px 0px 0px 0px;
  	border: solid 1px;
  	float: left;
  	width: 598px;
  	overflow: auto;  }
#mainleft {  	
        margin: 5px 5px 5px 5px;
  	float: left;
  	width: 150px;
  	border: solid 1px;
  	display: inline;
  	clear: left;  }
#mainleft1 {  	
        margin: 5px 5px 5px 5px;
  	float: left;
  	width: 150px;
  	border: solid 1px;
  	display: inline;
  	clear: left;  }
#mainleft2 {  	
        margin: 5px 5px 5px 5px;
  	float: left;
  	width: 150px;
  	border: solid 1px;
  	display: inline;
  	clear: left;  }
#mainleft3 {  	
        margin: 5px 5px 5px 5px;
  	float: left;
  	width: 150px;
  	border: solid 1px;
  	display: inline;
  	clear: left;  }
#mainleft4 {  	
        margin: 5px 5px 5px 5px;
  	float: left;
  	width: 150px;
  	border: solid 1px;
  	display: inline;
  	clear: left;  }
#mainleft5 {  	
        margin: 5px 5px 5px 5px;
  	float: left;
  	width: 150px;
  	border: solid 1px;
  	display: inline;
  	clear: left;  }
#maincenter {  	
        float: left;
  	display: inline;
  	margin: 5px 5px 5px 5px;
  	border: solid 1px;
 	width: 424px;  }
.clear {  	clear: both;  }
#footer {  	
        margin: 20px 0px 0px 0px;
  	border: solid 1px;
  	width: 598px;  }

Some notes:
1. Originally I had the left hand stuff in a div called mainleft, but had trouble getting that to work. Would that be correct, to include all the code in one div, with smaller divs inside it?
2. The little boxes on the left will be different boxes on the page, but for the mockup they are all the same, with different ids.
3. After looking around, I found out about the overflow: auto; for inside the main div, which fixed a nice problem I was having (main not having any content bar floats).

Is IE 6 displaying the code right, or is Opera 9?



--> I just had a bit of play around before posting and if I add a div around all the mainlefts, the code seems to work in both IE 6 and Opera. So whould that be best, to stick with that? I think adding in the overflow:auto; fixed the problem I was having with that earlier. Would still apreciate any comments

Many thanks
Scott

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

I have a page that has a header, footer, left content box, and right sidebar.

I'm using a negative margin on the content container to get the right sidebar to fill the space so I can keep a sensible order within the html code. The right sidebar isn't taking up the negative margin space like it should. It floats right but takes up residence under the content box.

It works without negative margins if I put the right sidebar first in the order (before the content) but I shouldn't have to do that. It also works using absolute positioning on the right sidebar but this is going to be a problem for pages that will have content that takes up less space than the sidebar (because of the footer).

I have uploaded the page on one of my servers:test page page so you can see it in action.

Here's the CSS/HTML code:
Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"><head><title>test</title>

<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1"> 

<style media="screen">
body {
margin: 0;
padding: 0;
text-align: center;
}

div#pageframe {
border: solid 1px black;
margin: 0px auto 0px auto;
width: 741px; /* total pagewidth */
}

div#headerbox {
border: solid 1px gray;
width: 741px; 
height: 95px;
}

div#whiteboxes {
border: solid 1px red;
width: 741px;
float: left;
margin-right: -210px;
}

#middlecontent {
border: solid 1px purple;
margin-right: 210px;  
text-align: left;
}

div#rightside {
border: solid 1px yellow;
width: 185px;
float: right;
}

div#footer {
border: solid 1px olive;
float: none;
width:741px;
height:55px;
clear: both;
}

</style></head>

<body>
<div id="pageframe">

  <div id="headerbox">
  <h1>This is the Header.</h1>
  </div>

<div id="whiteboxes">
  <div id="middlecontent">
  <h1>middle content</h1>
  <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Phasellus varius
eleifend tellus. Suspendisse potenti. Class aptent taciti sociosqu ad
litora torquent per conubia nostra, per inceptos hymenaeos. Nulla
facilisi. Sed wisi lectus, placerat nec, mollis quis, posuere eget,
arcu. Donec euismod. Praesent mauris mi, adipiscing non, mollis eget,
adipiscing ac, erat. Integer nonummy mauris sit amet metus. In
adipiscing, ligula ultrices dictum vehicula, eros turpis lacinia
libero, sed aliquet urna diam sed tellus. Etiam semper sapien eget
metus.</p>
	<p>Vestibulum ante ipsum primis in faucibus orci luctus et
ultrices posuere cubilia Curae; Lorem ipsum dolor sit amet,
consectetuer adipiscing elit. Vivamus imperdiet mattis risus. In hac
habitasse platea dictumst. Curabitur aliquam rhoncus nunc. Suspendisse
sit amet purus in wisi egestas placerat. Nunc varius suscipit magna.
Fusce commodo dolor vel felis. Nunc auctor elit vitae justo. Donec
lorem. Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
Vivamus diam wisi, tincidunt et, sollicitudin a, ultricies quis, est.
Sed ut velit.</p>
	<p>Aliquam sit amet mi. Pellentesque imperdiet
metus vitae wisi hendrerit imperdiet. Donec molestie tortor quis odio
rutrum mattis. Donec nec sem. Proin tempus tempor risus. Suspendisse
odio. Donec id mi. Maecenas est orci, porttitor eget, vehicula at,
rhoncus a, magna. Duis eu tellus. Donec blandit, orci quis commodo
tincidunt, mi leo tempor enim, in hendrerit eros lacus blandit urna.
Donec sed mi nec dui varius fringilla.</p>
	<p>Quisque pretium, augue
non blandit ultrices, ipsum augue varius velit, a adipiscing nulla nunc
consectetuer diam. Maecenas eu ante non dui euismod euismod. Proin est
tortor, bibendum in, imperdiet quis, porta vel, purus. Quisque
tincidunt tincidunt elit. Suspendisse a mi. Nam faucibus. Aliquam
imperdiet pulvinar turpis. Vivamus sit amet elit a leo tincidunt
varius. Cras et orci. Aenean non velit vitae risus posuere iaculis.
Quisque porta nibh sed massa. Aliquam non ante. Proin semper ipsum nec
enim. Maecenas vestibulum nisl non magna. Aenean auctor. Nulla
tincidunt augue ac quam. Etiam ultricies purus et metus. Aliquam tempus
dignissim felis.</p>
	<p>Curabitur euismod odio. Suspendisse potenti.
Aliquam est augue, feugiat non, sodales nec, aliquet et, massa. Nulla
eu tellus sed mi mollis aliquam. Fusce sed sem. Etiam tempus augue non
nulla. Nunc pede ligula, fringilla in, lobortis et, dictum a, est. Sed
accumsan, nisl vel suscipit scelerisque, arcu turpis dictum augue, ut
sagittis metus pede non felis. Donec mollis ipsum eu sapien. Sed eget
nisl. Nunc sem eros, dapibus consectetuer, molestie non, elementum sit
amet, felis. Donec eu diam eu nibh tincidunt malesuada. Mauris
fringilla volutpat odio.</p>
  </div><!-- end middlecontent -->


  <div id="rightside">
  <h1>right frame</h1>
  <p>Lorem ipsum dolor sit amet,
consectetuer adipiscing elit. Phasellus varius eleifend tellus.
Suspendisse potenti. Class aptent taciti sociosqu ad litora torquent
per conubia nostra, per inceptos hymenaeos. Nulla facilisi. Sed wisi
lectus, placerat nec, mollis quis, posuere eget, arcu. Donec euismod.
Praesent mauris mi, adipiscing non, mollis eget, adipiscing ac, erat.
Integer nonummy mauris sit amet metus. In adipiscing, ligula ultrices
dictum vehicula, eros turpis lacinia libero, sed aliquet urna diam sed
tellus. Etiam semper sapien eget metus.</p>
  </div>

</div><!-- end whiteboxes -->
  
  <div id="footer">
  <p>FOOTER<br />Lorem ipsum dolor sit amet, consectetuer
adipiscing elit. Phasellus varius eleifend tellus. Suspendisse potenti.</p>
  </div>

</div><!-- end pageFrame -->

</body></html>

Any help is greatly appreciated.

Greetings,

Basic Layout is:
Page-Containter
-> Header-Container
-> Side-Container
-> Content-Container
-> Footer-Container

Header is normal

Side is a Float Left with a width of 250

Content has a left margin of 260 (to allow for the Side-Container)

Footer is normal.

Pretty basic.

In the content area there are more divisions to handle different sections of data.

The problem is that in some of the content sections, I need to have dynamically allocated "blocks" of data that form psuedo "columns". I do this by doing a float:left on each of the content blocks. (generally a 250px width)

That way if I show 1 or 5, they all snug up next to each other and wrap properly in the browser. Still pretty basic.

Until ... drum roll please ... the next section.

Since the content is "float:left", it's removed from the layout and the following sections will just "snug up" next to the last content block.

I want the section to "clear" the previous content division, but don't really have a clean way to declare the "height" of that division, due to the dynamic nature of the data.

Silly Rabbit ... just do a clear:left !!

In IE it works fine.

In Firefox, the clear:left command is clearing the previous container! (side-container ... aka: left nav bar)

First question: Which browser is right? is IE right and the clear:left should be contained to it's own division? or is firefox right and the clear:left checks all float:left regardless of division?

Second question: If IE is right, what is the fix ... if Firefox is right, how should I actually structure this?

I have the following: Quote:
<div class="video">
<h1>Header</h1>
<p><a href="#" title="title"><img src="images/01.jpg" alt="alt" width="150" height="150" class="img-left border"/></a></p>
<div class="redBG border" style="margin-left:180px;">
<p><strong>Content</strong></p>
</div>
</div>
<div class="video">
<h1>Header</h1>
<p><a href="#" title="title"><img src="images/01.jpg" alt="alt" width="150" height="150" class="img-left border"/></a></p>
<div class="redBG border" style="margin-left:180px;">
<p><strong>Content</strong></p>
</div>
</div>
Not the nicest of code but it'll do for now.

I want each div with class=video to come under one another but at the moment, the 2nd div starts just after the text in the first div and not actually under it.

This is in the middle column of a 3 column CSS layout. The bottom is what the .video class has. Quote:
.video {
margin-bottom:10px;
}


Any help?

Hi,
Is it possible to make the following
"LEFT MENU" sits on left side and "RIGHT MENU" on right side

without using "float" ?

<div id="menu">
<div>LEFT MENU</div>';
<div>RIGHT MENU</div>
</div>
Thank you.

I am having some trouble using float to align containers on my page. Here is what it looks like.

http://filebox.vt.edu/users/kfalcon...less_broken.JPG

In this image the blue area is the "content" id, the red area is the "rostercontainer" and the cream color is the "profilecontainer". I would like the profilecontainers to appear in two columns instead of one as in this image. The problem is when i add 'float : left' to the profilecontainer or rostercontainer I get the following:

http://filebox.vt.edu/users/kfalcon...scrn_broken.JPG

The two profile containers are now next to each other, but the rostercontainer seems to be missing, and the profilecontainers are not being loaded into the content area.

From the index.php page i am using javascript to load the roster.php page into the content area.
Code:

<div id="main-nav">
    <dl>
        <dt id="roster"><a class="loadinto-content" href="roster.php">Roster</a></dt>
    </dl>
</div>

<div id="content">
    <h2>Main Page</h2>
</div>

The roster.php page looks like this:
PHP Code:
<div class="rostercontainer"> 
<?php
    // Go through all profiles
    while($profile = mysql_fetch_assoc($profiles)) {
?>

<div class="profilecontainer">

          <img src="image3.gif" class="floatLeft" width="150" height="115"
              alt="image 3" />
        <strong><h3 class="profile"><?php echo $profile['name']; ?></h3></strong><br/>
        <?php echo $profile['active']; ?><br/>
        <?php echo $profile['status']; ?><br/>
        <?php echo $profile['ride']; ?><br/>
        <?php echo $profile['major']; ?><br/>
        <?php echo $profile['hometown']; ?><br/>
        <?php echo $profile['info']; ?><br/>
        <div class="editlink">
            <a href="roster_admin.php?idx=<?php echo $profile['id']; ?>">edit</a>
        </div>
</div>

<?php } ?>
</div> 





And here is my css file, ive only included the important parts.
Code:

#page-container {
	width: 760px;
	margin: auto;
}

#content {
	font-family: Tahoma, Arial, Helvetica, Sans-serif;
	background: blue;
	border-top: 1px solid #efefef;
	padding: 25px;
}
div.profilecontainer {
	position: relative;
	width: 325px;
	height:200px;
	margin: 10px;
	padding: 5px;
	background-color: #ffe;
	border: 1px dashed black;
}
div#content div.rostercontainer {
	background-color:red;
	float : left;
}

I am not sure if this is a CSS issue or some problem with the javascript library(HTMLHttpRequest) i am using to load pages into my content area. It is really odd the adding the float to the roster/profile container would cause such a behavior. Any ideas on how i can fix this?

Thanks for any help,
Karl

I'm having trouble with a table layout I'm trying to convert to a float layout

my attempt so far is as follows

Code:

--loop--
lfloat{
float:left
}
boatLeft{
width:100px;
}
#cls# gets replaced with a class that only sets the background for odd and even rows.
	<div class="lfloat boatLeft #cls#" style="border-right:1px solid black;height:150px;">
		<a href="javascript:void(0);" onclick="displayVessel(#rssearch.YSNNUM#);">View Details*<br />
			<img id="thumb#currentrow#" style="border-color:white;width:100px;" src="#getpic.thumbpicname#" alt="#boatname#" />
		</a>
	</div>   
	<div class="#cls#">
		<div class="boatLeft lfloat">
			<strong>Boatname</strong>
		</div>
		<div>
			<strong>#BOATNAME#</strong>
		</div>
		<div class="clear"></div>
		<div class="boatLeft lfloat">
			LOA 
		</div>
		<div>
			#loam#m / #loaft#' #val(loain)#"
		</div>
		<div class="clear"></div>
		<div class="boatLeft lfloat">
			Builder
		</div>
		<div>
			#MFGNAME#
		</div>
		<div class="clear"></div>
		<div class="boatLeft lfloat">
			Naval Architect
		</div>
		<div>
			#hulldsnr#
		</div>
		<div class="clear"></div>
		<div class="boatLeft lfloat">
			Designer
		</div>
		<div>
			#designer#
		</div>
		<div class="clear"></div>
		<div class="boatLeft lfloat">
			Decorator
		</div>
		<div>
			#decorator#
		</div>
		<div class="clear"></div>
		<div class="boatLeft lfloat">
			Stylist
		</div>
		<div>
			#stylist#
		</div>
		<div class="clear"></div>
	</div>
	<div class="clear"></div><!--- clear the float for the outer div --->
-end loop--

in both ie and FF this looks terrible. I'm not sure If I should just be using a table here or if I should be using floats.

Gary you should probably have somehting to say about that...

the attachment show's how its supposed to look. The black boxes represent block level elements, not borders.

Dave

Hi all,

This is my first post here so go easy on me.

Firstly, please look at this:

h ttp://digitalformula.net/temp/layout.jpg - I can't post a proper URL since I'm a new user ... sorry for the space at the start of the address.

Anyway, the top part is what I have now and the bottom part is what I'm trying to get to.

Can someone please assist with the CSS for this? I know just enough CSS to be dangerous but I can't seem to find the right way to put the captions under the images without the image on the right dropping below the image and caption on the left.

I've tried all different types of float etc but nothing seems to work - I know it's something I'm doing wrong as this is probably one of the more basic questions posted here.

ANY help would be much appreciated!

Thanks,
digitalformula

Hello all, first time poster here...

I was working on a new site for an RP environment I gm using a table based layout. I ran into some problems and got fed up with it, So now for all the great reasons out there I decided to better learn CSS overnight and make the layout based on div tags and all that good stuff instead.

After piling all my information into the page I've been having some funky stuff happen to the layout; the right most column moves down below the other two if the window takes up less than the 1000px width I've allotted. Does anyone know why and a way to fix this? Please feel free to rip on my usage of png-s or anything else you'd like to also

Here's a temp link to the page on my site: louisjustmanDOTcom/prinz/newMOTD.html

...and a direct to my css file too: louisjustmanDOTcom/prinz/css/master.css

Thanks a lot in advance!

EDIT: Wow; all that time and it was a stupid mistake... extra closing div tag where i didn't need one.