Learn VBA & Macros in 1 Week!

CSS - Stacking Divs Columns

Full Excel VBA Course - Beginner to Expert

Stacking Divs Columns	View Content

Im having a few issues with the layout of a clients website. I have a three column grid and what I want to do is switch between different column combos, stacked down the page. The problem I have is that the far right column always creeps up to the bottom of the div above it. I've tried heaps of round-about methods but nothings working. I must be missing something painfully obvious.

I cant figure out how to post images because I'm a newer user, so try follow these links to get a better understanding:

Heres the Current layout:
w w w. timdonaldson . com/random/as_is.jpg
And Here is the grid I want:
w w w. timdonaldson . com/random/if_only.jpg

I hope there is a simple solution to this. Thanks in advance for any help.

Full Excel VBA Course - Beginner to Expert

Similar Tutorials

Ie Stacking Divs Instead Of Layering. Also Width Issues

Need Help With Div Stacking

Stacking Ul's ... Fine In Ie6 & Ff2/3

Issue With Stacking Order In Ie.

Image Stacking Problem Ie

How To Stop 2 Adjacent Elements From Stacking

Div Stacking Problem On Internet Explorer

3 Columns, Header, Body, Footer Div Layout - Outer Columns Height Stretch Problem

Having Issues Getting Divs To Stretch Content And/or Container Divs

Centering Divs Inside Other Divs In Firefox?

Divs Inside Floated Divs Makes Ie6 Something Something.

Divs In Divs (container Size)

Divs Appearing Outside Of Containing Divs? Why?

Doing 2 Columns

Can't Even Get Two Columns Right...

2 Columns With Another 1 Below

Css - From 2 To 3 Columns

Three Columns Right For This Job?

Learn VBA & Macros for Excel in 1 Week!

Ie Stacking Divs Instead Of Layering. Also Width Issues

Similar Tutorials

Good day! I have exhausted all of the people I could ask regarding this so I'm hoping I may get help here. This is the first website I've made and it's causing a lot of problems.

http:// www . sycwin . com / index2 . html

My issue is that my website is browser compatible with everything BUT IE. My problem is getting it to look the same on IE as it currently looks now on Firefox. I understand that there are java script solutions for div stacking problems, but for some reason those are causing no effects

problems:
1. subinfo not positioning over mainwrapper and is instead STACKING on top of mainwrapper on IE
2. introduction not in position to the right of carousel/slideshow on IE
3. paints and wires divs are messed up in width, padding and margin on IE

here's the css:
Code:

body {
color:#333333;
background-color: #f5f5ef;
background-image:url(images/bg.jpg);
background-repeat:repeat;
font-family:Arial, Helvetica, sans-serif;
line-height: 18px;
font-size:11px;
padding:0px;
margin:0px;
}

emphasis {
background-color:#e7d018;
}
strong {
color:#2b6934;
}

a:active, a:link, a:hover, a:visited {
border:none;
text-decoration:none;
}

img {
border:none;
}

/*MAIN SEGMENTS*/
#mainwrapper{
width:1000px;
margin:0 auto;
margin-top:-20px;
margin-bottom:-50px;
z-index:900;
overflow:hidden;
}
#contentwrapper {
width:1000px;
margin-bottom:-10px;
}
#header {
background-image:url(images/header.png);
background-repeat:no-repeat;
height:492px;
margin-top:-15px;
width:1000px;
float:none;
}

#footer {
width:1000px;
height:222px;
background-image:url(images/footer.png);
background-repeat:no-repeat;
background-position:bottom;
margin-top:-300px;
padding-top:-300px;
margin:0 auto;
}

/*SUBINFO*/
#subinfo {
width:220px;
position:relative;
top:0px;
right:35px;
float:right;
z-index:1000;
}
#blurb {
width:220px;
height:165px;
color:#FFFFFF;
background-image:url(images/blurb_01.png);
background-repeat:no-repeat;
text-align:center;
padding-top:380px;
padding-bottom:64px;
font-size:11px;
}
.call {
font-size:22px;
padding-top:20px;
font-weight:bold;
line-height:20px;
}
#contact {
width:220px;
background-image:url(images/blurb_02.png);
background-repeat:no-repeat;
font-size:14px;
line-height:20px;
text-align:center;
padding-top:5px;
}
#blurb strong {
color:#FFFFFF;
}
.blurbheader {
font-size:20px;
font-weight:bold;
}
.blurbsubtext {
font-size:14px;
font-weight:bold;
}
#credits {
text-align: center;
font-size:9px;
line-height:14px;
padding-top:80px;
}
/*CONTENT*/
#content {
width:700px;
background-image: url(content-bg.png);
background-repeat:repeat-y;
padding-right:250px;
margin-top:-240px;
padding-left:44px;
}

#slideshow {
width:460px;
padding-left:10px;
height:360px;
float:left;
padding-bottom:20px;
overflow:hidden;
}
#write-up {
width:210px;
height:360px;
padding:8px 0 20px 10px;
margin-left:470px;
}
#products {
width:680px;
padding-right:10px;
margin: 0 auto;
margin-top:20px;
}

