Learn VBA & Macros in 1 Week!

CSS - Aligning Problem With 2-col Layout

Full Excel VBA Course - Beginner to Expert

Aligning Problem With 2-col Layout	View Content

http://s125392025.websitehome.co.uk/layout.html

I'm working on a CSS layout(mind that this is my first time working with CSS, if something isn't right tell me, because I want to learn it right the first time), it's 2 columns, a main body and a subnav.

But I can't get the subnav to align properly with the main body. I'm not too sure how to do this, I've tried it in a X,Y fashion but I'm not sure if I was doing that right. Please help.

Edit: Finally Found it, nm.

Full Excel VBA Course - Beginner to Expert

Aligning The Base Of A Div Based Layout

Similar Tutorials

View Content

Alright, so I took advice I was receiving and made a tableless template for a site. Now I have one problem - my two columns are <div> tags, floated to the left and right. At the bottom of the page, however, I need to align the ends of the column horizontally - without using 'height' attributes that I'd have to change upon updating or changing any page. The site files are attached.

I basically need a way to end each column at the same line. Changing the entore layout of the page is not an option because I do not have the time to re-configure everything - the solution does not need to be absolutely perfect as far as CSS validation goes, but it needs to be cross-browser compatible.

Thanks in advance - you guys are always excellent with my questions no matter what I ask.

Help With Layout (aligning Image With List)

Similar Tutorials

View Content

Hi:

I need a simple code for displaying two things side by side.

I want to attach an image of what I need to do, but I can't figure out how to attach images. Basically, to describe the image, I need to have an unordered list on the left and a graphic on the right. These need to be between to blocks of text (above and below). I would prefer not to use tables.

I am assuming there is a simple way to do that using <div> and <span> and floats, but I can't figure it out.

Can someone please help.

Thanks.

Css Problem With % Aligning

Similar Tutorials

View Content

The site is located at:
http://68.41.210.39:8081/empcoBeta/index.html

Why is it that the site displays fine in safari, netscape, mozilla/firefox etc, but is totally screwed in windowze IE?

The css is as follows:

#under
{
width:84%;
height:1%;
background-color:#1E77D3;
position:absolute;
top:5%;
left:16%;
}
#mainleft
{
width:35%;
background-color:white;
vertical-align:top;
position:absolute;
top:10%;
left:22%
}
#mainright
{
width:40%;
background-color:white;
vertical-align:top;
position:absolute;
top:10%;
right:2%
}
body
{
font-family: sans-serif;
font-size: 12px;
}
.indented1
{
padding-left: 5pt;
padding-right: 5pt;
font-size: 12px;
font-family: sans-serif;
}
.indented2
{
padding-left: 10pt;
padding-right: 5pt;
font-size: 12px;
font-family: sans-serif;
}

a:link {color: #17507e; font-size: 2; text-decoration: none; }
a:active {color: blue; font-size: 2; text-decoration: none;}
a:visited {color: #17507e; font-size: 2; text-decoration: none;}
a:hover {color: blue; font-size: 4; font-weight: bold; text-decoration: none;}

#column
{
width:1%;
height:81%;
background-color:#B4CCEB;
position:absolute;
top:0%;
left:15%;

}
#leftsidebar1
{
width:100%;
height:5%;
background-color:#B4CCEB;
position:absolute;
top:0%;
left:0%;

}
#leftbar1
{
width:15%;
height:40%;
background-color:#CEDFFF;
position:absolute;
top:5%;
left:0%;

}
#leftsidebar2
{
width:16%;
height:2%;
background-color:#B4CCEB;
position:absolute;
top:40%;
left:0%;

}
#leftbar2
{
width:15%;
height:40%;
background-color:#CEDFFF;
position:absolute;
top:41%;
left:0%;

}
#leftsidebar3
{
width:16%;
height:1%;
background-color:#B4CCEB;
position:absolute;
top:81%;
left:0%;

}
#credits
{

position: absolute;
left:1%;
bottom:20%;

}
.tcredits
{
text-align: left;
font-size: 9px;
font-family: sans-serif;
}

Aligning Problem

Similar Tutorials

View Content

I'm building a site: www.bunjareecottages.com.au

At the moment, the middle column (which is the only variable sized bit on the page) is set to a min height of 495px. This works ok on larger resolutions, but creates a scroll even when no content reaches that length on smaller resolutions. That's as expected.

What I want to have the middle section having a min height of 110px from the top of the page, and 10px from the bottom. So if the content was very little, the yellow background would still be 10px from the bottom, but if content was really long and there was a scoll, the end of the yellow was 10px from the bottom.

Currently the yellow content area is relatively positioned from top by 110px, with margins of the correct sizes on each side. Everything else is absolutely positioned.

Any ideas?

Problem With Aligning - I Think?

Similar Tutorials

View Content

ok...

im making a site with CSS...

this is my css code -

Quote:
a:link {color:white}
a:visited {color:white}
a:hover {color:black}
a:active {color:white}

body {background-color: #666666}

#head{

position: relative;
top: 7px;
left: 140px;
width: 707px;
font-family: verdana;
font-size: 12px;
color:white;
background-color: #666666;
background-image: url(wavy.jpg);

}

#content {

position: relative;
top: 7px;
left: 140px;
width: 697px;
font-family: verdana;
font-size: 12px;
text-align: justify;
color:white;
background-color: #666666;
background-image: url(image/back.jpg);
padding: 5px;

}

#foot{

position: relative;
left: 140px;
width: 707px;
font-family: verdana;
font-size: 9px;
text-align: center;
color:white;
background-color: 666666;
background-image: url(wavy.jpg);

}

