CSS - Layout Messes Up...

problems with positions divs and images within them ...

when I have a positioned div, and I insert an image, or another div with image inside, it makes the div too high, and not sure how to get it straight.

Code:

	?>
           			<div id="cmp" style="position: absolute; left: <?=$cmp_left*$x_scale+$offx+$leftcolwidth+$xspace  ?>px; top: <?=(($startrow*$y_scale)+($cmp_y)*$y_scale)-$offy ?>px; width: <?=($cmp_right-$cmp_left)*$x_scale+$leftcolwidth+$xspace ?>; height: <?=$y_scale+1 ?>; background-color: <? if( $cmp_row[ $j ] != null ) echo $cmp_row[ $j ]->type->getcolour( -1, $connect );  ?>; border: solid black 1px; z-index:<?=$i ?> " >
           				<div style="position: absolute; left: <?=$cmp_left*$x_scale+$offx+$leftcolwidth+$xspace  ?>px;  width: <?=($cmp_right-$cmp_left)*$x_scale+$leftcolwidth+$xspace-20 ?>; height: <?=$y_scale ?>;" align="left" width="20px" height="<?=$y_scale ?>px">
           					<? if( $cmp_row[ $j ] != null ) echo substr( rtrim( $cmp_row[ $j ]->getName() ), 0, $maxchars  ); ?>
           				</div>
           				<div style="position: absolute; left: <?=$cmp_right*$x_scale+$offx+$leftcolwidth-20  ?>px; width: <?=20 ?>; height: <?=$y_scale ?>; align: right" >
           					<img  src="images/<?=$icon ?>" alt=<?=$alt ?> border="0" <?=$mousey ?>>
           				</div>	
           			</div>
           		
           		<?

the code above has got a bit messy with trying to fix the problem...


Cheers
Adam

Hi guys,

This is another standard "why won't it work in IE"-post. I'm making a multi-column news-style site (<spam>first link in my signature</spam>), and IE screws up the widths. The layout is basically three .col's which are floated left, and a #menu on the right.

Here's the relevant css:

Code:

#menu
{
    float: left;
    margin-left: 0%;
    width: 20%;
    line-height: 120%;
    padding: 2%;
    font-size: larger;
}

.col
{
    float: left;
    width: 24%;
    font-size: 0.8em;
}

.col ul{ 
    list-style-type: none; 
    padding-left: 0;
}


.col .story{
    background: #F5F8ED;
    padding: 0 ;
    margin: 1%;
    border: 1px solid #71804D;
    color: #333;
    text-align: justify;
    
}

Here's some example html:

Code:

<div class="col">
    <ul>
		<li class="story">
            <p class="story_title"> story title </p>
            <div class="story_body">
                <p>blah blah</p>
            </div>
            <div class="sub">
				<p>stuff</p>
			</div>
        </li>
	</ul>
</div>
<div class="col">
    <ul>
		<li class="story">
            <p class="story_title"> story title </p>
            <div class="story_body">
                <p>blah blah</p>
            </div>
            <div class="sub">
				<p>stuff</p>
			</div>
        </li>
	</ul>
</div>
<div class="col">
    <ul>
		<li class="story">
            <p class="story_title"> story title </p>
            <div class="story_body">
                <p>blah blah</p>
            </div>
            <div class="sub">
				<p>stuff</p>
			</div>
        </li>
	</ul>
</div>

<div id="menu">
    <div id="menu_title">
        <h1> title </h1>
    </div>

    <ul id="navbox">
        <li> ... </li>
    </ul>

    ... etc

</div>        

The problem is that IE renders the .col's very narrowly, and has some major space vertically between them. This means that #menu gets pushed down below the .col's. Can anyone point me in the right direction to fix this width issue?

Thanks,
Simon

Hi

I recently moved a site "http://www.nikkilamann.com/index.php" and after moving it the CSS is all messed up (style.css)
The scroll frame box is not centred anymore and the scrollbar is supposed to be white in colour and there is some funny box next to "fashion" on navigation. Site is totally messed up after move.

Does anybody know what could cause this?

As per suggestion, I have created a new thread in this forum.
This is a follow on from my thread in the Javascript forum