#products td {
width:160px;
padding-bottom:5px;
text-align:center;
}
#products-wires {
width:660px;
margin: 0 auto;
margin-top:20px;
}
#products-wires td {
width:220px;
text-align:center;
}
.product-header {
font-family:Gotham, Helvetica, Arial, sans-serif;
text-align:left;
font-size:25px;
font-weight:bold;
text-transform:uppercase;
letter-spacing:-2px;
line-height:14px;
}
#introduction {
width:680px;
font-size:11px;
line-height: 18px;
text-align:left;
overflow:hidden;
}
#paints{
margin-right:18px;
width:290px;
padding:20px;
background-image:url(images/introduction.png);
background-repeat:no-repeat;
height:195px;
float:left;
margin-bottom:20px;
}
#wires {
margin-left: 348px;
width:290px;
padding:20px;
margin-right:10px;
background-image:url(images/introduction.png);
background-repeat:no-repeat;
height:195px;
margin-bottom:20px;
}
.product-brand {
background-color:#314842;
color:#FFFFFF;
font-family:Gotham, Helvetica, Arial, sans-serif;
font-weight:bold;
text-transform:uppercase;
text-align:left;
letter-spacing:2px;
font-size:12px;
padding-left:5px;
}

/*ROLLOVER*/
#preview{
position:absolute;
border:1px solid #ccc;
background:#333;
padding:5px;
display:none;
color:#fff;
text-align:center;
z-index:3;
}

#preview img{
width:300px;
height:300px;
} 
/*CAROUSEL*/
#carousel ul {
	list-style: none;
	width:3600px;
	margin: 0;
	padding: 0;
	position:relative;
	padding-left:10px;
height:350px;
float:left;
padding-bottom:20px;
}
#carousel li {
	display:inline;
	float:left;
}
#carousel {
overflow:hidden;

I hope you guys could help me figure this one out. I'm absolutely clueless. Thank you for taking the time to read this.

Need Help With Div Stacking

Similar Tutorials

Ok so I having been fooling around with this since last night and it all looks pretty good in all the browsers except for a couple nicks here and there, even with IE6...

Here are the links to my site so that you guys can get and idea of what I am taking about:
[URL=http://www.devine-decor.com/2] De'Vine Decor /URL]

Alright so I only have 2 bugs, one shows up in Safari and the Other in IE6.

First off in Safari for some weird reason my logo is placed under the navigation links instead of above it and I cant for the sake of me figure out why. I have tested it on a Mac in Firefox, Camino, Opera and it shows up fine. It even shows up fine in IE6 and 7...

Weird...

Alright so bug number 2 shows up in IE. When the page loads in IE it shows up fine but for some reason the links are not active. I can figure out why this happens. It is really really weir...

Anyways if you guys could help it would be great.

Here is the html for the page:
Code:

<div id="container">

	<div id="shadow">
	
	<div id="shadow_2">
		
	<div id="wrapper">
	
		<div id="wrapper_navbar" style="margin-bottom: 0px;">
		
			<div id="logo"><img src="imgs/logo_left_part.png" height="138" alt="" border="0" /></div>

			<div id="navbar_content">
			
				<div id="nav_btns_bg"><img src="imgs/nav_btns/nav_btns.png" width="225" height="360" alt="De'Vine Decor Navigation" border="0" /></div>
			
				<div id="nav_btns">
				
					<div style="margin-top: 0px; z-index: 1;"><a href="#"><img src='imgs/nav_btns/nav_bar_off.png' width='225' height='81' alt='De'Vine Decor - Home' border='0' onmouseover="this.src=this.src.replace(/off\.png/, 'on.').replace(/\.$/, '.png')" onmouseout="this.src=this.src.replace(/on\.png/, 'off.').replace(/\.$/, '.png')"  /></a></div>
			
					<div style="margin-top: -25px; z-index: 1;"><a href="#"><img src='imgs/nav_btns/nav_bar_off.png' width='225' height='81' alt='De'Vine Decor - Home' border='0' onmouseover="this.src='imgs/nav_btns/nav_bar_on.png'" onmouseout="this.src='imgs/nav_btns/nav_bar_off.png'" /></a></div>
			
					<div style="margin-top: -25px; z-index: 2;"><a href="#"><img src='imgs/nav_btns/nav_bar_off.png' width='225' height='81' alt='De'Vine Decor - Home' border='0' onmouseover="this.src='imgs/nav_btns/nav_bar_on.png'" onmouseout="this.src='imgs/nav_btns/nav_bar_off.png'" /></a></div>
			
					<div style="margin-top: -24px; z-index: 3;"><a href="#"><img src='imgs/nav_btns/nav_bar_off.png' width='225' height='81' alt='De'Vine Decor - Home' border='0' onmouseover="this.src='imgs/nav_btns/nav_bar_on.png'" onmouseout="this.src='imgs/nav_btns/nav_bar_off.png'" /></a></div>
		
					<div style="margin-top: -25px; z-index: 4;"><a href="#"><img src='imgs/nav_btns/nav_bar_off.png' width='225' height='81' alt='De'Vine Decor - Home' border='0' onmouseover="this.src='imgs/nav_btns/nav_bar_on.png'" onmouseout="this.src='imgs/nav_btns/nav_bar_off.png'" /></a></div>
			
					<div style="margin-top: -25px; z-index: 5;"><a href="#"><img src='imgs/nav_btns/nav_bar_off.png' width='225' height='81' alt='De'Vine Decor - Home' border='0' onmouseover="this.src='imgs/nav_btns/nav_bar_on.png'" onmouseout="this.src='imgs/nav_btns/nav_bar_off.png'" /></a></div>
					
				</div>	
			
			</div>
			
		</div>
		
		<div id="wrapper_body">
		
			<div id="content_top"><img src="imgs/test_image.png" height="350" width="650" alt="" border="0" /></div>
			
			<div id="quote_bar"><img src="imgs/quote_bar.png" height="350" width="650" alt="" border="0" /></div>
			
			<div id="overlay"><img src="imgs/image_overlay.png" height="350" width="650" alt="" border="0" /></div>
		
			<div id="content_bottom"><a class="txt"><?php echo nl2br($content); ?></a></div>
			
		</div>

	</div>

	</div>

	</div>
	
	<div id="shadow_b"><img src="imgs/shadow_bottom.png" width="1000" height="48" alt="De'Vine Decor" border="0" /></div>
	
</div>

And the css:
Code:

html, body{
	margin: 0px;
	padding: 0px;
	background: #93744d url(imgs/foreground.png) top repeat-x;
	color: #131123;
	font-family: "Lucida Grande", Verdana, Arial, sans-serif;
	font-size: 12px;
	text-align: center;
	}
	


	.txt	{font-family: verdana, sans-serif; color: #663300; font-size: 11px; font-style:normall; font-variant: normal; font-weight: normal; text-decoration: none; line-height:22px; letter-spacing:1px;}

	
	
	/* ------------------------------------------  MAIN DIVs ------------------------------------------ */
	
	
	div#container {
		position: relative;
		width: 100%;
		text-align: center;
		vertical-align: top;
		}
		
	div#shadow {
		position: static;
		width: 1000px;
		height: inherit;
		margin: 0 auto;
		text-align: center;
		background: url(imgs/shadow_bg.png) top repeat-y;
		}
		
	div#shadow_2 {
		position: static;
		width: 1000px;
		height: inherit;
		margin: 0 auto;
		text-align: center;
		background: url(imgs/shadow_bg2.png) bottom no-repeat;
		}
		
	div#wrapper {
		position: static;
		width: 875px;
		height: inherit;
		margin: 0 auto;
		text-align: center;
		background: url(imgs/fleur_de_lys_pattern.png) top repeat;
		}
			
		
	/* ------------------------------------------  LEFT DIVs ------------------------------------------ */
	
	
	div#wrapper_navbar {
		display: table-cell;
		width: 225px;
		height: inherit;
		vertical-align: top;
		margin-left: -650px;
		}
		
	div#logo {
		width: 225px;
		height: 138px;
		}
		
	div#navbar_content {
		display: table-cell;
		width: 225px;
		height: 360px;
		text-align: center;
		vertical-align: bottom;
		}
		
	div#nav_btns {
		margin-top: -360px;
		width: 225px;
		height: 360px;
		}
		
		
	/* ------------------------------------------ BODY DIVs ------------------------------------------ */

		
	div#wrapper_body {	
		display: table-cell;
		width: 650px;
		height: inherit;
		background: #eeeeee;
		vertical-align: top;
		margin: 0 0 0 225px;
		}
		
	div#content_top {
		width: 650px;
		height: 350px;
		}
		
	div#overlay {
		z-index: 50;
		width: 650px;
		height: 350px;
		margin-top: -350px;
		}
		
	div#quote_bar {
		z-index: 40;
		width: 650px;
		height: 350px;
		margin-top: -350px;
		}
		
	div#content_bottom {
		width: 610px;
		padding: 20px;
		height: auto;
		background: #eeeeee url(imgs/text_bg.png) top repeat-x;
		text-align: left;
		}
		
		
	/* ------------------------------------------ BOTTOM DIVs ------------------------------------------ */

	
	div#shadow_b {
		position: static;
		width: 1000px;
		height: 48px;
		margin: 0 auto;
		text-align: center;
		}