and this is my code for my PHP page, which reads the css -

Quote:
<html>
<head>
<link rel="stylesheet" type="text/css" href="fula.css" />
</head>

<body>

<div id="head"><img src="image/head.jpg"></div>

<div id="content">

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

<br>

<div id="foot">Graphics & Design by "NO NAMED DESIGNS" - Copyright 2006 "KLSOON2BE"</div>

</body>
</html>

ok... now, if you look at it in firefox... everything aligns just fine but if you look at it in I.E its out of place... any help would b greatly appreciated!

to view the page this problems on -

http://www.outlawz.frihost.net/fula/test2.php

Problem With Aligning Layer..

Similar Tutorials

View Content

(never mind, i dont need layers anyways) Sorry, pls delete this!

Easy (i Think) Div Aligning Problem

Similar Tutorials

View Content

All I'm looking for is something like:

<div class="field">Name</div>
<div class="result">Jeremy</div>

Where the size of the left div is set and the right div can extend to the right of the page, but not drop underneath.

I had:

.field{
float:left;
width:150px;
}

result{
float:left;
}

Which works fine until there's a really long name on the right. In cases like this, I still want that div to stay over to the right, but instead it drops down. So I want:

Name: .... Here's a really long name. Here's a really long name.
.............. Here's a really long name. Here's a really long name.
.............. Here's a really long name.

But I'm getting:

Name:
Here's a really long name. Here's a really long name. Here's a really long name. Here's a really long name.Here's a really long name.

The right "column" breaks down to the line below. Of course this is easy to solve using tables. Any suggestions for Divs?

Problem Aligning List

Similar Tutorials

View Content

I have put together a page with a left floating text box that text wraps around the top, right and bottom. It was going pretty well, thanks to some help I have already received, but I am having a problem with a bulleted list alignment. Please take a look at the test page below.

TEST PAGE

The relevant style code follows:

Code:

.textboxleft 
{
	background: #3E5C92;
	font: normal 0.8em/140% arial, helvetica, sans-serif;
	margin: 10px;
	width: 160px;
	border: 1px solid #E4E7F5;
	float: left;
	overflow: hidden;
	padding: 0.5em;
}
.textboxleft p
{
	color: #000000;
}
ul li
{
	color: #E0E0F6;
	font: normal 0.9em/135% tahoma, arial, helvetica, sans-serif;
}

Of course, you can also look at the complete source code and download the css file for more information. I would be happy to provide any additional information.

If there is something I can alter in the CSS or HTML to prevent the list bullets from bumping into the text box, please let me know. I am very new at this and have only gotten this far with the help of people like you.

Thank you,

Grump
PS: you will also notice another thread concerning the width of the text box. It does not render at 160px in Firefox, but does in IE.

Problem Aligning Layers - Please Help!!!

Similar Tutorials

View Content

I am trying to solve a problem I have had for a very long time. I have ignored it but I just can't do that any longer ... The code works well in FF but not in IE.

The problem:
I want to display three layers side by side (left to right). The left and right layers show just fine but the middle layer jumps down to just under the higher of the two other layers, effectively making my site not IE friendly.

The code (taken from my site):
Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Working with divisions</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