I have created a table which displays exactly how I want it to.
It displays correctly in IE8, FF3.6, Opera & Chrome.
What I've done is created some Javascript to remove the last column of the table.
When this happens FF and Chrome (untested in Opera) redraws the table with the right edge column of the right-most column as I would hope it would - with the right edge style of the table as it was before the column was removed - in this instance, a solid black border.
IE does not redraw the right border like this - it retains the internal column border, in this instance, a grey dashed cell border.
I was wondering if there was a way to make IE behave?

A demo is available at geostatsireland and it is a .com - the page name is mytable.html

Take a look <link removed... no longer valid>

If you have I.E. and Firefox available... notice the differences... Take a look at the source... I.E. appears to display this "more correctly"... it's certainly more visually appealling. I want the border to go all the way around the calendar in FF (it already does in I.E.), and in FF the first week is messed up (probably has something to do with no information within the divs, but why does it do that?

Bryan

<edit>I'd also like to fix the gap on the right side between the days and the calendar border, but just making it 15% for the last one doesn't work.</edit>

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?

heyya,

I'm doing a quick layout, and I'm running into some problems with my floating menu.
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>
	<style type="text/css">
		body {
			margin:0;
			padding:0;
			background-color:white;
			font:normal 1em/150% Verdana,Arial,sans-serif;
		}
		#container {
			width:750px;
			padding:0;
			margin:0;
			background:#FAA;
		}
		#contents {
			width:566px;
			margin:10px 0 0 162px;
			border:1px solid #999;
			border-bottom:none;
			padding:10px;
			background:#FFF;
		}
		#contents p {font-size:80%;line-height:150%;}
		#menu {
			width:160px;
			background:#FFA;
			margin:0;
			padding:0;
			float:left;
		}
		img {border:none}
	</style>
 </head>

 <body>
	<div id="container">
		
			<div id="menu">
				<p>Wisi te quis lobortis dolor vel hendrerit consequat ex. Nulla hendrerit ad et. Praesent adipiscing nostrud dolore, feugait velit dolore dignissim. Aliquam blandit consequat ex blandit praesent hendrerit. Commodo in nonummy suscipit facilisi lorem ullamcorper dolore vulputate ea, ullamcorper eum duis delenit. Iriure nostrud qui, vulputate ut aliquip at, amet ut, erat, consequat autem. Facilisis sit lorem te illum suscipit zzril. Dignissim illum, duis accumsan. Et, duis enim euismod wisi commodo elit amet. Hendrerit nulla luptatum dolore tincidunt nulla nulla minim velit feugait accumsan, dolore minim, feugait nonummy, elit vero erat.</p>
			</div>
			<div id="contents">
				<a href="#"><img src="bedroom-furniture.jpg" width="566" height="250" border="0" alt="" /></a>

				<h3>Welcome to mook</h3>

				<p>Wisi te quis lobortis dolor vel hendrerit consequat ex. Nulla hendrerit ad et. Praesent adipiscing nostrud dolore, feugait velit dolore dignissim. Aliquam blandit consequat ex blandit praesent hendrerit. Commodo in nonummy suscipit facilisi lorem ullamcorper dolore vulputate ea, ullamcorper eum duis delenit.</p>

				<p>Facilisis sit lorem te illum suscipit zzril. Dignissim illum, duis accumsan. Et, duis enim euismod wisi commodo elit amet. Hendrerit nulla luptatum dolore tincidunt nulla nulla minim velit feugait accumsan, dolore minim, feugait nonummy, elit vero erat.</p>
			</div>

	</div>
 </body>

</html>

readers digest version: I have a 750px container. My content div is 566, plus 2px for the border, plus 20px for the padding. Giving it a margin-left of 162px gives us a grand total of 750. IE seems to hate the padding - when i modify that it works fine - even changing the margin doesn't do anything. and there's an extra 2px between the menu and the contents just in case.

So I can't figure why it's bumping down in IE. and i'm using v6, and have the doctype declared, so it shouldn't be in quirks mode.

TIA,

Greg

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!

Hello,

I want need to do the following:

div_01

div_02 div_03 div_04

div_05

Do I need to place div_02, div_03 and div_04 inside a div container?

Thanks,
Miguel

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.

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.

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

The page is http://cannons.dsl.xmission.com/index.html I am having problems making the footer go to the bottom what do I need to change to make it work?

Thanks