Stacking Ul's ... Fine In Ie6 & Ff2/3

Similar Tutorials

The code below works perfect in FF2/FF3 and IE6 ...

In IE7 the first UL is perfect, but the 2nd UL is vertical (not horizontal)

If you have any suggestions on how to improve my CSS that would be appreciated to. Its kind of a mess because I have been pulling my hair out for the last 3 hours trying to get the 2nd UL to render horizontally rather than vertically.

Code:

<title>Untitled Document</title>

<style type="text/css">
	body 
	{
	margin: 0 auto;
	padding: 0 auto;
	}
	#lottoNumbersWrapper
	{
		float: left; 
		width: 700px;
		height: 118px;
		background-image: url(images/structural/lottoNumbersBG2.jpg);
		background-repeat: no-repeat;
		border: 0px solid black;
	}

		.lottoNumbers
		{
			margin: 0;
			margin-right: 20px;
			margin-top: 10px;
			padding: 0;
			border: 0px solid black;
		}
			.lottoNumbers li {
				list-style: none;
				list-style-type: none;
				float: left;
				font-size: 13px;
				height: 40px;
				width: 45px;
				margin-top: 0px;
				margin-right: 0px;
				margin-bottom: 0px;
				margin-left: 0px;
				font-family:Verdana, Arial, Helvetica, sans-serif;
				background-position: center;
				background-repeat: no-repeat;			
				border: 0px solid black;
				cursor: pointer;
			}
				.lottoNumbers li.white
				{
					background-image:url(images/whiteDot.gif);			
				}
				.lottoNumbers li.blue
				{
					background-image:url(images/BlueDot.gif);			
				}
			.lottoNumbers li span {
				display: block;
				margin-top: 12px;
				text-align: center;
				font-size: 16px;
				font-weight: bold;
				color: #000;
			}
</style>
</head>

<body>
            <div id="lottoNumbersWrapper">
              
 
<div style="float: right; border: 0px solid black">
                <ul class="lottoNumbers">
                    <li class="white"><span>14</span></li>
                    <li class="blue"><span>4</span></li>
                    <li class="white"><span>9</span></li>
                    <li class="white"><span>12</span></li>
                    <li class="white"><span>14</span></li>
                    <li class="blue"><span>18</span></li>
                    <li class="white"><span>20</span></li>
                    <li class="white"><span>21</span></li>
                    <li class="blue"><span>26</span></li>
                    <li class="white"><span>33</span></li>
                </ul>