<style>
div#content
{
	margin-left: 205px;
	margin-right: 205px;
	width: 610px;
	margin-top: 0px;
	line-height: 150%;
	background-color: white;
	border: 1px solid red;
}
div#more
{
	float: right;
	width: 160px;
	margin: 0;
	padding: 4px 0px 8px 4px;
	background-color: red;
	color: #fff;
	border: 1px solid white;
}
div#container
{
/*	background-image:  url(../nav_col_base.jpg); */
/*	background-repeat: repeat-y; */
	background-color: yellow;
	border: 1px solid black;
}
div#container2
{
/*	background-image:  url(../more_col_base.jpg); 
	background-repeat: repeat-y;
	background-position: right; */
	border: 1px solid black;
	background-color: gray;
}
#verMenu
{
padding-top: 2px;
float: left;
margin-left: 0px;
font: bold 11px Verdana, sans-serif;
width: 195px;
background-color: green;
border: 1px solid white;
}
div#banner
{
color: #fff;
background-color: #333;
border-bottom: 1px solid #000;
}
div#banner h1
{
	margin: 0;
	padding: .3em 0 .3em .5em;
	font-size: 2.2em;
	font-weight: normal;
}
#cleardiv
{
	clear: both;
	height: 1em;
}

</style>

</head>

<body>
<div id="banner">
	<h1>This is my banner division</h1>
</div>
<div id="container">
	<div id="container2">
		<div id="vermenu">
		This is the VERMENU division.  Lets see what happens if I add a whole lot of content to this deivision.  I am expecting the content division to drop down and start displaying just as this content ends.
		</div>
		<div id="more">This is the more division.  I also notice that in FF the width for the content division does not overlap over this division while in IE it does.</div>
		<div id="content">This is the content division.  I cannot figure out why this division drops to just under the larger of the other two divisions.  If you add lines to any of the two divisions, this division shifts down ...</div>
		<div id="cleardiv"></div>
	</div>
</div>

</body>
</html>

I have color coded the layers to simplify identifying the layers and where they show.

What am I doing wrong?

Thank you all in advance for your assistance.

Jose

PS: I cannot post a link otherwise, I would have provided you with one for my website.

Problem With Aligning A Menu In Css

Similar Tutorials

View Content

Hi guys .. Kinda stuck again.

I've just obtained a menu which I liked, and for some reason, using the 960 gridsystem i cant get it to align correctly under the space which will eventually be a textlogo

Here's the index.html:

PHP 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>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <link rel= "stylesheet" href="css/960/960.css" />
  <link rel= "stylesheet" href="css/960/text.css" />
  <link rel= "stylesheet" href="css/nav.css" />
  <title>FIXA DATORN!</title>
  </head>

  <body>


  <div class="container_16">
  <div id="logo" class="grid_4 push_5"><p><h3>FIXA DATORN!</h3></p>
    </div>
    </div>
<nav>
  <div class="menu">
  <ul>
  <li><a href="#" title="Home">Home</a></li>
  <li><a href="#" title="About">Portfolio</a></li>
  <li><a href="#" title="Jobs">Blog</a></li>
  <li><a href="#" title="Contact">Contact</a></li>
  </ul>
  </div>
  </nav>
  </body>
  </html>

and nav.css:

PHP Code:
/* Nav */
nav{
    bottom:414px;
    min-width:450px;
    position:absolute;
    right:10%;
    text-align: center;
}
nav ul li{
    border-bottom:5px solid #68a99f;
    float:left;
    font-family:'BebasNeueRegular', sans-serif;
    font-size:18pt;
    height:60px;
    line-height:60px;
    list-style-type:none;
    margin:0 7px;
    text-align:center;
    width:120px;
}
nav ul li:hover{
    border-bottom-color:#0076a3;
    transition-property:border-bottom-color;
    transition-duration:0.5s;
    -moz-transition-property:border-bottom-color;
    -moz-transition-duration:0.5s;
    -webkit-transition-property:border-bottom-color;
    -webkit-transition-duration:0.5s;
}
nav ul li a{
    color:#eee;
    display:inline-block;
    height:100%;
    width:100%;
    text-decoration:none;
}
nav ul li a:hover{
    color:#999;
    text-decoration:none;
    transition-property:color;
    transition-duration:0.5s;
    -moz-transition-property:color;
    -moz-transition-duration:0.5s;
    -webkit-transition-property:color;
    -webkit-transition-duration:0.5s;
}
.current_page_item{
    border-bottom-color:#af4932;
}

Problem With Aligning Divs

Similar Tutorials

View Content