</div>
<br />

<div style="float: right; border: 0px solid black">
                <ul class="lottoNumbers">
                    <li class="white"><span>14</span></li>
                    <li class="blue"><span>4</span></li>
                    <li class="white"><span>9</span></li>
                    <li class="white"><span>12</span></li>
                    <li class="white"><span>14</span></li>
                    <li class="blue"><span>18</span></li>
                    <li class="white"><span>20</span></li>
                    <li class="white"><span>21</span></li>
                    <li class="blue"><span>26</span></li>
                    <li class="white"><span>33</span></li>
                </ul>
</div>            
            </div> <!-- END LOTTO NUMBERS WRAPPER -->
</body>
</html>

Issue With Stacking Order In Ie.

Similar Tutorials

I have an absolutely positioned <div> that is intended to over some content directly below it. This content is contained within a relatively-positioned <div> which seems to be causing it to display in front of the absolutely-positioned <div> regardless of what the z-index is set to.

Here is a simplified example of my problem:
Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Stacking Order Test</title>
</head>

<body>

    <div style="position:relative;">
        &nbsp;
        <div style="position:absolute;background:green;height:55px;top:5px;left:5px;z-index:100;">I should be at the top of the stacking order.</div>
    </div>
    <div>
        <div style="position:relative;background:red;height:300px;">
            If you can read this, I am higher in the stacking order than the green <div>
        </div>
    </div>
    
    

</body>
</html>

The only way that I can get the absolutely-positioned <div> to display at the top of the stacking order as it should is to remove the relative positioning from the other <div>. Unfortunately, for several reasons, this is not an option.

This is only happening in IE6 and 7. Anyone have any any ideas?

Image Stacking Problem Ie

Similar Tutorials

Hey,
I found a script that enlarges a picture when you hover over it. I edited the script a bit to fit my needs. However, the whole script works fine except that in IE there's a stacking problem. The enlarged image is shown below the thumbnail image (when you hover over the thumbnail image).

This is how it looks in IE: http://img122.imageshack.us/img122/6428/errorbm9.jpg
And this is how it should look (chrome):
http://img122.imageshack.us/img122/4663/correctax8.jpg

I tried to set the z-index of the enlarged image to 2 and that of the thumbnail to 1, but that doesn't seem to work.

the css:
Code:

.hoverbox{    /* For the list (ul tag) */
	float: left;
	cursor: default;
	list-style: none;
	width: 80%;
}

.hoverbox a{
	cursor: default;
}

.hoverbox a .preview{   /* hide the enlarged picture by default*/
	display: none;
}

.hoverbox a:hover .preview{   /* the enlarged image settings */
	display: block;
	position: absolute;
	top: 50px;
	left: 50px;
}

.hoverbox img{	/* the default settings for all images */
	background: #fff;
	border-color: #aaa #ccc #ddd #bbb;
	border-style: solid;
	border-width: 1px;
	color: inherit;
	padding: 2px;
	vertical-align: top;
}

.defaultImg{ /* width of the thumbnail  image */
	width: 100px;
	height: 75px;
}

.hoverbox li{
	background: #eee;
	border-color: #ddd #bbb #aaa #ccc;
	border-style: solid;
	border-width: 1px;
	color: inherit;
	display: inline;
	float: left;
	margin: 3px;
	padding: 5px;
	position: relative;
}

.hoverbox .preview{
	border-color: #000;
}

The html for the images
Code:

<ul class="hoverbox"> 
<li> 
	<a href="#"><img src="images/pictures/thumbnails/foto1.jpg" alt="description" class="defaultImg"/><img src="images/pictures/foto1.jpg" alt="description" class="preview" /></a> 
</li> 
<li> 
	<a href="#"><img src="images/pictures/thumbnails/foto2.jpg" alt="description" class="defaultImg" /><img src="images/pictures/foto2.jpg" alt="description" class="preview" /></a> 
</li> 
</ul>

Does anyone have a solution to my problem?

Thanks in advance

How To Stop 2 Adjacent Elements From Stacking

Similar Tutorials

Hi All,

A seemingly simple problem which has me pulling my (already thinning) hair out:

I'm working on a simple page header: a 100px-wide image floated to the left, a 150px wide div filled with text floated to the right.

I need the header to stretch to fit the whole page, which is easy enough: float the image to the left, float the div to the right.

Now, if a user shrinks the browser to, lets say 200px wide, it's forcing the div to stack below the image. I would like for it get closer and closer to the image as the browser is narrowed, until it's sitting just beside it.

I can do this with a min-width on a container div, but of course, that doesn't work on IE--and I'd rather not use the "expression" min-width hack. I could do it with a table, but I'm trying to go table-free if I can.

It seems like something that should be easy as pie, but I'm finding that it's more akin to baking a souffle.

Thanks, all.

rjgfx

Div Stacking Problem On Internet Explorer

Similar Tutorials

I'm completely stumped on this problem. I need part of this html page to have transparency, but then have completely opaque text on top of that. Since anything within a div with transparency automatically inherits that transparency, I decided to fix that by layering an opaque div over the div with transparency.
This works wonderfully in FF3 and Safari. However, IE7 is giving me fits (no surprise here). The divs simply will not layer. I believe that the problem is because z-index is overloaded by IE7, but I can't find a workaround that works for it. Can anyone else? I really appreciate the help!

The complete html is:

<head>
<title>Example</title>
<style type="text/css">
body
{
margin:0px 0px 0px 0px;
background-color:white;
}

.wrapper
{
height:425px;
width:520px;
background-color:cyan;
margin-left:auto;
margin-right:auto;
top:0px;
}

.midbox
{
height:280px;
width:520px;
}

.shaded
{
position:relative;
z-index:0;
height:95px;
width:520px;
background-color:yellow;
filter:alpha(opacity=50); /* for IE */
-moz-opacity:0.5; /* for older browsers */
-khtml-opacity:0.5; /* for older browsers */
opacity:0.5;
}

.unshaded
{
float:left;
position:relative;
z-index:1;
filter:alpha(opacity=100); /* for IE */
-moz-opacity:1.0; /* for older browsers */
-khtml-opacity:1.0; /* for older browsers */
opacity:1.0;
height:95px;
width:520px;
}

.bigName
{
position:relative;
border-style:none;
font-family:Arial Unicode MS;
font-size:50px;
width:250px;
height:55px;
}

.bigUsername
{
position:relative;
border-style:none;
font-family:Arial Unicode MS;
font-size:15px;
width:250px;
}
</style>

</head>

<body>
<form id="form1">

<div class="wrapper" >
<div id="divTop" class="unshaded">
<table width="320px"><tr><td align="center">
<input type="text" name="theirName" value="Foo" size="15" class="bigName" readonly="readonly" />
<br />
<input type="text" name="theirUsername" value="bar" size="15" class="bigUsername" readonly="readonly" />
</td></tr></table>
</div>
<div id="divTopS" class="shaded"></div>

<div id="divMid" class="midbox">

</div>

<div id="divBot"class="unshaded">
<input type="submit" value="a button" />
</div>
<div id="divBotS" class="shaded">
</div>
</div>

</form>
</body>
</html>

3 Columns, Header, Body, Footer Div Layout - Outer Columns Height Stretch Problem

Similar Tutorials

Hello,

I'm working now on div layout that contains 3 sections (header, body, footer) in one centered wrapper with border (divs with background imgs).

My problem is:

- divs that are in fact borders (id="l_outerborder_b" and id="r_outerborder_b") don't stretch when main container (id="body_content_text") grows.

Here is a html code:

Code:

<!--BEGIN TEMPLATE HEADER -->

<!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>
   	
<link href="template.css" rel="stylesheet" type="text/css" />
    <script type="text/javascript" src="template.js" />
</head>
<body onload="onloadprocedures()">
<div id="main_container">
	<div id="template_header">
		<div id="tl_outerborder"></div>
		<div id="t_outerborder"></div>
		<div id="tr_outerborder"></div>
		<div id="l_outerborder_h"></div>
		<div id="header_content">
			<div id="logo"><img src="img/logo.png" alt="" /></div>
			<div id="slogan"><img src="img/slogan.png" alt="Centrum zdrowia" /></div>
		</div>
		<div id="r_outerborder_h"></div>
	</div>
  
  <!-- END TEMPLATE HEADER -->
  <!-- BEGIN TEMPLATE BODY -->
	  <div id="template_body">
		<div id="l_outerborder_b"></div>
		<div id="body_content">
			<div id="body_content_text">
			  <p>TEST</p>
			</div>
		</div>
		<div id="r_outerborder_b"></div>
		
	  </div>
  <!-- END TEMPLATE BODY -->
  <!-- BEGIN TEMPLATE FOOTER -->
	<div id="template_footer">
		<div style="clear:both"></div>
		<div id="l_outerborder_f"></div>
		<div id="footer_content"></div>
		<div id="l_outerborder_f"></div>
		<div id="bl_outerborder"></div>
		<div id="b_outerborder"></div>
		<div id="br_outerborder"></div>
	</div>
</div>
</body>
</html>
<!-- END TEMPLATE FOOTER -->

and CSS:

Code:

@charset "utf-8";
/* CSS Document */
body {
	background-color:#FFFFFF;
	font-family:Tahoma, Verdana, "Times New Roman", Arial;
	font-size:12px;
}
a:link {text-decoration: none}      /* unvisited link */
a:visited {text-decoration: none}  /* visited link */
a:hover {text-decoration: none}  /* mouse over link */
a:active {text-decoration: none}  /* selected link */
#main_container {
	position:relative;
	margin:auto;
	width:960px;
	height:auto;
}
#template_header {
	float:left;
	position:relative;
	width:960px;
	height:300px;
}
#header_content {
	float:left;
	position:relative;
	width:900px;
	height:270px;
}
#logo {
	width:310px;
	height:130px;
	position:relative;
	float:left;
	top:0px;
	left:0px;
}
#slogan {
	width:580px;
	height:100px;
	position:relative;
	float:left;
	top:0px;
	left:0px;
}
#tl_outerborder {
	float:left;
	position:relative;	
	background-image:url(img/tl_outerborder.png);
	width:30px;
	height:30px;
}
#t_outerborder {
	float:left;
	position:relative;
	background-image:url(img/t_outerborder.png);
	width:900px;
	height:30px;
}
#tr_outerborder {
	float:left;
	position:relative;
	background-image:url(img/tr_outerborder.png);
	width:30px;
	height:30px;
}
#l_outerborder_h {
	float:left;
	position:relative;	
	background-image:url(img/l_outerborder.png);
	background-repeat:repeat-y;
	width:30px;
	height:270px;
}
#r_outerborder_h {
	float:right;
	position:relative;
	background-image:url(img/r_outerborder.png);
	background-repeat:repeat-y;
	width:30px;
	height:270px;
}
#body_content {
	float:left;
	position:relative;
	width:900px;
	
	overflow:hidden;
}
#body_content_text {
	float:left;
	position:relative;
	width:600px;
	
	margin: auto;
	overflow:hidden;
}
#l_outerborder_b {
	float:left;
	position:relative;	
	background-image:url(img/l_outerborder.png);
	background-repeat:repeat-y;
	width:30px;
	height:inherit;
}
#r_outerborder_b {
	float:right;
	position:relative;
	background-image:url(img/r_outerborder.png);
	background-repeat:repeat-y;
	width:30px;
	height:inherit;
}
#l_outerborder_f {
	float:left;
	position:relative;	
	background-image:url(img/l_outerborder.png);
	background-repeat:repeat-y;
	width:30px;
	height:inherit;
}
#r_outerborder_f {
	float:right;
	position:relative;
	background-image:url(img/r_outerborder.png);
	background-repeat:repeat-y;
	width:30px;
	height:inherit;
}
#template_body {
	float:left;
	position:relative;
	width:960px;
	
	overflow:hidden;
}
#bl_outerborder {
	float:left;
	position:relative;	
	background-image:url(img/bl_outerborder.png);
	width:30px;
	height:30px;
	
}
#b_outerborder {
	float:left;
	position:relative;
	background-image:url(img/b_outerborder.png);
	width:900px;
	height:30px;
}
#br_outerborder {
	float:left;
	position:relative;
	background-image:url(img/br_outerborder.png);
	width:30px;
	height:30px;
}