I have these two blocks that need to be on the same row. As it is now, they are blocked into two seperate rows. What I'm trying to achieve, is to have the logo on the far left, where it is now. But, I'd like to have the Login text to the far right, just before the tiled background (sunflowers). I'm not sure how to fix this problem. Can anyone take a quick look?

http://www.marginalspace.com/asif/index.php

Problem Aligning Images Inside Div.

Similar Tutorials

View Content

The image that is set to align right keeps moving down some. Is there anyway to get it to be level with the image that's left aligned without using a negative margin or tables?
The problem occurs in Netscape 7 and IE 6. Mysteriously enough it is displayed correctly in Opera 7.
Code:

#title {
	margin-left: 170px;
	background: url(./imgs/title_mdl.gif) repeat-x;
	width: auto;
	height: 40px;
}
#title span {
	font-size: large;
	text-align: center;
}
#title img {
	width: 82px;
	height: 40px;
}

Code:

<div id="title"><img src="./imgs/title_lft.gif" alt="" align="left"><span>Hello</span><img src="./imgs/title_rgt.gif" alt="" align="right"></div>

Problem Aligning Image Backgrounds In Tables Using Css

Similar Tutorials

View Content

Hey, I'm working on a site (URL) and I am having some problems.
I made a class in CSS:
Code:

.middle {
	background-attachment: fixed;
	background-image: url(images/midtop.gif);
	background-repeat: no-repeat;
	background-position: 0px 0px;
}

and am applying that class to the middle table. When I view it in IE, it looks fine, but in mozilla (I'm using firefox) it looks like it is positioning it at 0, 0 of the page, not the table.
If I change background-position: 0px 0px; to background-position: 139px 0px; then it looks fine in mozilla, but not IE.

Does anyone know how to fix this? (Or why it is happening)
Thanks~

Ie6 Layout Problem

Similar Tutorials

View Content

Hello,

I'm having issues with a new layout in IE 6.

The HTML is as follows:

Code:

    <div id="gsContainer">
        <div id="gsLeftBorder"></div>
        <div id="gsRightBorder"></div>
        <div id="gsContent">
            <div id="gsHeader">Heading</div>
            <div id="gsBox">
                Some content
            </div>
        </div>
    </div>

The CSS is as follows:

Code:

#gsContainer {
    position: relative;
    width: 795px;
    height: 185px;
    margin: 0 0 15px 0;
    padding: 0px;
}

    #gsLeftBorder {
        float: left;
        position: relative;
        margin: 0px;
        padding: 0px;
        width: 4px;
        background-image: url(/images/Left.gif);
        background-repeat: no-repeat;
        height:185px;
    }
    
    #gsRightBorder {
        position: relative;
        float: right;
        margin: 0px;
        padding: 0px;
        width: 4px;
        background-image: url(/images/GreenRight.gif);
        background-repeat: no-repeat;
        height:185px;
    }
    
    #gsContent {
        position: relative;
        height: 185px;
        margin-left: 4px;
        margin-right: 4px;
        width:779px;
        padding: 0px;
    }
    
    #gsHeader {
        position: relative;
        height: 25px;
        margin: 0px;
        padding: 6px 0 0 10px;
        width:769x;
        color: #fff;
        font-size: 14px;
        font-family: arial;
        font-weight: bold;
        background-image: url(/images/Header.gif);
        background-repeat: repeat-x;
    }
    
    #gsBox {
        position: relative;
        height: 129px;
        margin: 0px;
        padding: 25px 5px 0px 31px;
        width:743px;
        color: #000;
        font-size: 11px;
        font-family: verdana;
        background-image: url(/images/Back.gif);
        background-repeat: repeat-x;
    }

The display looks fine when I test in IE 7, FF2, and Safari, with the content appearing with a clean "header" on top, and some inner content with borders on the left & right side.

However, when viewing in IE6, the inner content (div "gsContent") is somehow too wide, and is pushed to the live after the "gsContainer" div.

When I play with the widths, if I shave 8px of width off gsContent and its inner divs, then the alignment is fixed, but there is spacing between gsLeftBorder & gsContent as well as gsContent & gsRightBorder

Any ideas how I can resolve this?

Css Div Layout Problem In Ie

Similar Tutorials

View Content

Hi,

I'm really stuck with a template i'm making.
it looks kind of o.k. in firefox Win XP,
but it's screwed up in IE6 on Win XP.

tried to many ways, but can't seem to solve it.

template:
http://www.thestateofdesign.com/template.php