Thanks in advance for info how to stretch those doomed divs

EDIT: Here is layout concept.

URL
hTTp://qsrc.pl/layout.jpg

Having Issues Getting Divs To Stretch Content And/or Container Divs

Similar Tutorials

Ok, so I've learned to stay away from tables when you don't need them, and I have an instance where this is the case. I have a container div that has a header, content and a footer. On my home page, I have to divs next to each other with the same height and a div below them towards the right.

To simplify my problem, look at this example.
Code:

<html>
  <body>
    <div style="float:right">
      Hello there!
    </div>
    <hr>    
  </body> 
</html>

If there's a "float:right" on that div, the hr tag below doesn't get pushed down. But if I use relative positioning and don't use the floats, I can't put the two top divs next to each other. The other option is to use absolute positioning, but again content below doesn't get pushed down correctly.

It seems that using "clear:both" works, but it seems weird that this has to be done. For example if I have floating divs in a container, I can get them to stretch out the container like so:

Code:

<html>
  <body>
    <div style="border: 1px solid #000; ">
      <div style="float:right">
        Hello there!<br />
        Hello there!<br />
        Hello there!<br />
        Hello there!<br />
        Hello there!<br />
        Hello there!<br />
        Hello there!<br />
      </div>
      <div style="clear: both"></div>
    </div>
    <hr>    
  </body> 
</html>

Am I missing something fundamental here? Is there a better solution? Thanks in advance.

Centering Divs Inside Other Divs In Firefox?

Similar Tutorials

Centering DIVs inside other DIVs in Firefox? Can it be done in a straight forward way? Setting the inner DIVs float to none seemed to work for IE but not FF.

Divs Inside Floated Divs Makes Ie6 Something Something.

Similar Tutorials

Here's the site in Question: http://www.winchps.vic.edu.au

It's a standard fixed width floated DIV columns with a wrapper. One thing it does have is a second DIV inside both columns to display the Gradient background over the top of the repeated background. It works perfect in Firefox & IE7 (with a tweak) but IE6 mkes the sidebar nested div drop below the original sidebar DIV click here for a screenshot for those lucky enough not to have IE6.

Here's the CSS code for the basic layout:

Code:

body {
font-family: 'Lucida Grande', Verdana, Arial, Sans-Serif;
font-size: 12px;
text-align: center;
margin: 0px 0px 60px 0px;
padding:0px;
border: 0;
line-height: 2;
}

#header {
width: 802px;
}

#wrapper {
width: 802px;
margin:0px;
padding: 0px;
text-align: left;
margin: 0 auto;
background: url(images/bodybg.jpg) center repeat-y;
}

#content {
padding: 0px;
margin: 0px;
}

#maingrad {
background: url(images/winchcontentgrad.jpg) top left repeat-x;
padding: 10px;
}

#main {
width: 589px;
float: right;
background: url(images/winchcontentbg.jpg) repeat;
border-left: solid 1px #000;
border-right: solid 1px #000;
}

#mainstop {
width: 589px;
float: right;
background: url(images/winchcontentbg.jpg) repeat;
border-left: solid 1px #000;
border-right: solid 1px #000;
border-bottom: solid 1px #000;
font-size: 10px;
}

#sidebargrad {
background: url(images/winchsidebargrad.jpg) top left repeat-x;
padding: 10px 5px 0px 10px;
}

#sidebar {
width: 200px;
float: left;
background: url(images/winchsidebg.jpg) repeat;
line-height: 2;
font-size: 14px;
border-left: solid 1px #000;
border-right: solid 1px #000;
}

I obviously need to put a conditional comment in there, same for what I did for the minor IE7 tweak, but I'm struggling to suss out what's causing it, I haven't found the specific issue on any of the regular sites (PIE etc).

Anyone got any ideas?

Divs In Divs (container Size)

Similar Tutorials

The Example

I've read a bunch about how div's won't stretch to accomidate div's inside of them if they overrun the height/min-height set for the container div.

How do I get around this? You can see the skeleton of the site above. It's fine unless you resize the window smaller than the content.

Divs Appearing Outside Of Containing Divs? Why?

Similar Tutorials

Alright, I've been working on my own custom border box for a while and I've almost got it, but it has a few problems still. How I do it is I have one div that contains it all (.box) that defines the height and width of the whole box. Then I have three boxRows to lay out the images, and then I define how three cells in each of those rows should behave, very much like how custom borders used to be done with tables. Here are the problems:

In both firefox and internet explorer, the bottom row and the far right column actually appear OUTSIDE the .box containing box.

There are two additional problems in internet explorer. First, the middle row handles the auto height differently and only expands about 10px instead of the height of the containing box. The second is that the whole middle row for some reason appears to be pushed to the right by about 16px.

Any help would be appreciated. Here's the code:

HTML:

Code:

<html>
	<head>
		<link rel="stylesheet" type="text/css" href="reset.css" />
		<link rel="stylesheet" type="text/css" href="testBox.css"> 	
	</head>
	<body>

		<div class="box">
			<div class="boxRowTop">
				<div class="boxCellLeft"></div>
				<div class="boxCellMiddle"></div>
				<div class="boxCellRight"></div>
			</div>
			<div class="boxRowMiddle">
				<div class="boxCellLeft"></div>
				<div class="boxCellMiddle"></div>
				<div class="boxCellRight"></div>
			</div>
			<div class="boxRowBottom">
				<div class="boxCellLeft"></div>
				<div class="boxCellMiddle"></div>
				<div class="boxCellRight"></div>
			</div>

	</body>
</html>

And here is the layout css file:

Code:

/* Box classes */
.box {
	background: rgb(120,120,120);
	height: 200px;
	width: 500px;
}
.boxRowTop {
	height: 16px;
	position: relative;
	width:%100;
}
.boxRowMiddle {
	height: auto;
	width:%100;
	position: relative;
}
.boxRowBottom {
	height: 16px;
	width:%100;
	position: relative;
}
.boxCellLeft {
	height: 100%;
	left: 0;
	position: absolute;
	top: 0;
	width: 16px;
}
.boxCellMiddle {
	height: 100%;
	margin-left: 16px;
	margin-right: 16px;
	width: auto;
}
.boxCellRight {
	height: 100%;
	left: 100%;
	position: absolute;
	top: 0;
	width: 16px;
}


/* Define Cell Backgrounds/Images */
.boxRowTop .boxCellLeft {
	background: url(../LandingImages/topleft_circ_corner.png) no-repeat;
}
.boxRowTop .boxCellMiddle {
	background: url(../LandingImages/top_border.png) repeat-x;
}
.boxRowTop .boxCellRight {
	background: url(../LandingImages/topright_circ_corner.png) no-repeat;
}
.boxRowMiddle .boxCellLeft {
	background: url(../LandingImages/left_border.png) repeat-y;
}
.boxRowMiddle .boxCellMiddle {
	background: rgb(255,255,255);
}
.boxRowMiddle .boxCellRight {
	background: url(../LandingImages/right_border.png) repeat-y;
}
.boxRowBottom .boxCellLeft {
	background: url(../LandingImages/bottomleft_circ_corner.png) no-repeat;
}
.boxRowBottom .boxCellMiddle {
	background: url(../LandingImages/bottom_border.png) repeat-x;
}
.boxRowBottom .boxCellRight {
	background: url(../LandingImages/bottomright_circ_corner.png) no-repeat;
}

And last, the reset CSS, which I don't think has anything to do with the problems because if I take it out it still has them.

Code:

html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, tt, var, dl, dt, dd, ol, ul, li,
fieldset, form, label, legend, caption
{
	margin:0;
	padding:0;
	border:0;
	vertical-align:baseline;
}

* {font-size:1em; font-family: inherit;}

:focus {outline:none;}

body { font-size: 62.5%; line-height:normal; font-family: Arial, Sans-Serif; color:Black; } /* 62.5% (10px), 75% (12px), 87.5% (14px), 100% (16px) */

p {	margin: 0 0 1.2em 0; }