CSS:
http://www.thestateofdesign.com/css/the_state_css.css

I want the content [left & right content] to be situated under the headers,
of course the left column on the left, and the right column next to the left,
with a footer underneath it.

in IE the footer and rightcolum move to the right.
Tried to use positioning absolute, but that screws up the footer.

Any help greatly appreciated,

Cheers,
Jarra

Css Layout Problem

Similar Tutorials

View Content

Ok, this is my first time creating a layout using div tags and I'm having trouble setting the footer to stay at the bottom.

example

From the example above, I want to footer to sit below the menu. I can't seem to get this to work.

Here's my code.

Code:

body {
    margin:0px;
    padding:0px;
    font-family:verdana, arial, helvetica, sans-serif;
    background-color:white;
}

#header {
    height:50px;
    background-color:#0755AB;
    text-align: center;
}

#content {
    width:100%;
    height:200px;
    margin:0px 0px 0px 150px;
    background-color:#008080;
    text-align: center;
}

#menu {
    position:absolute;
    top:50px;
    left:0px;
    width:150px;
    height:300px;
    background-color:#FF9F9F;
    text-align: center;
}

#footer {
    height:30px;
    background-color:gray;
    text-align: center;
    position: relative;
}

Css Layout Problem

Similar Tutorials

View Content

I am having a layout issue where if the contents of the left and right columns change, then the middle column increases or decreases in height.

See www.eyeongames.com

This is how it should look, but if you increase the font or the right or left columns expand, then the middle column shifts up or down.

I want the columns to be even across the top.

Thanks in advance!

Here is the style sheet code I am using.

Code:

a { 
   background: transparent; 
   color: #ff8f02; 
   text-decoration: none; 
} 

a:hover { 
   color: #fff; 
} 

body { 
   background: #550a04; 
   color: #d7cf00; 
   font-family: Verdana, Arial, Sans-serif; 
   font-size: 12px; 
   margin: 10px; 
   padding: 0; 
} 

form { 
   margin: 0; 
} 

h1,h2,h3,h4,h5,h6 { 
   margin: 0; 
   padding: 0; 
} 

hr { 
   background: #abc; 
   border: 0 none; 
   color: #abc; 
   height: 1px; 
   margin: 0; 
   padding: 0; 
} 

img { 
   border: 0 none; 
} 

p { 
   margin: 5px 0px 5px 0px; 
   padding: 0; 
} 

th,td { 
   padding: 2px; 
} 

div.leftColumn { 
   background: transparent; 
   border: 0px solid #555; 
   left: 10px; 
   padding: 5px; 
   position: absolute; 
   top: 400px; 
   width: 240px; /* Incorrect IE5 value */ 
   z-index: 2; 
   voice-family: "\"}\""; 
   voice-family: inherit; 
   width: 218px; 
} 

html>body div.leftColumn { 
   width: 218px; 
} 

div.leftColumn2 { 
    background: transparent; 
    border: 0px solid #555; 
    left: 10px; 
    padding: 5px; 
    position: absolute; 
    top: 143px; 
    width: 240px; /*Incorrect IE5 value */ 
    z-index: 2; 
    voice-family: "\"}\""; 
    voice-family: inherit; 
    width: 218px; 
} 

div.topColumn { 
    background: transparent; 
    border: 0px solid #555; 
    margin: 0px 200px 0px 130px; 
    min-width: 200px; 
    padding: 0px; 
    position: relative; 
    width: 600px; 
    z-index: 3; 
} 

div.middleColumn { 
   background: transparent; 
   border: 0px solid #555; 
   margin: 0px 200px 10px 240px; 
   min-width: 200px; 
   padding: 5px; 
   position: relative; 
   top: -105px; 
   width: 480px; 
   z-index: 3; 
} 

div.middleColumn2 { 
   background: transparent; 
   border: 0px solid #555; 
   top: 0px; 
   margin: 0px 200px 10px 240px; 
   min-width: 200px; 
   padding: 5px; 
   position: relative; 
   width: 480px; 
   z-index: 3; 
} 

div.rightColumn { 
   background: transparent; 
   border: 0px solid #555; 
   padding: 5px; 
   position: relative; 
   top: 43px; 
   margin: 0px 0px 0px 742px; 
   width: 240px; /* Incorrect IE5 value */ 
   z-index: 1; 
   voice-family: "\"}\""; 
   voice-family: inherit; 
   width: 218px; 
} 

html>body div.rightColumn { 
   width: 218px; 
} 