a			{ color:#ff0000;	text-decoration:none; }
a:link		{ color:#ff0000;	text-decoration:nonee; }
a:visited	{ color:#ff0000;	text-decoration:none; }
a:active	{ color:#ff0000;	text-decoration:none; }
a:hover		{ color:#ff0000;	text-decoration:none; }

a.h1,a.h2,a.h3,a.h4,a.h5,a.h6,h1,h2,h3,h4,h5,h6
{
	font-weight:bold;
	display:block;
	text-decoration:none;
	color:Black;
}

h1, a.h1, a:link.h1, a:visited.h1, a:active.h1, a:hover.h1 { color:Black; text-decoration:none; font-size: 2.00em; }
h2, a.h2, a:link.h2, a:visited.h2, a:active.h2, a:hover.h2 { color:Black; text-decoration:none; font-size: 1.75em; } /* this is normally skipped? 1.50em */
h3, a.h3, a:link.h3, a:visited.h3, a:active.h3, a:hover.h3 { color:Black; text-decoration:none; font-size: 1.50em; } /* 1.25em */
h4, a.h4, a:link.h4, a:visited.h4, a:active.h4, a:hover.h4 { color:Black; text-decoration:none; font-size: 1.25em; } /* 1.00em */
h5, a.h5, a:link.h5, a:visited.h5, a:active.h5, a:hover.h5 { color:Black; text-decoration:none; font-size: 1.00em; } /* 0.75em */
h6, a.h6, a:link.h6, a:visited.h6, a:active.h6, a:hover.h6 { color:Black; text-decoration:none; font-size: 0.75em; } /* 0.66em WTF? */

fieldset { border:solid 1px; padding:0.25em 0.5em 0.75em; margin: 0 0 1.5em; }
legend { margin:0 0 0 2em; padding:0 1em; }

textarea, input, select { border:solid 1px #ccc; margin:0; padding:0; }
textarea, input { padding:0 .2em; }
input:focus,textarea:focus,select:focus { border:solid 1px black; }

small { font-size:.9em; }

ul, ol, dl { position: relative; padding:0 0 0 1.5em; margin:1.5em 0; }
dir, menu { margin:1.5em 0; }
/* nested lists have no top/bottom margins */
ul ul,   ul ol,   ul dir,   ul menu,   ul dl,
ol ul,   ol ol,   ol dir,   ol menu,   ol dl,
dl ul,   dl ol,   dl dir,   dl menu,   dl dl,
dir ul,  dir ol,  dir dir,  dir menu,  dir dl,
menu ul, menu ol, menu dir, menu menu, menu dl
{
	margin:0;
	padding: 0 0 0 1.5em;
}

hr { margin:0.75em 0; padding:0; }

Any help would be GREATLY appreciated, as I've been working on this for a while!

Thanks!

Css Columns

Similar Tutorials

I'm building a CSS web site and the main body of the page has a left column containg navigation and then the content on the right. What I want to have is that the height of the smallest of the 2 columns to equal that of the the highest, currently the navigation either runs over the borders of the actual box, or the text from the right column undercuts the navigation column. To see what I mean see www.twstd.net/future/.
Hoiw can I prevent the above display issues? Thanks.

Doing 2 Columns

Similar Tutorials

Just wondering is it a good way to do columns in css using two spans set to float left and then right and having their widths set, then the content in divs or spans inside them?

Can't Even Get Two Columns Right...

Similar Tutorials

Have a little problem with the 3-column layout. I'm converting it down to 2-column, which should be easier. However, in all exampels I've seen, there is no need to assign height, and all of the column divs always stay the same height. I can't seem to duplicate this. Here's what I have:
PHP Code:
<div id="leftCol">
  <p>crap</p>
  <p>crap</p>
  <p>crap</p>
  <p>crap</p>
  <p>crap</p>
</div>

<div style="width: 200px;">
<p>more content</p>
<p>more content</p>
<p>more content</p>
<p>more content</p>
<p>more content</p>
<p>more content</p>
<p>more content</p>
<p>more content</p>
<p>more content</p>
<p>more content</p>
<p>more content</p>
<p>more content</p>
<p>more content</p>
<p>more content</p>
<p>more content</p>
<p>more content</p>
</div>

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

and the relevant CSS:
PHP Code:
.clear{
  /* clearing element for floats */
  font-size: 0px; /* for weird IE */
  height: 0px;
  width: 0px;
  clear: both;
}

div{
  margin: 0px;
  padding: 0px;
  border: 0px black solid;
}

#leftCol{
  width: 100px;
  border: 5px #000077 solid;
  border-top: 0px #000077 solid;
  margin: 0px;
  padding: 0px;
  float: left;
}

* html #leftcol{ /* Tan Box Hack */
  width: 104px;
  width: 100px;
}

IE likes it (IE likes just about anything), but the "more content" text gets wrapped around the "leftCol" in Firefox. Any suggestions to what I'm missing? Thanks!

2 Columns With Another 1 Below

Similar Tutorials

I am trying to create a page with two side by side boxes, each coloured differently, and a third box, the full width of the page, directly underneath the other 2.

The puzzling thing for me is that when I define the two side by side boxes as 50% each the left box will appear under the bottom box.

If I define 1 of the boxes as 49.9% they appear side by side with a small strip between them.

The other thing is that although I have defined margin and padding as 0 the boxes do not fill the width of the screen.

Can anybody explain to me how to get the screen filled to 100% and the 2 columns to take 50% of the screen each.

Here is the code:

Code:

 .main_container{
margin:0;
padding:0;
width: 100%;
height: 400px; //change to whatever size you wish
background-color:#FFF;
}

.left_box{
margin:0;
padding:0;
width: 50%;
height: 400px; //change to whatever size you wish
clear: left;
float: left;
background-color:#333;
}

.right_box{
margin:0;
padding:0;
width: 50%;
height: 400px; //change to whatever size you wish
clear: right;
float: right;
background-color:#666;
}

.footer{
margin:0;
padding:0;
width: 100%;
height: 100px; //change to whatever size you wish
clear: both;
position:relative;
background-color:#888;
}

Css - From 2 To 3 Columns

Similar Tutorials

Hi,
i tried to change this blogger theme from 2 to 3 columns... but when done .... the menu bar on sidebar disapear...

Can you help me?... for you I don't think is so difficult; I'm not a web designer but a system administrator... so, is not so easy.

This is the link where you can find the xml.
plantillasblogyweb.googlepages.com/Blogy-iPlantilla-Blogyweb.blogspot.c.xml

Thank you in advance
Surfparadise

Columns Help

Similar Tutorials

Hi,

I am trying to setup 2 columns in XHTML, and am wondering how I would get the right column to automatically begin after the left column.

PHP Code:
<div id="container">
    <div id="leftcolumn">
        <div id="leftcolumntop">
            aaaa


        </div>
        <div id="leftcolumnbottom">
            bbb


        </div>
    </div>

    <div id="rightcolumn">
        <div id="rightcolumntop">
            ccc


        </div>
        <div id="rightcolumnbottom">
            ddd


        </div>
    </div>
</div>

So basically what I'm looking to do is position "rightcolumn" so it begins right after "leftcolumn". I'm not sure how to tho. Right now I'm using absolute positioning, but I'd rather have it all line up automatically rather then having to play with #'s to get it to line up every time.

Three Columns Right For This Job?

Similar Tutorials

Notice on NZBMatrix.com on the left hand side, it looks as if there were multiple boxes where normally just one navigation box would exist in a three-column layout. I already know how to do a three-column layout, but my question is, are there several different columns on the left of this website, or is it just one column with several sections defined by borders?

Thank you for any advice.