div.logoBlock { 
   background: transparent; 
   border: 0px solid #555; 
   left: 10px; 
   margin: 0; 
   padding: 0; 
   position: absolute; 
   text-align: left; 
   top: 10px; 
   width: 210px; /* Incorrect IE5 value */ 
   z-index: 2; 
   voice-family: "\"}\""; 
   voice-family: inherit; 
   width: 125px; 
} 

html>body div.logoBlock { 
   width: 188px; 
} 

div.copyrightBlock { 
   background: transparent; 
   margin: 0px 200px 0px 200px; 
   min-width: 200px; 
   padding: 0; 
   position: relative; 
   text-align: center; 
   width: 500px; 
   z-index: 3; 
} 

*.newItem { 
   color: #ff5500; 
} 

*.oldItem { 
   color: #fff; 
}

Here is part of the code.

There are multiple index.tpl files with similar code only the content changes, such as when browsing the games.

header.tpl

Code:

<div class="logoBlock"><--- LOGO IMAGE ---></div>
<div class="topColumn"><--- BANNER IMAGE ---></div>
<div class="leftColumn">
   <h3>{HEADER_BLOCK1_TITLE}</h3>
   <hr />
   <p><--- LINKS EDITED OUT ---></p>
   <h3>{HEADER_BLOCK2_TITLE}</h3>
   <hr />
   <p><--- MORE LINKS ---></p>
   <h3>{HEADER_BLOCK3_TITLE}</h3>
   <hr />
   <form><--- FORM CODE ---></form>
   <h3>{HEADER_BLOCK4_TITLE}</h3>
   <hr />
   <p>{HEADER_BLOCK4_CONTENT}</p>
   <!-- <hr />
   <p>{BACKEND_RSS}</p>
   <p>{BACKEND_TXT}</p> -->
</div>
<div class="rightColumn">
   <table style="width: 100%;background: #d7cf00;">
   <tr>
   <td align="center"><h3><font color="#550a04">Game Updates</font></h3></td>
   </tr>
   </table>
   <p align="center">{GAME_RSS}</p>
   <!-- <p align="center">{GAME_TXT}</p> -->
</div>

footer.tpl

Code:

<div class="leftColumn2">
   <table style="width: 100%;background: #d7cf00;">
   <tr>
   <td align="center"><h3><font color="#550a04">Latest News</font></h3></td>
   </tr>
   </table>
   <p>{BACKEND_RSS}</p>
   <!-- <p>{BACKEND_TXT}</p> -->
</div>
<div class="copyrightBlock">
   <p><--- COPYRIGHT ---></p>
</div>
</body>
</html>

index.tpl

Code:

<div class="middleColumn">
   <table style="width: 100%;background: #d7cf00;">
   <tr>
   <td align="center"><h3><font color="#550a04">News Headlines</font></h3></td>
   </tr>
   </table>
</div>
<!-- <div class="middleColumn">
   <p>{BACKEND_RSS}</p>
   <p>{BACKEND_TXT}</p>
</div> -->
<!-- BEGIN NEWS_BLOCK -->
<div class="middleColumn">
   <h3>{NEWS_SUBJECT}</h3>
   <h5>{NEWS_INDEX_RELEASE}</h5>
   <hr />
   <p><--- NEWS TEXT ---></p>
   <p>{NEWS_SOURCE}</p>
   <hr />
   <p><--- COMMENTS ---></p>
</div>
<!-- END NEWS_BLOCK -->
<div class="middleColumn"><p>{NEWS_INDEX_PAGES}</p></div>

Css Layout Problem

Similar Tutorials

View Content

Problem With 2 Col Layout In Ie

Similar Tutorials

View Content

Please have a look in the attached example:

the layout works fine (after some testing) in Mozilla. My problem is that the navigation breaks after the fourth button in IE. If i give a width to the list than the whole navigation breaks after the content at the left side.

Anyone with some advice?

Problem With A Div Layout

Similar Tutorials

View Content

I'm trying to create a fairly easy layout, making use of DIVs. The following structure is what I'm trying to accomplish:

www.dvolve[PLEASE REMOVE].org/tst.jpg

And here's what I currently have:

www.dvolve[PLEASE REMOVE].org/tst.htm

However, I'm not really convinced that this is the right solution. I am unable to scroll in the content div (IE6) for one, which is quite a problem. I'm hoping to make this look the same for most browsers. Does anyone have a better layout that achieves this or any pointers on what I'm doing wrong?